盒子模型
box-sizing:content-box(默认)
此时元素的width = content
box-sizing:border-box
此时元素的width = content+padding+border
flex布局
常见父项属性
flex-direction :设置主轴方向
justify-content:设置主轴上的子元素排列方式 ({
flex-start:默认值从头部开始,
flex-end:从尾部开始排列
conter:在主轴居中对齐
space-around:平分剩余空间
space-between:先两边贴边,再平分剩余空间
})
flex-wrap:设置子元素是否换行 (默认不换行 nowrap 换行 wrap)
align-content:设置侧轴上的子元素的排列方式(多行)({
flex-start:默认值从头部开始,从上到下
flex-end:从尾部开始排列,从下到上
conter:中间显示
space-around:子项在侧轴中平分剩余空间
space-between:子项在侧轴先分布在两头,再平分剩余空间
stretch:设置子项元素高度平分父元素高度
})
align-items:设置侧轴上的子元素排列方式(单行)({
flex-start:默认值从头部开始,从上到下
flex-end:从尾部开始排列,从下到上
conter:垂直居中
stretch:拉伸
})
flex-flow:复合属性,相当于同时设置了 flex-direction和flex-wrap
常见子项属性
flex:子项目占的份数(设计左右两边宽度固定中间自适应的页面时可以使两边的div设置固定宽度,中间的div设置flex=1)
align-self控制子项自己在侧轴的排列方式
order:定义子项的排列顺序(前后排列)
