盒模型(标准和IE)

曾经终败给现在 2022-10-25 11:29 172阅读 0赞

代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Box</title>
    </head>
    <style> .box{ width: 100px; height: 100px; padding: 20px; margin: 30px; border: rgb(179, 231, 247) 5px solid; background-color: pink; display: inline-block; } </style>
    <body>
        <div class="box"></div>
    </body>
    </html>

效果：  
![box1][]  
对比代码发现，设置100 \* 100长宽比，但呈现出150 \* 150的盒子。

控制台示意图：  
![box2][]  
图中发现设置的100\*100出现在了最里面的那个蓝框中，同时发现在这个盒模型中除了设置的内容（content），还有margin（外边距）、border（边框）、padding（内边框）  
计算发现：  
150=100（长/宽）+20（padding）\*2+5（border）\*2

### CSS两种盒模型 ###

引起上面效果的原因来自于 css 的两种盒模型的不同

###### 标准盒子![标准][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbnNpc3RlbnRfXw_size_16_color_FFFFFF_t_70] ######

> 在标准的盒子模型中，width指content部分的宽度

###### IE盒子 ######

![IE][]

> 在IE盒子模型中，width表示content+padding+border这三个部分的宽度

[box1]: /images/20221024/6048d2099475468385a64aa38fb74a2b.png
[box2]: /images/20221024/411e28b10c1846b282921c644baecc89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbnNpc3RlbnRfXw_size_16_color_FFFFFF_t_70]: /images/20221024/c3d98819793e4da5a4a9792b80594777.png
[IE]: /images/20221024/b279cb80a8b640d181ee139d6aff14ac.png

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 盒模型是什么？它包含哪些属性？标准盒模型/怪异盒模型

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 盒模型 ⭐ 标准盒模型 ⭐ 怪异盒模型 ⭐ 写在最后 --------------------

太过爱你忘了你带给我的痛/ 2023年10月14日 16:24/ 0 赞/ 70 阅读

相关 CSS-盒子模型，标准盒子模型，IE 盒子模型，盒模型之间的转换

我们可以把每一个HTML标记，都看成是一个"盒子"；这个"盒子"的特征包含：内容的宽度（width）或高度（height）、边框线（padding）、内填充（padding）、

分手后的思念是犯贱/ 2023年06月01日 11:13/ 0 赞/ 178 阅读

相关标准盒模型和怪异盒模型(marksheng)

[标准盒模型和怪异盒模型][Link 1] 盒子模型众所周知，这里先简单介绍一下。 ![bf87fcb7ab972914ed580e0b5e79d775.png][]

矫情吗；*/ 2023年01月17日 10:57/ 0 赞/ 159 阅读

相关与标准盒模型和IE盒模型优点？

1、标准盒模型 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，和实际内容。 Margin(外边距) - 清除边框外的区域，外边距是透明

Dear 丶/ 2022年11月01日 15:55/ 0 赞/ 202 阅读

相关盒模型(标准和IE)

代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

曾经终败给现在/ 2022年10月25日 11:29/ 0 赞/ 173 阅读

相关 IE和标准DOM的事件模型

（1）事件传播和事件冒泡 IE内核的浏览器事件模型是冒泡型事件，也就是说，在IE内核下，时间句柄的出发顺序是从ChildNode到ParentNode。 <div

╰+攻爆jí腚メ/ 2022年06月10日 06:24/ 0 赞/ 185 阅读

相关什么是CSS盒模型 IE盒模型和W3C盒模型

看到一篇不错的文章就转载过来了说得全面 https://www.cnblogs.com/ylliap/p/6119740.html[点击打开链接][Link 1]

向右看齐/ 2022年05月21日 04:55/ 0 赞/ 338 阅读

相关 CSS-标准盒模型 & 怪异盒模型

CSS中Box model分类 CSS中Box model是分为两种:: W3C标准和 IE标准盒子模型。大多数浏览器采用W3C标准模型，而IE中则采用Micros

缺乏、安全感/ 2022年05月19日 03:49/ 0 赞/ 316 阅读

相关 IE6混杂模式盒模型

1. w3c标准中的盒模型：border + padding + content 其中在设置的width 和 height 是content内容区的宽和高； box-siz

偏执的太偏执、/ 2022年05月09日 05:36/ 0 赞/ 181 阅读

相关标准盒模型和IE怪异盒模型

以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（qui

野性酷女/ 2021年10月09日 04:14/ 0 赞/ 470 阅读