全面剖析CSS盒子模型：概念理解、构成元素、布局影响与实战技巧

JINGWHALE1

已于 2024-04-03 07:54:13 修改

阅读量722

点赞数 7

分类专栏： JINGWHALE 前端进阶文章标签： css 前端后端 ios android 小程序人工智能

于 2024-04-03 07:52:56 首次发布

JINGWHALE

本文链接：https://blog.csdn.net/u012347650/article/details/137321865

版权

JINGWHALE 前端进阶专栏收录该内容

66 篇文章 1 订阅

订阅专栏

在CSS进行网页布局与样式设计的过程中，盒子模型（Box Model）扮演着无可替代的角色。这一关键概念是精准掌控页面元素布局与样式的基石。唯有深入理解和熟练运用盒子模型的原理及各项属性，开发者方能自如地塑造页面中各元素的最终形态。

每个HTML元素在页面中均可视为一个独立的矩形“盒子”，各自占据特定的可视空间。值得注意的是，这些盒子所占据的空间通常远不止其内容本身，而是由内容区、内边距、边框和外边距共同构建而成，形成了一个结构丰富且可调控的空间体系。

一．盒子模型（Box Model）

在网页布局中，为了能够使纷繁复杂的各个部分合理地进行组织，通过研究，总结出了一套完整的、行之有效的原则和规范，这就是“盒子模型”的由来。

在CSS中，一个独立的盒子模型由内容(content)、边框(border)、填充(padding)和边界(margin)4个部分组成：

内容(content)：对应盒内物品

边框(border)：对应包装盒的纸壳，具有厚度

填充(padding)：位于边框内部，是内容与边框的距离，对应包装盒的填充部分

边界(margin)：位于边框外部，是边框外面周围的间隙，对应纸壳外围间隙

二．盒子模型属性

1. 边框（border）：用于分隔不同元素、会占据空间、有4条边框、可无边框（设置为0）。

语法：

 border : border-width || border-style || border-color

取值：

该属性是复合属性。默认值为： medium none 。 border-color 的默认值将采用文本颜色。

边框属性简写

同时设置边框的三个属性：border: 3px solid blue;

示例代码1：边框属性简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框属性简写</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 3px solid blue;
        }
    </style>
</head>
<body>
    <div>盒子</div>
</body>
</html>

① border-width：设置对象边框的宽度。

语法：

border-width : medium | thin | thick | length

取值：

medium : 默认值。默认宽度
thin : 小于默认宽度
thick : 大于默认宽度
length : 由浮点数字和单位标识符组成的长度值。不可为负值。

说明：

如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框（顺时针）。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

设置border-width、border-color前要设置border-style。

分别设置四条边框：

属性	语法规则	说明
border-top-width	border-top-width:5px;	上边框粗细为5px
border-right-width	border-right-width:10px;	右边框粗细为10px
border-bottom-width	border-bottom-width:8px;	下边框粗细为8px
border-left-width	border-left-width:22px;	左边框粗细为22px

示例代码2:分别设置四条边框（修改示例代码1的style）

<style>
        div{
            border-top-width:5px;
            border-right-width:10px;
            border-bottom-width:8px;
            border-left-width:22px;
            width:200px;
            height:200px;
            border-style: solid;
        }
</style>

同时设置4条边框：

属性	语法规则	说明
border-width	border-width:5px;	4条边框粗细均为5px
border-width	border-width:20px 2px;	上、下边框粗细为20px 左、右边框粗细为2px
border-width	border-width:5px 1px 6px;	上边框粗细为5px 左、右边框粗细为1px 下边框粗细为6px
border-width	border-width:1px 3px 5px 2px;	上边框粗细为1px 右边框粗细为3px 下边框粗细为5px 左边框粗细为2px

示例代码3:同时设置4条边框（修改示例代码1的style）

<style>
        div{
            border-width:5px 10px 20px;
            width:200px;
            height:200px;
            border-style: solid;
        }
</style>

② border-color: 指定颜色。

语法：

border-color : color

取值：

color:指定颜色。附：CSS 颜色十六进制值表

说明：

▪从#后第1位开始每2位为一组,表示一个颜色的值（这是以十六进制来算的）：第1组为红色，第2组为绿色，第3组为蓝色。根据三基色的原理，红色与绿色混合为黄色，红色与蓝色混为紫色，绿色与蓝色混合为青色。

▪数值大颜色亮

▪十六进制值是成对重复的可以简写，效果一样。例如:#FF0000 可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B 必须写满六位。

▪红色#FF0000，绿色#00ff00，蓝色为#0000ff，黄色为#FFFFOO，紫色为#ff00ff,青色为#00ffff,白色#ffffff,黑色#000000，要记住（上面所提到的都是饱和色）。

分别设置四条边框和同时设置4条边框语法同border-width

示例代码4:同时设置4条边框的颜色（修改示例代码3的style）

