网页布局基石----盒子模型

zhong_728h

515人浏览 · 2026-05-12 23:36:19

zhong_728h · 2026-05-12 23:36:19 发布

一：盒模型的构成

二：盒模型的核心属性

三：标准盒子模型代码实例

CSS控制网页样式是通过盒子模型去实现的，日常中我们所看到的网页上所以标签都可以视为一个盒子。所以网页都是放在盒子里面的。因此，我们首先要对盒子模型有所了解。接下来，我将通过一篇文章带你进一步掌握盒子模型的核心知识点。

一：盒模型的构成

盒子模型由4个部分组成。它们分别是1.内容（Content）：是盒子的最核心部分，用于显示文本、图像或其他媒体内容。2.内边距（padding）：围绕在内容区域周围的透明区域。它用于在内容和边框之间创造空间，使内容不会紧贴边框。3.边框（Border）：位于内边距外侧的线条，作为盒子的边界。4.外边距（margin）：盒子模型的最外层，是边框之外的透明区域。它的作用是控制当前元素与其他相邻元素之间的距离。

二：盒模型的核心属性

2.1内容区域相关属性：

width属性：设置内容的宽度。
height属性：设置内容的高度。

在盒子模型中，width和height属性仅指内容区的宽高，不包含内边距和边框。

2.2内边距相关属性：
padding属性：可以一次性设置上、右、下、左的内边距。
padding-top（上）
padding-right（右）
padding-bottom（下）

padding-left（左）

在盒子模型中，padding、border和margin都是有4个方向的。4个方向的顺序分别是上、右、下、左。

2.3边框相关属性：

	定义	属性值
边框样式属性（border-style）	定义页面中边框的风格。	eg： solid 实线, dashed 虚线, dotted 点线, double双实线
边框宽度属性（border-width）	设置边框的宽度。
边框颜色属性（border-color）	设置边框的颜色。
圆角属性	用于设置边框的圆角效果。	`border-radius`

2.4外边距的相关属性：

padding-top（上）
padding-right（右）
padding-bottom（下）
padding-left（左）

三：标准盒子模型代码实例

<title>盒子属性的练习</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: "微软雅黑", sans-serif;
        }
        .box-bold {
            background-color: gray;      
            color: black;                 
            font-weight: bold;            
            border: 2px solid green;    
            padding: 5px;                 
            width: 350px;                
            margin-bottom: 30px;          
        }
        .box-underline {
            background-color: #8888cc;    
            color: blue;               
            text-decoration: underline;   
            border: 2px solid blue;       
            padding: 5px;
            width: 350px;
            margin-bottom: 50px;         
        }
        .img-container {
            display: inline-block;    
            background-color: gray;       
            border: 3px solid red;       
            border-radius: 20px;         
            padding: 15px;              
            margin-right: 30px;          
            vertical-align: middle;       
        }
        .img-container img {
            display: block;               
            background-color: white;    
        }
        .size-s { width: 80px; height: 80px; }
        .size-m { width: 150x; height: 160px; }
        .size-i{ width: 200x; height: 180px; }
    </style>
</head>
<body>
    <div class="box-bold">
        这个课堂练习禁止使用br和hr标签:加粗文本
    </div>
    <div class="box-underline">
        这个课堂练习禁止使用br和hr标签:下划线文本
    </div>
    <div class="img-container">
        <img src="Jennie.jpg" alt=""class="size-s">
    </div>
    <div class="img-container">
        <img src="Jennie.jpg" alt=""class="size-m" >
    </div>
    <div class="img-container">
        <img src="Jennie.jpg" alt=""class="size-i">
    </div>

</body>

代码效果图如下：

以上涉及到了<img>标签这个的知识点可以去看我的第二篇文章https://blog.csdn.net/zhong_728h/article/details/159509508?spm=1001.2014.3001.5502，在盒子模型图片标签要注意以下几点：

图片默认是inline(行内)元素。
padding会影响图片位置。
border会增加盒子实际大小。
margin不会影响盒子自身大小，只影响外部。
图片尺寸不要“撑破盒子”。max—width的最大值不要超过100%，不然图片下面会多出空白。

盒子模型看似简单，但在复杂的页面布局中往往会遇到各种“塌陷”或“溢出”的惊喜。从 content 到 border，每一个属性的细微变化，都会直接影响到页面的最终呈现。真正掌握盒子模型，意味着你不再只是机械地书写样式，而是能够像搭积木一样，精准地掌控页面上每一个元素的尺寸与间距。希望这篇文章能帮你彻底打通这一核心概念，让你在后续的布局实战中更胜一筹。