CSS盒子模型

Serena_17

359人浏览 · 2026-05-17 15:01:40

Serena_17 · 2026-05-17 15:01:40 发布

概念：

在CSS视角下，所有HTML元素均可以看作盒子，所谓的盒子在HTML中就是一个承装元素内容的容器。由内容区域（Content），内边距（Padding），边框（Border），外边距（Margin）组成。

盒子的尺寸：

总宽度和总高度（内容+内边距+边框宽度+外边距）：决定了盒子的尺寸。

总宽度 = width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right
总高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top + margin-bottom

盒子属性：

内容区：

width 配置盒子内容区域的宽

height 配置盒子内容区域的高

内容区是盒子模型中实际显示内容的部分。

边框：

border: red 10px solid; →solid表示为实线边框样式

配置盒子边框的颜色（border-color) 厚度（border-width) 样式（border-style)

border-top: 颜色上边框宽度样式；

border-right: 颜色右边框宽度样式；

border-bottom: 颜色下边框宽度样式；

border-left: 颜色左边框宽度样式；

CSS3新增属性：圆角边框（border-radius）

用于设置边框的圆角，可以接受长度值（如 px、em、%）或关键字（如 inherit）。值越大，圆角越明显。（如果设置为50%，就会变成圆形）

.box {
  border-radius: 10px; /* 四个角均为 10px */
  border-radius: 10px 20px; /* 左上和右下 10px，右上和左下 20px */
  border-radius: 10px 20px 30px; /* 左上 10px，右上和左下 20px，右下 30px */
  border-radius: 10px 20px 30px 40px; /* 左上、右上、右下、左下分别设置 */
}

其他边框样式

dotted: 点线边框
dashed: 虚线边框
double: 双线边框
groove: 3D凹槽边框
ridge: 3D凸起边框
inset: 3D内嵌边框
outset: 3D外凸边框
none: 无边框
hidden: 隐藏边框

内边距：

padding 配置盒子的内边距

内边距是内容区与边框之间的透明区域，用于控制内容与边框之间的距离。可以通过padding属性设置，也可以分别设置四个方向的内边距（padding-top、padding-right、padding-bottom、padding-left）。

.box {
  padding: 10px; /* 上下左右均为10px */
  padding: 10px 20px; /* 上下10px，左右20px */
  padding: 10px 20px 30px 40px; /* 上、右、下、左 */
}

外边距：

margin 配置盒子的外边距

外边距是盒子与其他盒子之间的透明区域，用于控制盒子与其他元素的距离。可以通过margin属性设置，也可以分别设置四个方向的外边距（margin-top、margin-right、margin-bottom、margin-left）。

.box {
  margin: 10px; /* 上下左右均为10px */
  margin: 10px auto; /* 上下10px，左右自动（水平居中） */
  margin: 10px 20px 30px 40px; /* 上、右、下、左 */
}

注意：

1.外边距始终是透明的（不受背景填充颜色影响）

2.在CSS标准文档流中，

当两个垂直相邻的块级元素相遇时，它们的垂直外边距不会相加，而是会合并。合并后的外边距大小取两者中的较大值。

而水平相邻的行内元素相遇时，其外边距会相加。

background-color:配置盒子的填充色

opacity:配置盒子的不透明度，控制元素及其内容的透明度，取值范围为0（完全透明）到1（完全不透明）。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型基础</title>
<style>
    .container1{
        width: 200px;  /*配置盒子内容区域的宽*/
        height: 100px;  /*配置盒子内容区域的高*/
        padding: 20px;   /*配置盒子的内边距*/
        border: red 10px solid;   /*配置盒子边框的颜色 厚度 线型*/
    }
    .container2{
        width: 200px;
        height: 100px;
        padding: 20px;
        border: blue 10px solid;
        margin: 20px;   /*配置盒子的外边距*/
    }
    .container3{
        width: 200px;
        height: 100px;
        padding: 20px;
        border: blue 10px solid;
        margin: 20px;   
        background-color: aquamarine;   /*配置盒子的填充色*/
        border-radius: 20px;     /*配置盒子的圆角边框*/
        opacity: 0.1;           /*配置盒子的不透明度*/
    }
</style>
</head>
<body>
    <div class="container1">
        我是第一个盒子的内容
    </div>
    <div class="container2">
        我是第二个盒子的内容
    </div>
    <div class="container3">
        我是第三个盒子的内容
    </div>
</body>
</html>

效果展示：

文档流：

概念：HTML网页默认的元素摆放机制。（类似我们书写方式，从左到右从上到下，写不下就换行。文档流也可以理解为一个“排队流”。

块元素的文档流：自上而下流水线摆放。

行内元素的文档流：从左到右流水线摆放。

缺陷：元素摆放布局非常不灵活，出现元素间高低不平（比如<img>底边对齐但顶边却对不齐），文本空格默认折叠，元素间默认空隙过小的现象。

display: inline-block

是 CSS 中用于控制元素布局的属性值。它结合了 inline 和 block 两种显示方式的特性，使元素既能像内联元素一样水平排列，又能像块级元素一样设置宽度、高度和边距。

水平排列：元素默认在同一行内水平排列，类似于 inline 元素。
支持盒模型属性：可以设置宽度、高度、内边距和外边距，类似于 block 元素。
不独占一行：不会像块级元素那样强制换行。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型基础</title>
<style>
    #b1{
        background-color: blueviolet;
        border: blue 1px solid;
        margin-left: 20px; 
        display: inline-block;
    }   
    #b2{
        background-color: blueviolet;
        border: red 10px solid;
        margin-left: 20px;
        display: inline-block;
    }  
</style>
</head>
<body>
    <div id="b1">
        行内元素1
    </div>
    <div id="b2">
        行内元素2
    </div>
</body>
</html>

扩展：

display: block：图片默认是行内元素，下方会有几像素的空白，设置为块级元素可以消除这个问题
object-fit: contain：让图片保持原有的宽高比，完整地显示在盒子内，不会被拉伸变形

核心知识总结：

属性	作用
width	配置盒子内容区域的宽
height	配置盒子内容区域的宽
padding	配置内容和边框之间的内边距
border	配置盒子边框的颜色宽度线型样式
margin	配置盒子和其他元素之间的外边距
background-color	配置盒子的背景填充色
border-radius	配置盒子的圆角边框
opacity	配置盒子的不透明度
display: inline-block	让块级元素横向（水平）排列