盒模型

CSS 盒模型是理解 CSS 布局的基础。每个 HTML 元素都被视为一个矩形盒子。

盒模型组成

CSS 盒模型由四个部分组成：

+------------------------------------------+
|                  margin                  |
|  +------------------------------------+  |
|  |              border                |  |
|  |  +------------------------------+  |  |
|  |  |          padding             |  |  |
|  |  |  +------------------------+  |  |  |
|  |  |  |                        |  |  |  |
|  |  |  |        content         |  |  |  |
|  |  |  |                        |  |  |  |
|  |  |  +------------------------+  |  |  |
|  |  |                              |  |  |
|  |  +------------------------------+  |  |
|  |                                    |  |
|  +------------------------------------+  |
|                                          |
+------------------------------------------+

组成部分	说明
content	内容区域，显示文本、图片等
padding	内边距，内容与边框之间的空间
border	边框，包围内容和内边距
margin	外边距，元素与其他元素之间的空间

content（内容区域）

内容区域的大小由 width 和 height 属性控制：

css

.box {
    width: 200px;
    height: 100px;
}

尺寸属性

css

/* 固定尺寸 */
width: 300px;
height: 200px;

/* 百分比 */
width: 50%;
height: 100%;

/* 自动 */
width: auto;
height: auto;

/* 最大/最小尺寸 */
max-width: 1200px;
min-width: 320px;
max-height: 500px;
min-height: 100px;

padding（内边距）

内边距是内容与边框之间的空间：

css

/* 四边相同 */
padding: 20px;

/* 上下 | 左右 */
padding: 10px 20px;

/* 上 | 左右 | 下 */
padding: 10px 20px 15px;

/* 上 | 右 | 下 | 左（顺时针） */
padding: 10px 20px 15px 25px;

/* 单边设置 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;

border（边框）

边框包围内容和内边距：

css

/* 简写：宽度 | 样式 | 颜色 */
border: 1px solid #ccc;

/* 分开设置 */
border-width: 1px;
border-style: solid;
border-color: #ccc;

边框样式

值	说明
`none`	无边框
`solid`	实线
`dashed`	虚线
`dotted`	点线
`double`	双线
`groove`	3D 凹槽
`ridge`	3D 凸槽
`inset`	3D 内嵌
`outset`	3D 外嵌

单边边框

css

border-top: 1px solid red;
border-right: 2px dashed blue;
border-bottom: 3px dotted green;
border-left: 1px solid black;

圆角边框

css

/* 四角相同 */
border-radius: 10px;

/* 左上右下 | 右上左下 */
border-radius: 10px 20px;

/* 左上 | 右上左下 | 右下 */
border-radius: 10px 20px 15px;

/* 左上 | 右上 | 右下 | 左下 */
border-radius: 10px 20px 15px 25px;

/* 圆形 */
border-radius: 50%;

margin（外边距）

外边距是元素与其他元素之间的空间：

css

/* 四边相同 */
margin: 20px;

/* 上下 | 左右 */
margin: 10px 20px;

/* 上 | 左右 | 下 */
margin: 10px 20px 15px;

/* 上 | 右 | 下 | 左（顺时针） */
margin: 10px 20px 15px 25px;

/* 单边设置 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 25px;

/* 水平居中 */
margin: 0 auto;

外边距合并

垂直方向上相邻的外边距会发生合并，取较大的值：

css

.box1 {
    margin-bottom: 20px;
}

.box2 {
    margin-top: 30px;
}

/* 实际间距为 30px，而非 50px */

box-sizing

box-sizing 属性决定了如何计算元素的总宽高：

content-box（默认）

width 和 height 只包含内容区域：

css

.box {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 5px solid #ccc;
    /* 总宽度 = 200 + 20*2 + 5*2 = 250px */
}

border-box（推荐）

width 和 height 包含内容、内边距和边框：

css

