盒模型&弹性盒
作者：互联网
盒模型(content+padding+border+margin)
属性：box-sizing
1.标准盒模型
属性：content-box
使用padding的时候 padding会把容器的大小撑开 需要要减去相应的padding值
设置border边框 边框是长在盒子的外面的
计算方式
自身大小：content+border+padding
实际大小：content+border+padding+margin
2.怪异盒模型(当文件丢失了文档声明的时候 在IE浏览器中会触发怪异盒模型的计算方式也叫IE盒模型)
属性：bordre-box
使用padding的时候 不会把容器撑大 不用减去相应的padding值
设置border的时候 边框是长在盒子的内部的
计算方式
自身大小：设置的宽高值 content (包含了padding和border值)
实际大小：设置的宽高值 content (包含了padding和border值)+margin
总结
关于怪异盒模型和标准盒模型的区别
怪异盒模型为何又叫IE盒模型的原因是在低版本的IE浏览器中，当HTML文本丢失文档声明时会自动触发怪异盒模型的计算方式
怪异盒模型常用在移动端布局中，不建议用在PC端
弹性盒布局的基础概念
弹性盒的作用：控制子级元素在父级元素的排列位置
特点：主要轴向布局(X轴和Y轴 - 主轴和侧轴)
属性：display 显示方式
属性值：flex 形成弹性盒，给父级元素添加
形成弹性盒后默认主轴方向是X轴 所有的子级元素会沿着主轴方向排列
主轴和侧轴是相对的送给 如果X轴是主轴 Y轴就是侧轴/如果Y轴是主轴 那么X轴就是侧轴
在弹性盒环境下所有的子级元素都是可以直接设置宽高大小的(不用考虑元素类型)
居中方式
表格居中：align/valign
文本居中：text-align/line-height
图片居中：基线对齐
背景居中：background-position
定位居中：left/top 强制性
弹性盒居中：给子级元素设置margin：auto
注：
控制元素位置的属性：margin/padding、定位、浮动、位移
以上属性在弹性盒中，浮动不可用
弹性盒中的属性非常多 可以分为两大类
添加在父级元素上的属性：控制的是所有子级元素
添加在子级元素上的属性：控制的是单个子级元素
添加在父级元素上的属性
改变主轴的默认方向
属性：flex-direction
属性值：
row 默认值 默认是X轴为主轴
column 默认为Y轴为主轴
主轴的对齐方式
属性：justify-content
属性值：
flex-start 在主轴的开始位置 从左到右
flex-end 在主轴的开始位置 紧靠主轴的后面
center 居中
space-between 两端对齐 其余空间自动分配
space-around 元素的左右间距相等
space-evenly 所有空间全部相等
侧轴的对齐方式
属性：align-items
属性值：
flex-start 在侧轴的开始位置 从左到右
flex-end 在侧轴的开始位置 紧靠侧轴的后面
center 居中
baseline 基线对齐
默认和flex-start效果一样
其他情况
弹性盒环境下 子级元素宽度大于父级元素宽度的时候 子级不会往下掉
换行属性：flex-wrap
no-wrap 不换行
wrap 换行
行与行之间的间距
属性：align-content
属性值：
flex-start 在主轴的开始位置 从左到右排列
flex-end 在主轴的开始位置 紧靠主轴的后面
center 居中
space-between 两端对齐 其余空间自动分配
space-around 元素的左右间距相等
space-evenly 所有空间全部相等
添加在子级元素上的属性：
控制侧轴的对齐方式align-items
align-items 添加在父级 控制所有的子级元素在侧轴上的对齐方式
align-self 添加在子级 控制单个元素在侧轴上的对齐方式
auto 默认值 stretch 拉伸心适应容器 center 居中 flex-start 从左到右 flex-end从右到左
优先级：
属性:order
排序优先级，数字越大越往后排，默认为0，支持负数。
当fiex作为属性出现的时候
属性flex
属性值： 设置为数字 常用的是1
检索弹性盒模型对象的子元素如何分配空间
当只有一个子元素设置了flex：1 表示占据主轴上的剩下空间 并且当内容较多的情况下会将当前空间的高度撑开
标签：flex,主轴,模型,元素,弹性,padding,子级,属性 来源： https://blog.csdn.net/qq_63608418/article/details/121931087