一:怪异盒模型
1:box-sizing: content-box;正常盒子模型
2:box-sizing: border-box;怪异盒模型
两者区别:正常盒子宽高设置好了,之后加padding、border、margin等,盒子的宽高会变大;怪异盒模型则是,设置好盒子宽高,加padding、border、margin等,盒子宽高不变,会往内挤压空间。
案例:回想之前多个盒子浮动案例,最后一个盒子需要单独设置padding或者margin,可以设置每个盒子都为怪异盒,设置padding或者margin等,盒子的总宽高一直不会改变。
二:弹性盒(弹性盒是一种布局方式,适合用于移动端布局)
display: flex;/* 弹性盒 */
1:弹性盒会让盒子内的子元素默认横向排列;
2:父盒子设置为弹性盒后,子元素为行内元素的话会自动变为块级元素;
3:父盒子设置为弹性盒后,子盒子设置:margin: auto;子盒子会自动在父盒子中间水平垂直居中;
****仅限只有一个子元素的情况
4:修改主轴方向
a:默认主轴为水平方向,垂直于主轴的轴为侧轴,默认侧轴为垂直方向排列。
b:修改主轴为竖直方向:flex-direction: column;
/* 取值row,row-reverse,column,column-reverse */
横向 横向的反向 竖向 竖向的反向
从左到右→从右向左 从上到下→从下到上
5:修改主轴、侧轴对齐方式
a:主轴 justify-content: center;
取值:flex-start,flex-end,center,space-between,space-around;
靠右 靠左 中间 两端对齐 距离环绕
距离环绕:所有元素都添加了相同的左右margin,子盒子自身的左右两边等距。(等比对齐?)
b:侧轴 align-items:flex-start;
取值:flex-start,flex-end,center;
靠上 靠下 中间
6:子元素折行
默认子元素不会换行,所有内容会在一行排列上,所以需要自己设置折行;
flex-wrap: wrap;/* 折行 */
在父盒子上设置折行即可,其中的子盒子一行装不下会自动折行;
7:行间距
修改折行后默认的子盒子行间距;
align-content:flex-start;
取值:flex-start,flex-end,center,space-around,space-between;
8:项目---对齐方式(大盒子叫容器,大盒子中的小盒子为项目)
align-self:flex-end;单个项目添加这个属性可以设置这个项目单独的对齐方式。
baseline,flex-start,flex-end,center,stretch(拉伸,占满整个高度/宽度空间);
主轴是横轴,需要设置宽度;主轴是纵轴,则需要设置高度。
9:项目---调整顺序(应用较少)
order:0;(默认值为0)
order值小的在前,权重最小的在前。
10:项目---剩余宽高(重要!!可用来设置三栏布局等)
flex:1;(指定项目的属性)
左边盒子和右边盒子宽度固定,中间盒子占满剩余空间,给中间盒子设置flex属性。
如果多个项目都设置了flex属性:按照设置的属性比例生效,比如设置为10,其他两个盒子设置为1,则10的盒子占10/12的空间,其他的占1/12的空间。