HTML+CSS基础15

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；}
}