盒模型
1
默认为box-sizing: content-box，即设置div标签width和height时，是只设置给content的
而使用box-sizing: border-box后，width和height包括了：border + padding + content
//html
<div id="test">
content
</div>
//css
#test {
box-sizing: border-box;
width: 500px; //border + padding + content == 500px
height: 500px; //border + padding + content == 500px
margin: 30px;
padding: 30px;
border: 10px solid;
color: black;
/* 边框颜色默认与字体颜色相同 */
background-color: red;
border-radius: 20px;
/* 边框圆角 */
border-top-left-radius: 40px;
/* 左上边框圆角 */
border-bottom-right-radius: 50px;
/* 右下边框圆角 */
box-shadow: 100px -20px 3px 20px green;
/* 阴影：向右移动100px，向上移动20px，模糊3px，散开20px(阴影区域大小)，绿色 */
}
(border不知道为什么不是10px)
2
display:inline特殊之处：
1.设置width和height无效 2.设置margin上下无效
//html
//注意标签换行有空格
<span id="test">test</span>
<span>66666</span>
//css
#test {
width: 100000px;
height: 1000000px;
margin: 10px;
padding: 10px;
border: 2px solid;
}
//html
<div>1</div>
<span id="test">test</span>
<span>66666</span>
上图可知display:inline的上下margin无效
3
margin重叠的三种情况：都是取大的margin
父子
//html
<div class="item1">
<div class="item2"></div>
</div>
//css
.item1 {
background-color: red;
width: 300px;
height: 300px;
margin-top: 90px;
}
.item2 {
background-color: yellow;
width: 100px;
height: 100px;
margin-top: 100px; //二者margin取100px
}
兄弟
//html
<div class="item1"></div>
<div class="item2"></div>
//css
.item1 {
background-color: red;
width: 300px;
height: 300px;
margin-bottom: 90px; //最后的效果是下面的100px
}
.item2 {
background-color: yellow;
margin-top: 100px;
width: 100px;
height: 100px;
}
非兄弟、父子
//html
<div>
<div class="item1"></div>
</div>
<div>
<div class="item2"></div>
</div>
//css
.item1 {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 100px; //取这里的100，而不是下面的50
}
.item2 {
margin-top: 50px;
width: 100px;
height: 100px;
background-color: yellow;
}
4、BFC
float属性
float:left/right：脱离文档流，父元素塌陷
flex布局
开启flex布局
.father {
display: flex;
justify-content: center; //子元素横向居中
align-items: center; //子元素纵向居中
}
justify-content和align-items
justify-content: flex-start:子元素挤到start
center
flex-end:子元素挤到end
space-between:首尾子元素紧挨父级，子元素间均匀
space-around:首尾子元素间隔父级a，子元素间间隔a/2
space-evenly:子元素和父元素均匀间隔
align-items: flex-start/center/flex-end...
align-self
控制单个子元素在垂直方向上的排列，与align-items的区别就是前者控制单个，后者控制所有子元素
//html
<div class="father">
<div class="item">1</div>
<div class="item test">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
//css
.father {
display: flex;
width: 500px;
height: 500px;
background-color: red;
align-items: flex-start;
}
.item {
width: 100px;
height: 100px;
background-color: yellow;
}
.test {
align-self: flex-end;
}
flex-direction
值：row(默认)/row-reverse/column/column-reverse
使用reverse后start和end调换，注意使用justify-centent和align-items的效果 使用column后，justify-content控制纵向,align-items控制横向 justify-content始终控制的是当前的方向，而align-items是控制的是垂直当前方向的方向
order
控制单个子元素相对于其他子元素的顺序，其他子元素看做整体
给2设置：order:1;(默认为0)后
flex-wrap
取值：nowrap(默认)/wrap/wrap-reverse
//html
<div class="father">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
</div>
//css
.father {
display: flex;
width: 500px;
height: 500px;
background-color: red;
flex-wrap: wrap; //不加这一行的话，子元素全部挤在一行
}
.item {
width: 100px;
height: 100px;
background-color: yellow;
}
wrap时，将容器均分为三部分，然后每一行从每一个均分的部分开始排列。 wrap-reverse是从反方向开始换行
flex-flow
flex-direction和flex-wrap的结合，如flex-flow:column wrap等于flex-direction: column; flex-wrap: wrap;
align-content
取值:flex-start/center/flex-end/space-between/space-around/space-evenly
换行后，行与行之间会有间距，用align-content决定行间距。在wrap后，在父级中加入:align-content:flex-start