<style>
        div{
            border-color: gold pink blue red;
            border-width:5px 10px 20px;
            width:200px;
            height:200px;
            border-style: solid;
        }
</style>

③ border-style：设置对象边框的样式。

语法：

border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

取值：

none : 默认值。无边框。不受任何指定的 border-width 值影响
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 实线边框
double : 双线边框。两条单线与其间隔的和等于指定的 border-width 值
groove : 根据 border-color 的值画3D凹槽
ridge : 根据 border-color 的值画3D凸槽
inset : 根据 border-color 的值画3D凹边
outset : 根据 border-color 的值画3D凸边

分别设置四条边框和同时设置4条边框语法同border-width

示例代码5:同时设置4条边框（修改示例代码4的style）

<style>
        div{
            border-style: dotted;
            border-color: gold pink blue red;
            border-width:5px 10px 20px;
            width:200px;
            height:200px;
        }
</style>

④ inherit：规定应该从父元素继承 border 属性的设置。

注:当有多条规则作用于同一个边框时，会产生冲突，后面的设置会覆盖前面的设置。

2. 填充(padding)：用于控制内容与边框之间的距离；会占据空间；

可设置盒子模型上、右、下、左4个方向的内边距值；padding属性的值可以为0，即无内边距。

分别设置4个方向的内边距：

属性	语法规则	说明
padding-left	padding-left:10px;	左内边距为10px
padding-right	padding-right:5px;	右内边距为5px
padding-top	padding-top:20px;	上内边距为20px
padding-bottom	padding-bottom:8px;	下内边距为8px

同时设置4个方向的内边距：

属性	语法规则	说明
padding	padding:10px ;	设置4个方向内边距均为10px
padding	padding:10px 5px;	上、下内边距为10px 左、右内边距为5px
padding	padding:30px 8px 10px ;	上内边距为30px 左、右内边距为8px 下内边距为10px
padding	padding:20px 5px 8px 10px ;	上内边距为20px 右内边距为5px 下内边距为8px 左内边距为10px

示例代码6:同时设置4个方向的内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填充(padding)</title>
    <style>
        #box1{
            width: 400px;
            height: 300px;
            background: pink;
        }
        #box2{
            padding: 30px 8px 10px;
            width: 300px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">同时设置4个方向的内边距</div>
    </div>
</body>
</html>

3.边界(margin)：用于控制元素与元素之间的距离；会占据空间；

可设置盒子模型上、右、下、左4个方向的外边距值；margin属性的值可以为0，即无外边距。

分别设置4个方向的内边距和同时设置4个方向的内边距语法同padding属性设置方法类似。

示例代码7:同时设置4个方向的外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边界(margin)</title>
    <style>
        #box1{
            border:1px solid red;
            width: 400px;
            height: 300px;
            background: pink;
        }
        #box2{
            margin: 10px 30px;
            padding: 30px 8px 10px;
            width: 300px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">同时设置4个方向的外边距</div>
    </div>
</body>
</html>

注：body的外边距，本身是一个盒子，默认情况下，有若干像素外填充。

由于各个浏览器存在着默认的内外边距值且不相同，我们需要将所有浏览器的默认内外边距，都从0计算。所以，我们用

body,div{/*清除默认外边距和内边距*/
    margin: 0;
    padding: 0;
}

去除浏览器的默认内外边距。建议要去除的写上，不建议使用*{margin:0;padding:0;}。

示例代码8:去除body外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>去除body外边距</title>
    <style>
        body,div{
            margin: 0px;
            padding: 0px;
        }
        div{
            border:1px solid red;
            width: 400px;
            height: 300px;
            background: pink;
        }
    </style>
</head>
<body>
    <div id="box">此时是贴在body边框上</div>
</body>
</html>

效果：

4. 内容(content)

内容本身的宽=width
内容本身的高=height

5.盒子模型总尺寸

盒子模型总尺寸=border-width+padding+margin+内容尺寸（宽度/高度）

三．盒子之间的关系

尽管单独理解一个盒子的构成与属性调整相对直观，然而现实中的网页往往由大量盒子构成，它们错综复杂地交织在一起，彼此间通过多种关系相互影响，共同塑造出丰富多样的页面布局。为了应对各式各样的排版需求，CSS规范引入了一种基础的排布机制——“标准流”（Normal Flow），作为构建网页布局的基石。

标准流（Normal Flow）：这是CSS默认的布局模式，遵循自上而下、从左至右的文档流顺序排列盒子。在标准流中，块级元素（如段落、标题、div等）独占一行，依次垂直堆叠；行内级元素（如文本、span、img等）则在同一行内水平排列，直到行宽不足以容纳更多内容时换行。标准流确保了网页元素的基本有序呈现，适用于大多数常规的、线性分布的布局场景。

