AI 摘要

文章系统梳理 CSS 盒子模型核心概念：从 content、padding、border、margin 四要素切入，详解 border-color、width、style 及复合写法，演示 margin auto 水平居中与 padding 撑开尺寸的技巧；剖析标准/怪异模式差异，引入 box-sizing 控制总宽计算；并拓展 border-radius 绘制圆、半圆、扇形及 box-shadow 添加阴影的实用技法，辅以开发者工具调试与代码示例，帮助前端新手快速掌握布局与视觉细节。

此摘要根据文章内容自动生成，仅用于文章内容的解释与总结

盒子模型

盒子模型原理

在 CSS 中，矩形对象统称为盒子（box）。

  • 盒子模型由网页内容（content）、边框（border）、内边距（padding）、外边距（margin）组成。
  • 盒子模型的边框、内外边距有上（top）、下（bottom）、左（left）、右（right）四条边，设置样式时可以分别设置。

盒子模型的组成：

在浏览器中，可以借助开发者工具对盒子模型进行调试。

盒子模型样式

边框颜色

border-color 属性用于设置盒子模型的边框颜色。

border-color 属性的基本用法：

border-color: 所有边框的颜色;
border-color: 上下边框颜色 左右边框颜色;
border-color: 上边框颜色 右边框颜色 下边框颜色 左边框颜色;
border-color: 上边框颜色 左右边框颜色 下边框颜色;

border-top-color: 上边框颜色;
border-bottom-color: 下边框颜色;
border-left-color: 左边框颜色;
border-right-color: 右边框颜色;

使用 border-color 属性给边框设置边框颜色时，遵循上右下左，没有找对边的原则。

示例：border-color

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border-color: blue red green;
            border-style: solid;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

示例效果：

边框粗细

border-width 属性用于设置边框粗细。

border-width 属性的基本用法：

border-width: 所有边框的粗细;
border-width: 上下边框粗细 左右边框粗细;
border-width: 上边框粗细 右边框粗细 下边框粗细 左边框粗细;
border-width: 上边框粗细 左右边框粗细 下边框粗细;

border-top-width: 上边框粗细;
border-bottom-width: 下边框粗细;
border-left-width: 左边框粗细;
border-right-width: 右边框粗细;

边框粗细：

名称描述
thin细的边框
medium（默认值）中等边框
thick粗的边框
像素值具体的边框粗细

边框样式

border-style 属性用于设置边框样式。

border-style 属性的基本用法：

border-style: 所有边框的样式;
border-style: 上下边框样式 左右边框样式;
border-style: 上边框样式 右边框样式 下边框样式 左边框样式;
border-style: 上边框样式 左右边框样式 下边框样式;

border-top-style: 上边框样式;
border-bottom-style: 下边框样式;
border-left-style: 左边框样式;
border-right-style: 右边框样式;

边框样式：

名称描述
none（默认值）无边框
dotted点线边框
dashed虚线边框
solid实现边框

示例：border-style

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border-color: blue red green;
            border-style: dashed;
            border-width: 10px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

示例效果：

边框属性

border 属性是一个复合属性，是 border-color、border-width、border-style 属性的简写形式，这三个属性的编写顺序没有限制，可以按照任意顺序设置。

border 属性的基本用法：

border: 边框颜色 边框粗细 边框样式;

外边距

margin 属性用于设置盒子模型的外边距。

margin 属性的基本用法：

margin: 所有方向的外边距;
margin: 上下外边距 左右外边距;
margin: 上外边距 右外边距 下外边距 左外边距;
margin: 上外边距 左右外边距 下外边距;

margin-top: 上外边距;
margin-bottom: 下外边距;
margin-left: 左外边距;
margin-right: 右外边距;

