前端入门第一坎？CSS 盒子模型 10 分钟给你焊死在脑子里

你是不是刚学 CSS，总被 “盒子模型” 搞得晕头转向？其实，网页上的每一个元素，本质上都是一个 “盒子”。大到整个页面布局，小到一个按钮、一张图片，都是通过 CSS 盒子模型来控制它们的大小、间距和边框样式的。

今天，我们就用一张超直观的效果图作为实战案例，手把手带你拆解 CSS 盒子模型的核心用法。看完这篇，你不仅能完全理解盒子模型，还能亲手写出和下图一模一样的效果！

一、基础入门：两个文字盒子的实现

先看效果图最上方的两个文字盒子：

第一个盒子：紫色背景，蓝色粗边框，包含文字 “我是第 1 个 div 盒子的内容哦～”
第二个盒子：橙色背景，绿色粗边框，包含文字 “我是第 2 个 div 盒子的内容哦～”

这两个是最基础的块级元素盒子，我们先来实现它们。

1. 编写 HTML 结构

HTML 非常简单，只需要两个div标签，分别添加类名方便后续样式控制：

<div id="k1" class="content">
        我是第1个div盒子的内容哦~
    </div>

    <div id="k2" class="content">
        我是第2个div盒子的内容哦~
    </div>

2. 编写 CSS 样式

我们来逐个分析需要用到的 CSS 属性，这些都是盒子模型的核心：

width/height：设置盒子内容区的宽度和高度
background-color：设置盒子的背景颜色
border：设置盒子的边框，包括宽度、样式和颜色
padding：设置内容和边框之间的内边距
margin：设置盒子和其他元素之间的外边距

对应的 CSS 代码：

 <style>
        #k1 {
            background-color: rgb(99, 48, 238);
            font-weight: bold;
            width: 300px;
            height: 5px;
            border: rgb(40, 43, 248) 5px solid ;
            margin: 10px;
            padding: 15px;
            line-height: 5px;

        }
        #k2 {
            background-color: rgb(248, 174, 15);
            width: 300px;
            height: 5px;
            border: rgb(40, 248, 109) 5px solid ;
            margin: 10px;
            padding: 15px;
            line-height: 5px;
        }

核心概念：盒子模型的组成一个完整的 CSS 盒子，从内到外由 4 部分组成：

内容区 (Content)：存放文字、图片等实际内容的区域，由width和height控制大小
内边距 (Padding)：内容和边框之间的空白区域
边框 (Border)：包裹在内边距外面的边框
外边距 (Margin)：盒子和其他盒子之间的空白区域

二、进阶实战：三个圆角图片盒子

接下来看效果图下方的三个校徽图片盒子。它们的特点是：

大小依次递增
都有绿色的粗边框
边框有圆角效果
图片和边框之间有内边距
图片在盒子里居中显示

这部分我们会用到两个非常实用的新属性：border-radius（圆角）和object-fit（图片自适应）。

1. 编写 HTML 结构

同样，先写三个包含图片的div盒子，给它们不同的类名区分大小：

 <div id="k3" class="content">
        <img src="./校徽.jpg" >
    </div>

    <div id="k4" class="content">
        <img src="./校徽.jpg" >
    </div>
    <div id="k5" class="content">
        <img src="./校徽.jpg" >
    </div>

2. 编写 CSS 样式

我们先写公共的样式，再分别设置不同的大小，这样代码更简洁易维护：

 #k3 {
            background-color: rgb(12, 104, 0);
            border: rgb(255, 255, 255) 5px solid ; 
            margin-right: 20px;
            padding: 15px;
            line-height: 5px;
            border-radius: 10px;
            width: 100px;
            height: 100px;
            display: inline-block;
        }
        #k3 img{
            width: 100px;
            height: 100px;
        }
        #k4 {
            background-color: rgb(12, 104, 0);
            border: rgb(255, 255, 255) 5px solid ; 
            margin-right: 20px;
            padding: 15px;
            line-height: 5px;
            border-radius: 10px;
            width: 200px;
            height: 200px;
            display: inline-block;
            border-top-right-radius: 20px;

        }
        #k4 img{
            width: 200px;
            height: 200px;
            border-top-right-radius: 20px;
        }
        #k5 {
            background-color: rgb(12, 104, 0);
            border: rgb(255, 255, 255) 5px solid ; 
            margin-right: 20px;
            padding: 15px;
            line-height: 5px;
            border-radius: 10px;
            width: 300px;
            height: 300px;
            display: inline-block;
            border-top-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }
        #k5 img{
            width: 300px;
            height: 300px;
            border-top-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }

