逆战班提升——关于盒模型
一、什么是盒模型？
我们可以将页面中所有的元素都视为盒子，这些盒子中可以盛放我们想要盛放的内容，每个盒子在页面中都占有一定的空间，这些盒子的参数和属性我们可以根据需求来调整，例如它的位置、大小等。
二、盒模型的组成？
盒模型从内到外由content内容区、padding填充区（补白）、border边框、margin外边距组成。
二、盒模型的分类？
盒模型可以分为标准盒模型与怪异盒模型。标准盒模型与怪异盒模型的区别在于：标准盒模型的宽高为盒模型的内容区content，填充区padding、边框border、外边距margin都是不计算在宽高以内的；怪异盒模型的宽高包含了内容区content、填充区padding、边框border，只有外边距margin独立于宽高之外。
三、标准盒模型与怪异盒模型之间是否可以相互转换？
标准盒模型与怪异盒模型可以通过属性box-sizing相互转换，它的属性值有border-box（怪异盒模型）与content-box（标准盒模型）。
四、与盒模型的组成相关的属性常用的有哪些？
1.内容区content：
width:宽度值;
height:高度值;
2.填充区padding：
（1）padding:直接使用padding为复合用法，其属性值为数值型。如果给其设置一个属性值，则该值表示上下左右四个内边距统一的数值；如果给其设置两个属性值，则这两个值依次表示上下内边距与左右内边距；如果给其设置三个属性值，则这三个值依次表示上边距、左右边距与下边距；如果给其设置四个属性值，则这四个值依次表示上边距、右边距、下边距与左边距，即顺时针方向。
（2）padding-top、padding-right、padding-bottom、padding-left：这四个属性用来单独设置四个方向的内边距。
3.边框区border：
（1）border:该属性为复合用法，表示设置该元素四个方向统一的边框，其属性值有三个，分别为颜色、边框的粗细、边框的线型，例如：border:#000 solid 1px;这三个属性值以何种顺序排列均可，其中常用的线型有solid实线型、dashed虚线型、dotted圆点线型、double双线型。也可以通过使用border:none;取消边框，或使用border:hidden;隐藏边框。
（2）border-top、border-right、border-bottom、border-left：这四个属性用于单独设置某一方向的边框，用法同border。
（3）border-color：用于设置边框的颜色，可以设置一到四个属性值，其代表的方向同padding。
（4）border-width：用于设置边框的粗细，可以设置一到四个属性值，其代表的方向同padding。
（5）border-style：用于设置边框的线型，可以设置一到四个属性值，其代表的方向同padding。
（6）也可以单独设置某一方向的边框的某一属性，例如：border-left-color:#000;
4.外边距margin：其用法同padding。
来源：CSDN
作者：✿❀
链接：https://blog.csdn.net/Celia_Wang/article/details/104460326