.box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid #ccc;
    /* 总宽度 = 200px */
    /* 内容宽度 = 200 - 20*2 - 5*2 = 150px */
}

全局设置

css

* {
    box-sizing: border-box;
}

display 属性

display 属性决定元素的显示方式：

块级元素

css

display: block;

独占一行
可以设置宽高
默认宽度为父元素宽度

行内元素

css

display: inline;

不换行
不能设置宽高
宽度由内容决定

行内块元素

css

display: inline-block;

不换行
可以设置宽高
宽度由内容决定

隐藏元素

css

display: none;      /* 完全隐藏，不占空间 */
visibility: hidden; /* 隐藏但占空间 */
opacity: 0;         /* 透明但占空间 */

溢出处理

当内容超出容器大小时，使用 overflow 属性处理：

css

/* 可见（默认） */
overflow: visible;

/* 隐藏超出内容 */
overflow: hidden;

/* 显示滚动条 */
overflow: scroll;

/* 自动：内容超出时显示滚动条 */
overflow: auto;

/* 分别设置水平和垂直 */
overflow-x: hidden;
overflow-y: auto;

实践示例

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒模型示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .box {
            background-color: white;
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        
        .box-demo {
            width: 300px;
            padding: 30px;
            border: 10px solid #007bff;
            margin: 20px auto;
            background-color: #f8f9fa;
            text-align: center;
        }
        
        .card {
            display: inline-block;
            width: 200px;
            padding: 15px;
            margin: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: white;
            vertical-align: top;
        }
        
        .card img {
            width: 100%;
            height: 120px;
            object-fit: cover;
            border-radius: 4px;
        }
        
        .card h3 {
            margin: 10px 0 5px;
            font-size: 16px;
        }
        
        .card p {
            color: #666;
            font-size: 14px;
        }
        
        .overflow-demo {
            width: 200px;
            height: 100px;
            overflow: auto;
            border: 1px solid #ccc;
            padding: 10px;
            background-color: white;
        }
        
        .circle {
            width: 100px;
            height: 100px;
            background-color: #007bff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>CSS 盒模型示例</h1>
        
        <div class="box">
            <h2>盒模型演示</h2>
            <div class="box-demo">
                内容区域<br>
                padding: 30px<br>
                border: 10px solid
            </div>
        </div>
        
        <div class="box">
            <h2>卡片布局（inline-block）</h2>
            <div class="card">
                <img src="https://via.placeholder.com/200x120" alt="图片">
                <h3>卡片标题</h3>
                <p>卡片描述内容</p>
            </div>
            <div class="card">
                <img src="https://via.placeholder.com/200x120" alt="图片">
                <h3>卡片标题</h3>
                <p>卡片描述内容</p>
            </div>
            <div class="card">
                <img src="https://via.placeholder.com/200x120" alt="图片">
                <h3>卡片标题</h3>
                <p>卡片描述内容</p>
            </div>
        </div>
        
        <div class="box">
            <h2>溢出处理</h2>
            <div class="overflow-demo">
                这是一段很长的内容，用于演示溢出处理效果。
                当内容超出容器大小时，会显示滚动条。
                这是一段很长的内容，用于演示溢出处理效果。
                当内容超出容器大小时，会显示滚动条。
            </div>
        </div>
        
        <div class="box">
            <h2>圆形元素</h2>
            <div class="circle">圆形</div>
        </div>
    </div>
</body>
</html>

盒模型 ​

盒模型组成 ​

content（内容区域） ​

尺寸属性 ​

padding（内边距） ​

border（边框） ​

边框样式 ​

单边边框 ​

圆角边框 ​

margin（外边距） ​

外边距合并 ​

box-sizing ​

content-box（默认） ​

border-box（推荐） ​

全局设置 ​

display 属性 ​

块级元素 ​

行内元素 ​

行内块元素 ​

隐藏元素 ​

溢出处理 ​

实践示例 ​

盒模型