然而，面对复杂多变的现代网页设计趋势与需求，标准流布局有时显得力有未逮。为此，CSS规范提供了其他布局手段，如“浮动”（Float）和“定位”（Positioning），以实现更为灵活、非线性的排版效果。现在更多使用Flex进行布局。

1. DOM树

一个HTML从表面看是文本文件，从逻辑上看则具有内在的层次关系。“树”可以表示具有层次关系的结构。

任意一个HTML文档都对应一棵DOM树，body是所有对象的根节点。而该DOM树的节点如何在浏览器中表现，则由CSS确定。即HTML控制网页的结构，CSS控制网页的表现。

2. 标准文档流

“标准文档流”（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。

如上图共有四层结构，顶层为body，第二层为ul，第三层为li，第四层为文本。这四种元素分为两类：

① 块级元素（block level）

li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。这类元素称为“块级元素” ，即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。

常见的块标记：address、block、div、dl、fieldset、form、h1 ~ h6、menu、ol、ul、p、table

② 行内元素（inline）

对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”。比如<strong></strong>标记，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围。再比如，最常用的<a>、<span>标记。

3.浏览器处理元素过程：

第1步：从body开始，依次把两个ul块竖直排列。
第2步：分别进入每一个ul查看它的下级元素，把两个li块竖直排列在ul中。
第3步：进入li内部，是一行文本，按行内元素排列文字。

4．<div>标记与<span>标记

在CSS排版的网页中，<div>和<span>作为两种基础且常用的HTML标记，分别代表了“块级元素”与“行内元素”的典型特征。理解它们各自的特性和用法对于构建有序且灵活的页面布局至关重要。

<div>元素作为一个典型的块级元素，扮演着强大的内容容器角色。它可以轻松容纳各类HTML元素，包括但不限于段落（<p>）、标题（<h1>至<h6>）、表格（<table>）、图像（<img>）、章节（如<section>、<article>等）、摘要（<summary>）以及备注（如<footer>、<aside>等）。换言之，<div>就如同一块画布，可以在其内部自由组合和布局各种内容组件，形成页面上的独立区块。

相比之下，<span>元素作为行内元素，其功能和应用场景更为聚焦。<span>主要用于包裹文本或少量行内级内容（如短语、词语、图标等），并为其应用样式，而不影响周围内容的流式排列。

两者的区别在于：<div>和<span>分别作为块级元素和行内元素的典型代表，各自服务于不同的布局需求。<div>以其强大的包容性和布局能力，成为构建页面结构和划分区域的主力；而<span>则凭借其轻量级的内联特性，专注于文本和行内元素的样式修饰。理解并善用这两者的特点与差异，是提升CSS排版效率与效果的关键。

5. 盒子在标准流中的定位原则

如果要精确地控制盒子的位置，就必须对margin有更深入的了解。padding只存在于一个盒子内部，所以通常它不会涉及与其他盒子之间的关系和相互影响的问题。margin则用于调整不同的盒子之间的位置关系。

① 行内元素之间的水平margin

两个块之间的距离为：30px+40px=70px。

② 块级元素之间的竖直margin

如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。

两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如图所示。这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。

6. 嵌套盒子之间的margin

除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种父子关系，它的margin值对CSS排版也有重要的作用。当一个<div>块包含在另一个<div>块中时，便形成了典型的父子关系。

其中子块的margin将以父块的内容为参考，如图所示。

在没有设置width和height的情况下，高度和宽度都会自动延伸和收缩。在标准流中，一个块级元素的盒子水平方向的宽度会自动延伸，直至上一级盒子的限制位置。对于高度，div都是以里面的内容的高度来确定的，也就是会自动收缩到能包容下内容的最小高度。

示例代码7:在没有设置width和height的情况下，高度和宽度都会自动延伸和收缩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的嵌套</title>
    <style>
        #box1{//父盒子 设置宽度
            border:1px solid red;
            width: 300px;
            height: 150px;
            background: pink;
        }
        #box2{//子盒子 不设置宽度
            border:1px solid red;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="box1">父盒子
        <div id="box2">子盒子宽度 自动延伸为 父盒子宽度</div>
    </div>
</body>
</html>

效果：

如果更改代码：父盒子不设置高度，子盒子设置高度，则父盒子高度会收缩至子盒子的高度，效果如下：

7. margin属性可以设置为负值

上面提及margin的时候，它的值都是正数。其实margin的值也可以设置为负数，而且有关的巧妙运用方法也非常多。

JINGWHALE1

关注

7
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
0
评论
全面剖析CSS盒子模型：概念理解、构成元素、布局影响与实战技巧

在CSS进行网页布局与样式设计的过程中，盒子模型（Box Model）扮演着无可替代的角色。这一关键概念是精准掌控页面元素布局与样式的基石。唯有深入理解和熟练运用盒子模型的原理及各项属性，开发者方能自如地塑造页面中各元素的最终形态。
复制链接

扫一扫