1.BFC->块级格式化上下文->独立渲染的区域
触发条件:
a.overflow的值设置为hidden/auto/scroll
b.float的值为left/right
c.position的值为absolute/fixed
d.display的值table-caption(表格标题)/table-cell(单元格)/inline-block/flex(弹性盒)/inline-flex(行内弹性盒)
特性:
a.在BFC区域,浮动元素的高度不会计算在内
b.BFC区域不会和浮动盒子重叠
c.在BFC的区域,不会影响到外面的元素
2.弹性盒
父元素:形成弹性盒display:flex;
子元素在主轴上的排列方式:justify-content:
flex-start主轴的起点
flex-end主轴的终点
center主轴的中心
space-between两端对齐
space-around中间留白是两边的两倍
space-evenly每一段留白都是均匀的
子元素在交叉轴的排列方式:align-items
stretch拉伸,去掉高度后可看到效果
flex-start交叉轴的起点
flex-end交叉轴的终点
center交叉轴中心
换行flex-wrap:
nowrap:不换行;
wrap:换行;
行和行之间的对齐方式align-content
flex-start整个盒子的起点
flex-end整个盒子的终点
center整个盒子的中心
space-between整个盒子的两端
space-around整个盒子中间留白是两端的两倍
space-evenly整个盒子上下的每一段留白都是平均的
3.响应式布局:根据不同设备的分辨率,显示不同的样式
媒体查询@media 设备类型 and(媒体特性){ }
媒体特性:min-width(最小宽度)/max-width(最大宽度)
连接符and多个媒体特性之间用and来连接
@media all and(min-width:500px)and(max-width:999px){
.box{font-size:50px;color:green;}
}