CSS-盒模型

重要！前言必读！

本章节主要学习的是css的盒模型，css盒模型是通过使用属性box-sizing来实现的，其主要作用是定义元素的盒模型，算是比较重要的内容，有2个值：分别是border-box和content-box。

盒模型：box-sizing

注意！box-sizing主要用于定义盒模型，即在计算元素的宽度和高度时，应该包含哪些部分，这个属性的作用在于影响了盒模型的计算方式。

• box-sizing：content-box（默认，素的宽度和高度仅包括内容区域，不包括内边距、边框和外边距）
• box-sizing：border-box（元素的宽度和高度包括内容、内边距和边框的总和）

---

box-sizing实现：并排浮动内容框

代码图

效果图

---

---

box-sizing实现：并排图像

代码图

效果图

---

box-sizing实现：等宽的框

注意！box-sizing实现：等宽的框是通过设置一个固定的高度，然后宽度指定百分比值（%）来让它平均分配宽度，从而实现相等的宽度，使框的宽度相等，具体效果请缩放浏览器窗口窗口，宽度始终保持相同。

代码图

效果图