关键技巧讲解

display: inline-block：让块级元素可以横向排列，同时保留块级元素可以设置宽高的特性
border-radius：设置边框的圆角，值越大，圆角越明显。如果设置为50%，就会变成圆形
display: block：图片默认是行内元素，下方会有几像素的空白，设置为块级元素可以消除这个问题
object-fit: contain：让图片保持原有的宽高比，完整地显示在盒子内，不会被拉伸变形

三、完整可运行代码

把上面的代码整合起来，就是一个完整的 HTML 文件了。你可以把下面的代码复制到记事本里，保存为.html后缀的文件，然后用浏览器打开，就能看到和效果图一模一样的效果啦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型基础</title>
    <style>
        #k1 {
            background-color: rgb(99, 48, 238);
            font-weight: bold;
            width: 300px;
            height: 5px;
            border: rgb(40, 43, 248) 5px solid ;
            margin: 10px;
            padding: 15px;
            line-height: 5px;

        }
        #k2 {
            background-color: rgb(248, 174, 15);
            width: 300px;
            height: 5px;
            border: rgb(40, 248, 109) 5px solid ;
            margin: 10px;
            padding: 15px;
            line-height: 5px;
        }
        #k3 {
            background-color: rgb(12, 104, 0);
            border: rgb(255, 255, 255) 5px solid ; 
            margin-right: 20px;
            padding: 15px;
            line-height: 5px;
            border-radius: 10px;
            width: 100px;
            height: 100px;
            display: inline-block;
        }
        #k3 img{
            width: 100px;
            height: 100px;
        }
        #k4 {
            background-color: rgb(12, 104, 0);
            border: rgb(255, 255, 255) 5px solid ; 
            margin-right: 20px;
            padding: 15px;
            line-height: 5px;
            border-radius: 10px;
            width: 200px;
            height: 200px;
            display: inline-block;
            border-top-right-radius: 20px;

        }
        #k4 img{
            width: 200px;
            height: 200px;
            border-top-right-radius: 20px;
        }
        #k5 {
            background-color: rgb(12, 104, 0);
            border: rgb(255, 255, 255) 5px solid ; 
            margin-right: 20px;
            padding: 15px;
            line-height: 5px;
            border-radius: 10px;
            width: 300px;
            height: 300px;
            display: inline-block;
            border-top-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }
        #k5 img{
            width: 300px;
            height: 300px;
            border-top-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }   
    </style>
</head>
<body>
    <div id="k1" class="content">
        我是第1个div盒子的内容哦~
    </div>

    <div id="k2" class="content">
        我是第2个div盒子的内容哦~
    </div>
    <div id="k3" class="content">
        <img src="./校徽.jpg" >
    </div>

    <div id="k4" class="content">
        <img src="./校徽.jpg" >
    </div>
    <div id="k5" class="content">
        <img src="./校徽.jpg" >
    </div>
</body>
</html>

展示：

注意：记得把代码里的src="./校徽.jpg"替换成你自己的校徽图片路径哦！

四、核心知识点总结

今天我们通过实战案例，学习了 CSS 盒子模型的核心用法，总结一下用到的关键属性：

属性	作用
`width`/`height`	设置盒子内容区的宽度和高度
`background-color`	设置盒子的背景颜色
`border`	设置边框的宽度、样式和颜色
`padding`	设置内容和边框之间的内边距
`margin`	设置盒子和其他元素之间的外边距
`border-radius`	设置边框的圆角
`display: inline-block`	让块级元素横向排列
`object-fit: contain`	保持图片比例，完整显示

CSS 盒子模型是前端开发的基石，几乎所有的网页布局都离不开它。今天的案例虽然简单，但涵盖了盒子模型最常用的属性。

建议你动手把代码敲一遍，然后试着修改里面的数值：比如把边框颜色改成红色，把圆角调大一点，把内边距改成 20px，看看效果会有什么变化。只有多动手实践，才能真正掌握 CSS 盒子模型！