【前端网页】CSS样式表进阶之盒子模型
👀专栏介绍
【前端网页】 目前主要更新HTML，一起学习一起进步。
👀本期介绍
本期主要介绍CSS样式表进阶之盒子模型
文章目录
1. 什么是盒子模型
所有的 HTML 元素，我们都可以看成一个四边形，即一个盒子。
用 CSS 来设置元素盒子的 内边距、边框 和 外边距 的样式的方式，
相当于设置盒子的样式，所以我们将其称之为 盒子模型
2. 边框：border
边框：HTML 元素盒子的框体
边框有四个属性可以设置：
border-top: 上边框
border -right: 右边框
border -bottom: 下边框
border -left: 左边框
格式： 粗细（ px ） 样式 (solid double dashed dotted) 颜色
solid: 实体线
double: 双实体线
dashed: 虚线
dotted: 点虚线
示例：
通用性设置：
一次性设置上下左右边框样式 为 1 像素的 实体 红色线
border:1px solid red;
3. 内边距：padding
内边距：HTML 元素里的内容体 到 HTML 元素边框 的距离
内边距有四个属性可以设置：
padding-top: 上边距
padding-right: 右边距
padding-bottom: 下边距
padding-left: 左边距
4. 外边距：margin
外边距：HTML 元素边框 到 其他 HTML 元素边框的距离
外边距有四个属性可以设置：
margin-top: 上边距
margin -right: 右边距
margin -bottom: 下边距
margin -left: 左边距
5. 内外边距简化设置方式
以 padding 为例
总结：简化方式永远的顺序是 上右下左 的设置。
左被忽略，就看右的设置
下被忽略，就看上的设置 。
只有一个，设置所有。
6. 单元素-水平居中
通过设置左右 外边距自动计算，我们可以控制元素居中。
格式：
margin : 0 px auto ;
其中，上下外边距为 0 （可自己更改），左右外边距根据 元素宽度和浏览器大小随时自动计算。
示例：
7. 相邻元素-外边距合并
外边距合并：两个相邻元素的接壤外边距仅最大的生效，较小的被合并。（被合并的外边距代码已
经无用，
所以一般我们会从代码上删除）（一般仅上下外边距有合并现象）
示例代码：
注意：
外边距合同通常发生在 margin-bottom 和 margin-top 之间。
左右外边距 一般不会合并
8. 父子元素-外边距塌陷
外边距塌陷：特指父子元素，因父元素无边框，父元素的外边距会塌陷到子元素中。导致子元素设
置外边
距，父元素会被级联作用。这样的现象叫做外边距塌陷。（四个外边距都会出现塌陷现象）
准备代码：
解决方案：
腾讯云开发者
