CSS3 of box

待我称王封你为后i 2022-10-31 04:18 1阅读 0赞

**box**  
标准盒子：box-width=border*2+padding*2+width  
IE6混杂模式盒模型：box-width=width 所以content-width=width-border*2-padding*2

**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