第三次作业

1.盒子的组成：

CSS盒子模型是CSS的一个基本概念，它规定了元素的宽度和高度在页面中如何显示。每个元素都可以看作一个盒子，它包括：外边距（Margin）、边框（Border）、内边距（Padding）和实际内容（Content）。

CSS盒子模型的属性包括：

• Content(内容) - 盒子的内容，显示文本和图像。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Margin(外边距) - 清除边框外的区域，外边距是透明的。

2.盒子的大小：

默认情况下：

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

width和height属性设置的就是盒子的宽度和高度情况下，盒子的宽度和高度的计算方式由box-sizing属性控制：

box-sizing：属性值。

content-box：默认值，width和height属性分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距、边框、外边距。

border-box：为元素设定的width和height属性决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去 边框 和 内边距 才能得到内容的宽度和高度。

inherit：规定应从父元素继承box-sizing属性的值。

3.盒子成分：

• margin(外边距)

margin：简写属性。在一个声明中设置所有外边距属性。

margin-buttom：设置元素的下边距。
margin-left：设置元素的左边距。
margin-right：设置元素的右边距。

margin-top：设置元素的上边距。

• padding（内边距）

padding：使用简写属性设置在一个声明中的所有填充属性。

padding：设置元素的底部填充。

padding-left：设置元素左部填充。

padding-right：设置元素右部填充。

padding-top：设置元素顶部填充。

• border（边框）

none：默认无边框。

dotted：定义一个点线边框。

dashed：定义一个虚线边框。

solid：定义实线边框。

double：定义两个边框。两个边框的宽度和border-width的值相同。

groove：定义3D沟槽边框。效果取决于边框的颜色值。

ridge：定义3D脊边框。效果取决于边框的颜色值。

inset：定义一个3D嵌入边框。效果取决于边框的颜色值。

outset：定义一个3D突出边框。效果取决于边框的颜色值。

4.盒子转换：

当box-sizing：content-box时，这种盒子模型成为标准盒子模型，当box-sizing: border-box时，这种盒子模型称为怪异盒子模型（IE模型）[怪异盒子模型中的内容元素并不会把容器撑大，他会自动调节元素的大小以保持盒子的整体性]。

5.弹性盒子：

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，引入弹性盒布局模型的目的是提供一种更有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

• flex-direction（定义了弹性子元素在父容器中的位置）：

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

• justify-content（把弹性项沿着弹性容器主轴线对齐，应用在弹性容器上）：

flex-start：主轴的开始位置，如果是x则为最左边，如果为y则为最上边。

flex-end：主轴的结束位置，如果是x则为最右边，如果为y则为最下边。

center：在主轴上居中。

space-around：平均分布在主轴上，并且两端留白。

space-between：平均分布在主轴上，并且两端不留白。

• align-items（定义了弹性盒子在侧轴/纵轴方向上的对齐方式）：

flex-start/flex-end/center：和主轴道理一样。

baseline：按照基线对齐，如果有文本，则按照文本的地步对齐，如果没有文本，则按照盒子的底部对齐。

stretch：元素拉伸至自适应整个容器，默认的---测试时需要去除子项的固定宽高。

• flex-wrap（定义了弹性盒子和子元素换行方式）：

nowrap： 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap：弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
wrap-reverse：反转 wrap 排列。