1. 盒模型
1.默认情况下盒子的宽度仅仅是内容宽度,而实际宽度/高度 = padding+border+w/h
2.css3中可以通过box-sizing来指定盒模型,即指定为content-box/border-box(box-sizing:border-sizing)
(1)content-box:对象的实际宽度等于width+border+padding
(2)border-box:对象实际的宽度就等于设置的width值,border和padding不会改变对象的实际宽度
2.多列布局
1.常用属性
(1)column-count 设置列的个数
(2)column-width 控制列的宽度 当宽度与设置列数自动显示的宽度冲突时,会取值大一点的(可能列数会减少,而宽度大于column-width设置的宽度)
(3)column-gap 设置列之间的间隙
(4)column-rule 规定列之间的宽度 样式 颜色
(5)column-span 设置元素应横跨多少列(取值只有1 和 all)
3.伸缩布局
本质是让子元素浮动,特点:浏览器变小会影响布局
1.重要属性
(1)display:flex 父容器设置该属性后,该合资所有直接子元素都会变成伸缩项
(2)justify-content: 设置子盒子的对齐方式
①取值有 flex-start 让子元素从父容器左边依次排列
②flex-end 让子元素从父容器右边依次排列
③center 让子元素在父容器中间排列
④space-between 让子元素之间的间距相等(两边子元素贴紧父盒子)
⑤space-around 让子元素之间的间距相等(两边子元素与父盒子也有距离)
(3)flex-flow 是flex-wrap和flex-direction的集合.组合方式 flex-flow: 是否换行 设置排列方向 两个value值可以调换
①flex-wrap 控制子元素是否换行显示
1)值为nowrap 不换行
2)wrap 换行显示
3)wrap-reverse 翻转布局
②flex-direction 设置子元素的排列方向 默认为x轴排列
1)值有row 水平排列
2)row-reverse 水平排列 翻转方向
3)column
4)column-reverse
(4)flex属性 是flex-grow flex-shrink flex-basis的简写.默认值为0 1 auto 后面两个属性值可选.使用最多的是flex:number 等价于设置flex-grow,用于设置两个盒子宽度的比例
①flex-grow:value 设置父元素多余空间的分配比例(该样式需要写在子元素的css里) 默认为0
②flex-shrink:value 设置父元素空间不够时,子元素的收缩比例(该样式需要写在子元素的css里) 默认为1
③flex-basis
(5)align-items 设置子元素在侧轴(垂直方向上的对齐方式)
①属性有 flex-end
②flex-start
③center
④stretch (默认值)让子元素在侧轴方向上进行拉伸,填满侧轴 (设置高度后会失效)
⑤baseline 设置文本基线对齐
(6)alig-self 设置的单个子元素在垂直方向上的对齐方式(需要设置到子元素css)
(7)注意
①当子元素宽度大于父容器宽度时,子元素会变小
