怪异盒模型=CSS3盒模型:
怪异盒模型也叫弹性盒模型 / 伸缩布局盒模型;
css盒模型width不变=width-左右margin-左右padding 【padding值往外加】;
怪异盒模型width=width(包含border+padding)【padding值往里挤】;
盒模型转换:
box-sizing=border-box;转换为怪异盒模型;
!注意 !
- 左右间距若margin和padding都能实现,最好padding,上下间距用margin和padding都可;
- 谁超出给定的宽度,则box-sizing=border-box就加给谁;
flex容器的属性:
1、display:flex / inline-flex
当设为flex布局后,float、clear、vertical-align属性失效;只能给父级添加,无继承性
2、flex-direction 主轴方向
模型的长度称为主轴;模型的高度称为侧轴;
flex-direction:row从左向右,默认值 / row-reverse与row相反 / column从上到下 /
column-reverse 与column相反;
3、flex-wrap 是否换行属性
flex-wrap:nowrap; 不换行,默认值 不管超没超出都不会换行;
flex-wrap:wrap; 换行,一旦伸缩项目超出伸缩容器,就会换行;
注:只有伸缩项目大于伸缩容器时,才会换行,否则无效;
flex-wrap:wrap-reverse; 换行反向,主轴水平时,上下反向;主轴垂直时,左右反向;
4、flex-flow 简写
是flex-direction属性和flex-wrap属性的简写,默认值为row nowrap;
5、justify-content 主轴的对齐方式
justify-content:flex-start;伸缩项目向一行的起始位置靠齐;
justify-conten:flex-end;伸缩项目向一行的结束位置靠齐;
justify-content:center; 伸缩项目向一行的中间位置靠齐;
justify-conten:space-between; 伸缩项目会平均的分布在行内;
justify-conten:space-around;伸缩项目会平均的分布在行内,并在两端保留一半的空间;
6、align-items 交叉轴上的对齐方式
flex项目属性:
1、align-self属性
auto 默认值,元素继承他父容器的align-items属性。如果没有父容器则为“stretch”;
stretch 元素被拉伸以适应容器;
center 元素位于容器中心;
flex-start 元素位于容器开头;
flex-end 元素位于容器的结尾;
2、order
排序优先级,数字越大越往后排,默认为0,支持负数;
3、flex
设置或检索弹性盒模型对象的子元素如何分配空间;
flex:1
前缀的添加位置:给新增的属性or新增的属性值加;