前端面试——盒子模型详解

最新推荐文章于 2024-04-12 02:34:57 发布

DW14687

最新推荐文章于 2024-04-12 02:34:57 发布

阅读量2.1k

点赞数

分类专栏：面试题目文章标签：前端 css javascript

本文链接：https://blog.csdn.net/DW14687/article/details/127280520

版权

面试题目专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、什么是盒子模型？

1.如何回答？

盒子模型是css中的一种思维模型，即把网页内容看成一个盒子，这个盒子由外到内包括margin、border、padding、content。根据浏览器计算方式不同分为两种模型：标准模型（w3c模型）和怪异模型（又称IE模型）。

他们的主要区别是：标准模型的宽度不包含padding和border，怪异模型的宽度包含padding和border(个人认为主要表现在内容区域的大小变化)。

2.详解

举个栗子，设置如下盒子样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .external{
            width: 100px;
            height:100px;
            margin:10px;
            padding:10px;
            border: 2px solid red;
            box-sizing: border-box;//切换为怪异模型
            background: #4A2AB2;
        }
    </style>
</head>

<body>
<div class="external">
    <div class="internal"></div>
</div>
</body>
</html>

看下图：

标准模型下，width=border+pading+content(设置的宽度)=124px

怪异模型下，width=content(这里面已经包含了border和padding)=100px

可以非常直观的看到他们之间的区别在哪里了把~

怪异模型下设置的border和padding都在width里面啦，内容区域就变小啦

3.如何转换？

两种模型之间的转换可以使用css中的box-sizing来切换。

默认情况下，box-sizing为content-box，也就是标准模型。可通过设置box-sizing的值为border-box准换为怪异模型。

4.什么场景下用？

那么什么情况下需要指定怪异模型或标准模型呢？

我们来举个栗子，设置如下样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .external{
            width: 100px;
            height:100px;
            background: #4A2AB2;
        }
        .internal{
            width: 100%;
            height: 50px;
            background: red;
            padding-left: 10px;
        }
    </style>
</head>

<body>
<div class="external">
    <div class="internal"></div>
</div>
</body>
</html>

然后看看运行结果呢~

很明显，红色这一块多了10px，就是我们设置的padding-left：10px

那这个时候呢我们就需要把他转为怪异模型啦~，加入box-sizing:border-box,如下图

再看看结果呢~

此时就很nice啦~、

综上所诉，当外盒子设置了固定值，内盒子用百分比且有设置border或者padding的时候，你就需要注意啦，就可能会存在这个问题~

总结

以上就是今天要讲的内容，本文仅仅简单介绍盒子模型原理和转换方式，简单的描述了一下使用场景，如果有更好的想法告诉我吧~。

DW14687

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
前端面试——盒子模型详解

盒子模型是css中的一种思维模型，即把网页内容看成一个盒子，这个盒子由外到内包括margin、border、padding、content。根据浏览器计算方式不同分为两种模型：标准模型（w3c模型）和怪异模型（又称IE模型）。他们的主要区别是：标准模型的宽度不包含padding和border，怪异模型的宽度包含padding和border(个人认为主要表现在内容区域的大小变化)。以上就是今天要讲的内容，本文仅仅简单介绍盒子模型原理和转换方式，简单的描述了一下使用场景，如果有更好的想法告诉我吧~。
复制链接

扫一扫