标准盒子模型与怪异盒子模型

最新推荐文章于 2023-10-22 03:49:23 发布

@晔

最新推荐文章于 2023-10-22 03:49:23 发布

阅读量917

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_47258963/article/details/108228098

版权

通俗的讲，盒模型是css布局的基础，它的作用是规定了网页元素在网页上如何显示以及元素之间的相互关系，css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)。

在这里插入图片描述

上图很明白的就可以看出来，盒模型由以下几部分组成：

内容区(content):元素的宽和高
补白（填充）(padding)：元素内容和外边缘之间的空间
边框(border)：盒子的外边缘
边界(外边距)(margin)：盒子外边缘以外的空间

这其实就是一个标准的盒模型。

那么接下来，我们再来看看什么是怪异盒模型吧。下图所示：
在这里插入图片描述
可以明显的看出，怪异盒模型的组成部分则只划分为了两个部分，分别为：

width/height(元素的内容宽或高)：内容区(content)、补白（填充）(padding)以及边框(border)的总和

边界(外边距)(margin)：盒子外边缘以外的空间

不难看出，怪异盒模型的一个构成形式为元素的宽高包含了填充以及边框所占有的空间，也就是说当我们页面元素为怪异盒模型的时候，给予元素padding或者border属性之后并不会改变元素原有宽高的值，而如果我们给标准盒模型的元素添加padding或者border属性之后，元素最终的宽高值会发生变化，盒子会变大，这也就是标准盒模型与怪异盒模型区别所在。（下面通过案例以及图片给与对比加深理解）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width:300px;
                height:300px;
                background:#f00;
                border:10px solid #000;
                padding:20px;
                box-sizing: border-box;/* 转换成怪异盒模型 该属性下面有说明*/
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

标准盒模型的呈现形式为：
在这里插入图片描述
图片上可以看到，div的值由原始的300加上padding和border的值最后变为了360x360。

怪异盒模型的呈现形式为：
在这里插入图片描述
可以看到，加上padding和border值之后，div的宽度和高度依旧为300x300不变，填充以及边框属性值都包含在了元素的体内。

相信看到这里，大家应该能够理解他们的不同之处了吧？

PS : 我们可以通过CSS3属性进行盒模型之间的转换操作，下面是它的一个属性设置：

1 border-sizing: border-box/* 表示怪异盒模型 */
2 border-sizing: content-box/* 表示标准盒模型 */

通过设置该属性，我们可以转换元素的盒模型进行自己想要的效果呈现，当然我们常用的一些元素中也有自带怪异盒模型属性的，例如我们大家熟知的页面提交按钮，还有表格table，其实他们都是属于怪异盒模型的，所以在以后的工作中，应该明白为什么明明设置了填充元素高度依旧不够的缘故了吧？

@晔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
标准盒子模型与怪异盒子模型

通俗的讲，盒模型是css布局的基础，它的作用是规定了网页元素在网页上如何显示以及元素之间的相互关系，css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)。...
复制链接

扫一扫