深入了解HTML盒子模型，从基础到实战，一文吃透网页布局核心
前言
在网页布局的世界里，盒子模型（Box Model） 是所有开发者必须掌握的核心基础！无论是简单的 div 布局、卡片设计，还是复杂的响应式页面，本质上都是对盒子模型的灵活运用。
很多新手在写 CSS 时，经常遇到元素溢出、间距异常、宽度变形等问题，90% 都是因为没真正理解盒子模型的原理。今天这篇文章，带你从零到一吃透 HTML 盒子模型，告别布局踩坑！
一、什么是盒子模型
在 HTML 中，所有的元素都可以看作一个矩形的盒子。浏览器会把每个元素渲染成一个独立的矩形区域，这个区域由内到外包含 4 个核心部分，共同组成了盒子模型：
- 内容（content）：盒子的核心，存放文字、图片等实际内容
- 内边距（padding）：内容与边框之间的空白区域
- 边框（border）：包裹内边距和内容的边界线
- 外边距（margin）：盒子与其他元素之间的空白距离
二、四大属性的核心属性值
1、内容区域
主要属性值是width和height，常用单位：px，%
2、内边距
内容与边框之间的间距，会撑大盒子，无负值。
四个方向内边距属性值为：padding-top，padding-bottom，padding-left，padding-right
复合属性：
| 取值个数 | 实例 | 含义 |
| 一个值 | padding:10px | 四个方向内边距均为10px |
| 两个值 | padding:10px 20px | 上下10，左右20 |
| 三个值 | padding:10px 20px 40px | 上10，左右20，下40 |
| 四个值 | padding:10px 20px 40px 80px | 上10，右20，下40，左80 |
3、边框线
包裹 padding 和 content 的边框，必须设置宽度、样式、颜色才会生效。（不区分顺序）
线条样式：
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
四个方向边框线： border-top，border-bottom，border-left，border-right
4、外边距
盒子与其他元素之间的距离，不影响盒子自身大小，可设负值。
写法和 padding 完全一致，区别：
- padding：盒子内部空白，撑大盒子
- margin：盒子外部空白，不改变盒子尺寸
三、盒子模型常见坑点
1、尺寸计算
盒子尺寸=内容尺寸+border尺寸+内边距尺寸
border和padding撑大了盒子，外边距不会撑大盒子
解决：加一个属性（内减模式）box-sizing:border-box
2、版心居中
margin: 0 auto （前提是要有宽度）
3、清除标签默认样式
（1）清楚所有标签内外边距
*{
margin: 0;
padding: 0;
box-sizing:border-box;
} （2）去除li标签前面的样式
li{
list-style: none;
}4、元素溢出
控制溢出元素内容的显示方式
属性名：overflow
属性值：
| 属性值 | 效果 |
| hidden | 溢出隐藏 |
| scroll | 溢出滚动（无论是否溢出，都显示滚动条） |
| auto | 溢出滚动（溢出才显示滚动条的位置） |
5、外边距问题--合并问题
垂直排列的兄弟元素，上下margin合并，取两个margin值的最大值生效
6、外边距问题--塌陷问题
父子级的标签，子级的添加上外边距会产生塌陷问题，导致父级一起向下移动
解决：（1）取消子级margin，设置父级padding
（2）父级设置overflow:hidden
（3）父级设置border-top
7、行内元素-内外边距问题
行内元素添加margin和padding，无法改变元素垂直位置
解决：给行内元素添加line-height可以改变垂直问题
8、圆角
属性名： border-radius
| 取值个数 | 实例 | 含义 |
| 一个值 | border-radius:10px | 四个方向圆角均为10px |
| 两个值 | border-radius:10px 20px | 左上+右下10，右上+左下20 |
| 三个值 | border-radius:10px 20px 40px | 左上10，右上+左下20，右下40 |
| 四个值 | border-radius:10px 20px 40px 80px | 左上10，右上20，右下40，左下80 |
9、阴影
属性名： box-shadow
属性值：x轴偏移量，Y轴偏移量，模糊半径，扩散半径，颜色，内外阴影
（ x轴偏移量，Y轴偏移量必须有）
四、项目实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
border: 0;
box-sizing: border-box;
}
.body{
background-color: rgb(215, 215, 219);
height: 500px;
padding: 75px;
}
.sum{
background-color: rgb(255, 255, 255);
height: 350px;
width: 350px;
margin: auto;
padding: 40px;
text-align: center;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="body">
<div class="sum">
<img src="./img05.png" style="height: 150px;">
<p style="font-size: 23px;margin-bottom: 10px;">抖音直播SDK</p>
<p>包含抖音直播看播功能</p>
</div>
</div>
</body>
</html>
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)