对盒子模型的详解

最新推荐文章于 2024-10-12 10:41:56 发布

·景深

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量40

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/m0_69591586/article/details/134388727

版权

本文详细介绍了HTML中的盒子模型，包括其组成（内容区、内边距、边框和外边距），并通过实例验证了content、padding和border如何影响盒子大小，而margin则不改变。同时讨论了width和height属性的实际作用以及怪异盒模型的概念。

摘要由CSDN通过智能技术生成

【前言】

盒子模型，是我们学习HTML绕不开的一个概念，我们的布局都是基于盒子的。本文将对盒子模型做一个阐述。

【引言】

在正式介绍HTML中的盒子，我们不妨看一个生活中的盒子。

对于上面的盒子，如果我们用HTML的盒子概念作为填充，那么就如下图所示：

读者在理解抽象的盒子如遇困难，不妨借助实物图。

【盒子模型的组成】

现在，我们正式开始介绍盒子。

在网页渲染时，CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子。

我们当然不希望就通过这样一句话去理解盒子，我们喜欢看见一个实打实的盒子，而不是一个抽象的盒子，因此就需要借助开发者工具，一般浏览器的使用就是按F12或Fn+F12。

<!DOCTYPE html>
<html lang="en-CN">
<head>
    <title>行内元素的显示特点</title>
    <style>
        .outer {
            width: 400px;
            height: 400px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            background-color: #888;
            text-align: center;
            line-height: 400px;
            margin: 0 auto;
        }

    </style>
</head>
<body>
    <div class="outer">
        我无坚不摧，也无所不能
    </div>
    
</body>
</html>

为方便观察与理解，笔者生成了一个正方形的div。接着我们打开开发者工具，并找到如下界面：

蓝色框中，就是这个元素对应的盒子了，从这幅图我们可以很明显的看见，一个盒子由下面四个部分组成：

content:内容区
padding:内边距
border:边框
margin:外边距

那么现在，读者是否会有一个疑问：盒子的大小是由上面的四个中的哪些决定的呢？

首先，我们可以看见：content区为400px*400px，通过开发者工具，我们发现盒子的大小为：400px*400px

这也就说明：content区会影响盒子大小

那么，剩下的三个，我们不妨加以验证

【padding验证】

<!DOCTYPE html>
<html lang="en-CN">
<head>
    <title>行内元素的显示特点</title>
    <style>
        .outer {
            width: 400px;
            height: 400px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            background-color: #888;
            text-align: center;
            line-height: 400px;
            margin: 0 auto;
            padding: 20px;
        }

    </style>
</head>
<body>
    <div class="outer">
        我无坚不摧，也无所不能
    </div>
    
</body>
</html>

我们为这个盒子增加上下左右四个padding，在开发者工具中可以发现：盒子模型中上下左右均有20px的padding,并且盒子的大小也变为440px*440px。

这就证明了：padding 也会影响盒子大小，并且它仅影响同一维度上的大小。

【border验证】

<!DOCTYPE html>
<html lang="en-CN">
<head>
    <title>行内元素的显示特点</title>
    <style>
        .outer {
            width: 400px;
            height: 400px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            background-color: #888;
            text-align: center;
            line-height: 400px;
            margin: 0 auto;
            padding: 20px;
            border:5px solid skyblue
        }

    </style>
</head>
<body>
    <div class="outer">
        我无坚不摧，也无所不能
    </div>
    
</body>
</html>

接着，我们为此盒子添加上下左右四个border，大小为5px。在开发者工具中，也明显发现，盒子大小变大了9.78px

这就说明：border也会影响盒子大小

这里，部分读者兴许会产生疑问：我明明加的是5px的border,得到的大小怎么也应该是多了10px而不是9.78px。

这其实并不是我们代码的问题，而要“怪”浏览器。而是因为：我们的操作系统本身就会对屏幕进行缩放，浏览器最终的呈现就会产生偏差了，这并不关键。

【margin验证】

其实对于margin，细心的读者已经发现：在为盒子设置居中就是使用了margin属性，但盒子大小并没有增加。这也就证明：margin不会影响盒子大小

【结论】

会影响盒子大小：content、padding、border
不会影响盒子大小：margin

【width height属性】

提完上面的盒子模型的组成，就得来说说width和height了。

为什么要提这个属性？他明明很简单。但如果我提出这个问题，读者是否能很好的回答呢？

width和height设置的是谁的宽度？

答案是：content区的大小

这里也无需给出新的代码，读者看上面添加了border和padding的盒子就会发现，width是400px 而content区变为400px。

因此，如果有这样一个需求：盒子大小为400px border为5px padding为10px

那么设置盒子大小的属性应该为：

width:370px;
height:370px;
border:5px solid red;
padding:10px;

如果就希望width和height设置的是整个盒子的大小（即content+padding+border），那么需要为盒子加上： box-sizing: border-box; 属性

加上了以后，我们也管这个盒子叫做“怪异盒模型”。

·景深

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