示例：margin

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            border: black solid 5px;
        }
        .box {
            width: 500px;
            height: 500px;
            border: red solid 5px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

示例效果：

margin 属性除了设置像素值的外边距外，还可以设置为 auto，可以使元素水平居中。

  • magin 属性让元素水平居中，要求元素必须是块元素。
  • 元素必须要有固定宽度。

示例：margin 水平居中

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            border: black solid 5px;
        }
        .box {
            width: 500px;
            height: 500px;
            border: red solid 5px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

示例效果：

内边距

padding 属性用于设置盒子模型的内边距。

padding 属性的基本用法：

padding: 所有方向的内边距;
padding: 上下内边距 左右内边距;
padding: 上内边距 右内边距 下内边距 左内边距;
padding: 上内边距 左右内边距 下内边距;

padding-top: 上内边距;
padding-bottom: 下内边距;
padding-left: 左内边距;
padding-right: 右内边距;

示例：padding

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            border: black solid 5px;
        }
        .box {
            width: 500px;
            height: 500px;
            border: red solid 5px;
            padding: 50px;
        }
        .item {
            width: 100%;
            height: 100%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
    </div>
</body>
</html>

示例效果：

盒子模型尺寸

盒子模型总尺寸 = 边框 + 内边距 + 外边距 + 内容宽度。

box-sizing

box-sizing 属性用于设置盒子模型尺寸的解析方式。

box-sizing 属性的基本用法：

box-sizing: 解析方式;

盒子模型尺寸解析方式：

名称描述
content-box（默认值）W3C 盒子模型 / 标准盒子模型
盒子模型总尺寸 = 边框 + 内边距 + 外边距 + 内容宽度
border-boxIE 盒子模型 / 怪异盒子模型
盒子模型总尺寸 = 内边距 + 外边距 + 内容宽度
inherit盒子模型继承父元素的盒子模型模式

示例：box-sizing

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            border: black solid 5px;
        }
        .box {
            width: 500px;
            height: 500px;
            border: red solid 5px;
            padding: 50px;
            margin: 50px;
            box-sizing: border-box;
        }
        .item {
            width: 100%;
            height: 100%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
    </div>
</body>
</html>

示例效果：

圆角边框

border-radius 属性用于为盒子模型添加圆角边框。

border-radius 属性的基本用法：

border-radius: 四个角的圆角半径;
border-radius: 左上右下 右上左下;
border-radius: 左上 右上 右下 左上;
border-radius: 左上 左下右上 右下;

border-top-left-radius: 左上;
border-bottom-left-radius: 左下;
border-top-right-radius: 右上;
border-bottom-right-radius: 右下;

示例：border-radius

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: red solid 5px;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

示例效果：

制作特殊图形

使用 border-radius 属性制作圆形：

  • 元素的宽度和高度必须相同。
  • 圆角半径为 50%。

示例：制作圆形

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: red solid 5px;
            border-radius: 50%
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

示例效果：

使用 border-radius 属性制作半圆形：

  • 制作上半圆或下半圆时，元素宽度 = 2 * 元素高度，圆角半径 = 元素高度。
  • 制作左半圆或右半圆时，元素高度 = 2* 元素宽度，圆角半径 = 元素宽度。

示例：制作半圆形

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box:nth-of-type(1) {
            width: 200px;
            height: 100px;
            border: red solid 5px;
            border-top-right-radius: 100px;
            border-top-left-radius: 100px;
        }

        .box:nth-of-type(2) {
            width: 200px;
            height: 100px;
            border: red solid 5px;
            border-bottom-right-radius: 100px;
            border-bottom-left-radius: 100px;
        }

        .box:nth-of-type(3) {
            width: 100px;
            height: 200px;
            border: red solid 5px;
            border-top-left-radius: 100px;
            border-bottom-left-radius: 100px;
        }

        .box:nth-of-type(3) {
            width: 100px;
            height: 200px;
            border: red solid 5px;
            border-top-right-radius: 100px;
            border-bottom-right-radius: 100px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <br>
    <div class="box"></div>
    <br>
    <div class="box"></div>
    <br>
    <div class="box"></div>
</body>
</html>

示例效果：

使用 border-radius 属性制作扇形：

  • 实际上是使用 border-radius 属性制作四分之一圆形。
  • 三同：元素宽度、元素高度、圆角半径相同。
  • 一不同：圆角位置不同，就可以制作出左上、右上、右下、左上的扇形。

示例：制作扇形

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box:nth-of-type(1) {
            width: 200px;
            height: 200px;
            border: red solid 5px;
            border-top-left-radius: 200px;
        }

        .box:nth-of-type(2) {
            width: 200px;
            height: 200px;
            border: red solid 5px;
            border-bottom-left-radius: 200px;
        }

        .box:nth-of-type(3) {
            width: 200px;
            height: 200px;
            border: red solid 5px;
            border-top-right-radius: 200px;
        }

        .box:nth-of-type(4) {
            width: 200px;
            height: 200px;
            border: red solid 5px;
            border-bottom-right-radius: 200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <br>
    <div class="box"></div>
    <br>
    <div class="box"></div>
    <br>
    <div class="box"></div>
</body>
</html>

示例效果：

盒子阴影

box-shadow 属性用于设置盒子模型的阴影。

box-shadow 属性基本用法：

box-shadow: 阴影类型 x轴位移 y轴位移 模糊半径 阴影颜色;

box-shadow 属性的基本配置项：

名称描述
阴影类型阴影类型可选
如果不设置，默认投影方式为外阴影
inset：内阴影。
x 轴位移x>0 时阴影向右偏移
y 轴位移y>0 时阴影向下偏移
y 轴位移y>0 时阴影向下偏移
模糊半径模糊半径值越大阴影越模糊
阴影颜色如果不设置，默认使用浏览器的默认颜色

示例：box-shadow

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: red solid 5px;
            box-shadow: 20px 30px 10px red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

示例效果：