盒子模型（1）组成部分： CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距，实际内容

组成部分：

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距，实际内容

屏幕截图 2025-11-01 214934.png

1.边框

border可设置元素的边框，边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色

语法：

border: border-width /border-style /border-color

边框的属性：

属性	作用
`border-width`	定义边框粗细,单位是PX
`border-style`	边框的样式
`border-color`	边框颜色

边框样式 `border-style` 可设置如下值：

none ：没有边框即忽略所有边框的宽度（默认值）
solid ：边框为单实线（最常用）
dashed ：边框为虚线
dotted ：边框为点线

边框可分开写：

border-top: 1px solid red; /* 只设上边框，其余同理 */

案例：

<style>
#d1 {
    width: 500px;
    height: 200px;
    /*border-width: 2px;
    border-style: solid;
    border-color: red;
    border: 2px solid red;*/
    border-top: 3px solid red;
    border-bottom: 3px solid darkmagenta;
    border-left: 3px solid gold;
    border-right: 3px solid darkblue;
}
</style>

边框会影响盒子实际大小

边框会额外增加盒子的实际大小，因此我们有两种方案解决：

测量盒子大小时，不量边框
如果测量时包含了边框，则需要 width / height 减去边框宽度

屏幕截图 2025-11-01 220150.png

表格的细线边框：

border-collapse 属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。

语法：

border-collapse: collapse;

collapse 单词是合并的意思
border-collapse: collapse; ：表示相邻边框合并在一起

内边距（`padding`）

padding 属性用于设置内边距，即边框与内容之间的距离。

内边距的属性：

属性	作用
`padding-left`	左内边距
`padding-right`	右内边距
`padding-top`	上内边距
`padding-bottom`	下内边距

案例：

<style>
div{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    padding-left: 30px;
    padding-top: 30px;
}
</style>
</head>
<body>
    <div>内边距</div>
</body>

屏幕截图 2025-11-01 225223.png padding属性可以有1到4个值

padding值的个数

值的简写（顺序）	表达意思
`padding: 5px;（上右下左）`	1个值，代表上下左右都有5像素内边距；
`padding: 5px 10px;（上右下左）`	2个值，代表上下是5像素，左右内边距是10像素；
`padding: 5px 10px 20px;（上右下左）`	3个值，代表上内边距5，左右为10，下为20
`padding: 5px 10px 20px 30px;（上右下左）`	4个值，上是5，右10，下20，左30（顺时针）

内边距会影响盒子的大小：

当我们给盒子指定 padding 值之后，发生了2件事：

内容和边框有了距离，添加了内边距
padding 影响了盒子实际大小

也就是说，如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子

解决方案：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可案例：

屏幕截图 2025-11-01 221450.png

！！注意：如果盒子本身没有指定 width / height 属性，则此时 padding 不会撑开盒子大小

盒子模型（1）