怪异盒模型&弹性盒
怪异盒模型
怪异盒模型也被称作偏差框模型，在移动端开发中具有重要的应用价值。
它能够实现将偏移量和边距限制在元素宽度和高度范围内，
从而避免元素因偏移操作而被过度放大。
我们对一个宽度设定为400像素、高度设定为300像素的盒子进行了配置，并在其外围加入了10像素的边框以及50像素的内衬（inset）。在标准盒模型中，默认情况下padding会增大盒子的尺寸，并将border置于盒子的外围区域；然而，在启用**box-sizing:border-box;**后，默认情况下元素的整体宽度与高度将保持不变：
在移动端布局场景中,怪异盒模型常被采用。例如采用固定两列的形式,在屏幕中间的位置设置一个主要的内容区域.通过调整父容器的padding属性值来控制子项的位置,在确保不影响父容器尺寸变化的前提下实现将子项推挤至内容区域的目的.
弹性盒
弹性布局：常用于实现元素间距离管理的一种方案。
功能：负责控制其直接邻居的布局安排。
特点：
a. 该布局允许直接邻居根据需求调整自身尺寸。
b. 通过设置子元素的 margin: auto ，可以实现其在父容器中的居中显示。
c. 所有子元素沿主轴方向排列以确保布局的一致性。
"主轴"可能指代X轴或Y轴的方向，默认情况下，默认情况下X轴为主轴（即主轴方向为水平方向）。
一：触发弹性盒子：
display:flex;
二：调整布局的方向：
flex-direction:
属性值列表：
row方向（默认情况下基于X轴）
column方向（基于Y轴）
reversed column方向（基于Y轴并反向）
reversed row方向（基于X 轴并反向）
三：调整主轴的排列方式：
justify-content:
属性值为：
flex-start 属性默认设置使弹性盒从左侧边缘开始显示
flex-end 属性确保弹性盒从右侧边缘结束
center 属性实现居中排版效果
两端间距相等（space-between）与自动分配间距（space-around）设置两端间距相等
.box {
width: 500px;
height: 500px;
background-color: #ccc;
margin: 100px auto;
display: flex;
justify-content: space-between;
/* justify-content: space-around; */
/* flex-wrap: wrap; */
}
.box span {
width: 80px;
height: 80px;
border: 2px solid black;
border-radius: 100%;
background-color: pink;
text-align: center;
font-size: 40px;
line-height: 80px;
}
<!-- html部分 -->
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
AI写代码简单演示举几个例子：
默认X轴为主轴
主轴两端对齐：justify-content: space-between;
主轴居中：justify-content:center;
注：将主轴方向设置为Y轴需使用-> flex-direction:column;
四 轴对齐方式说明:
align-items:
flex-start属性指定侧轴起始位置
flex-end属性定义了侧轴结束的位置
center属性将使元素水平居中
baseline属性与 flex-start属性功能相同
stretch属性默认生效且允许元素拉伸空间
控制弹性盒子内部子元素的换行处理：
六：控制行与行的对齐方式：
注：以上7个属性全部添加在父元素弹性盒子上面！！！
添加在子元素上面的属性：
在侧轴方向上实现弹性盒子内的灵活元素对齐控制。
在侧轴方向上实现弹性盒子内的灵活元素对齐控制。
align-self属性：
其默认值为 auto。
该属性允许子元素继承自父容器的 align-items 属性设置。
若父容器不存在，则该属性设为 "stretch"。
无父容器时会设为 "stretch"。
当设置为 Stretch 时会根据需求进行拉伸以适应其所在容器。
当设置为 Center 时将居于所在区域中心位置。
当设置为 flex-start 时将位于所在区域起始端点位置。
当设置为 flex-end 时将位于所在区域结束端点位置。
在例一中，单独让第四个元素在侧轴末尾显示：
二：控制子元素的排列顺序：
order: 数值越大越往后排列。支持负数。
三：剩余空间的分配：
flex:1; 分配主轴剩余空间。