【前端网页】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. 父子元素-外边距塌陷
外边距塌陷：特指父子元素，因父元素无边框，父元素的外边距会塌陷到子元素中。导致子元素设
置外边
距，父元素会被级联作用。这样的现象叫做外边距塌陷。（四个外边距都会出现塌陷现象）
准备代码：
解决方案：
浙公网安备 33010602011771号