box
标准盒子:box-width=border2+padding2+width
IE6混杂模式盒模型:box-width=width 所以content-width=width-border2-padding2
box-sizing:border-box怪异模型/content-box标准盒模型(默认)
怪异模型的适用场景:宽度不固定,padding固定还有输入框之类
resize调节元素大小,必须要有overflow属性存在
display:flex/inline-flex 弹性盒子 下面属性以display:flex为基础
设置到父元素上的属性:
flex-direction:row(默认)/column/row-reverse/column-reverse 设置主轴方向
flex-wrap:nowrap(默认不换行)/wrap(换行)/wrap-reverse
justify-content:flex-start(默认)/flex-end/center/space-between(两边占住,中间均分)/space-around(元素之间空隙相等,两端保留空隙的一半,类似加左右两边的margin)基于主轴做对齐方式
align-items:strech(默认,子元素如果没设置高度就平铺容器高度,设置了就无效)/flex-start/flex-end/center/baseline(基于文字底线对齐) 基于交叉轴进行位置分配,主要针对单行元素来处理对齐方式
align-content 必须作用到多行上,属性值与justify-content一样
设置到子元素上的属性:
order 排列元素 数值越小排在越前面,默认值为0
align-self 属性值与align-items一样,父级设置align-items,align-self优先级高 但是父级如果设置了align-content,align-self失效 基于交叉轴的分配状况
flex:flex-grow flex-shrink flex-basis
*伸缩盒核心功能
伸:
flex-grow:0(默认值) 当主轴方向还有剩余空间时,会根据各自设置的比例瓜分剩余的空间形成新的宽度
缩:
flex-shrink:1(默认值) 自身宽度(只算内容区宽度)×shrink值/总权值(每个需要缩放元素的宽度×各自缩放量后的值相加) ×多余空间
flex-basis:auto(默认,和width相同) 同时设置flex-basis和width,width失效
flex-basis和width的联系:
没填width的时候设置flex-basis,就是元素的真实宽度的最小值,文字多可以将内容区撑开;
如果只填了width,文字多的话会超出width;
如果两个都填了并且width>flex-basis,width相当于宽度最大值,flex-basis相当于宽度最小值,
当flex-basis大于width,宽度变成flex-basis
注意:如果英文不换行,撑开容器的宽度不参与压缩,如果需要压缩就加属性word-break:break-work