盒子模型的宽度计算问题, 有什么问题，及解决方案

快来打我* 2022-08-05 11:25 27阅读 0赞

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 **ie 盒子模型**和标准 w3c 盒子模型。

![Center][]

标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

![Center 1][]

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

例如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解释，那么这个盒子模型占用的

宽度为：20\*2+10\*2+10\*2+200=280px;

高度：20\*2+10\*2+20\*2+50=130px;

盒子的实际宽度大小为:10\*2+10\*2+200=240px;

实际高度：10\*2+10\*2+50=90px;

用ie的盒子模型解释 ：

盒子在网页中占据的大小为   20\*2+200=240px;  高：20\*2+50=90px;

盒子的实际大小为：宽度:200px, 高度:50px;

W3C 最后为了解决这个问题，在 CSS3 中加了 box-sizing 这个属性。当我们设置 `box-sizing: border-box;` 时，border 和 padding 就被包含在了宽高之内，所以，为了避免你同一份 css 在不同浏览器下表现不同，最好加上：

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

这里还有两种特殊情况：

*  无宽度 —— 绝对定位（position: absolute;） 元素
 *  无宽度 —— 浮动（float） 元素

它们在页面上的表现均**不占据空间**（脱离普通流，感觉像浮在页面上层一样，移动它们不影响其他元素的定位）。

[Center]: /images/20220731/a49c3ae8220d48cf96a6c68c75be360d.png
[Center 1]: /images/20220731/6499f815097d4c50ad178cc48169ef82.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Java 内存模型(MM)：常见问题及解决方案

Java内存模型（Memory Model，简称MM）是Java虚拟机规范（JVM Specification）的一部分，它规定了如何在多线程环境中共享和操作内存。常见的内

迈不过友情╰/ 2024年11月30日 16:09/ 0 赞/ 89 阅读

相关 CSS盒子塌陷问题解决方案

，盒子塌陷是什么？本应该在父盒子内部的元素跑到了外部。二，为什么会出现盒子塌陷？当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元...

绝地灬酷狼/ 2024年04月17日 06:03/ 0 赞/ 79 阅读

相关 Redis 热 key 是什么问题，如何导致的？有什么解决方案？

前言做一些C端业务，不可避免的要引入一级缓存来代替数据库的压力并且减少业务响应时间，其实每次引入一个中间件来解决问题的同时，必然会带来很多新的问题需要注意，比如缓存一致

矫情吗；*/ 2023年10月15日 08:01/ 0 赞/ 145 阅读

相关盒子模型 margin 塌陷问题

盒子模型 ![Image 1][] margin 外边距 padding 内边距盒子布局的稳定性：优先使用 width > padding > margin

古城微笑少年丶/ 2023年06月23日 03:00/ 0 赞/ 49 阅读

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

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

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

相关【CSS】盒子模型宽度计算（包括offsetWidth和clientWidth）

1. 前言在 CSS 中，形如 `<div>` 标签形成的方块，就是盒子模型。盒子模型的宽度会由多个因素引起变化，具体的计算方法如下部分所示。 2.

我会带着你远行/ 2022年10月10日 11:28/ 0 赞/ 32 阅读

相关盒子模型的宽度计算问题, 有什么问题，及解决方案

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。 ![Center][]

快来打我*/ 2022年08月05日 11:25/ 0 赞/ 28 阅读

相关 Java内存模型是什么，为什么要有Java内存模型，Java内存模型解决了什么问题等。。。

本文中，有很多定义和说法，都是笔者自己理解后定义出来的。希望能够让读者可以对Java内存模型有更加清晰的认识。当然，如有偏颇，欢迎指正。 ![640_tp_webp_w

浅浅的花香味﹌/ 2022年05月19日 12:09/ 0 赞/ 233 阅读

相关什么是盒子模型

盒子模型定义：盒子模型是指盒子的con（内容=width+height）、margin、padding、border这4部分。 <!DOCTYPE html>

喜欢ヅ旅行/ 2022年03月27日 13:36/ 0 赞/ 278 阅读

相关 html中盒子模型的基本知识点盒子大小的计算

盒子模型边框的样式有 solid dashed(虚线) dotted(点线) border-style:solid; 边框的宽度:border-style:1px; 边

怼烎@/ 2021年09月15日 11:28/ 0 赞/ 985 阅读