盒子模型简介

哎呀，说到块模型，那是 CSS 标记中的古董。
我在这个行业工作了很多年，见过太多前端新手在布局时感到困惑。

我们先来说一下W3 C标准块模型。
这是网页设计的基本规则。
记得2 007 年我刚进入这个行业的时候，那时候网页设计还是一个广阔的时代。
当时的盒模型是一个元素的总宽度和高度是四个部分的总和：内容、填充、边框和边距。
简单来说，元素空间的宽度等于内容的宽度加上padding加上边框加上margin的宽度，元素空间的高度也是一样的。
当时，如果您要设计一个 1 00 像素宽的元素，最后添加 1 0 像素宽的内边距和 1 像素宽的边框，则该元素占用的空间的实际宽度将变为 1 2 2 像素，因为内边距和边框都包含在宽度中。

有一个 IE 块模型与标准 W3 C 块模型略有不同。
在IE的盒模型中，元素的宽度和高度直接包括内容、填充和边框，但不包括边距。
记得有同事在做兼容性测试时，发现IE6 、IE7 的块模型与W3 C标准的块模型完全不同，这让他们很头疼。
当时，对于一个 1 00px 宽的元素，加上 1 0px 的内边距和 1 px 的边框，内容区域的实际宽度变成了 7 8 px，保证了元素的整体宽度仍然是 1 00px。

这两个盒模型之间的区别在于它们如何计算元素的整体宽度和高度。
W3 C 标准盒模型在整体尺寸中考虑了内边距和边框，而 IE 盒模型则在给定的宽度和高度内包含了它们。

后来，CSS3 中出现了box-sizing属性。
这个东西是为了解决不同浏览器下盒子模型差异的问题而设计的。
此属性允许开发人员指定元素使用哪个块模型进行计算。
content-box 为默认值，表示使用标准的W3 C盒子模型；边框表示使用IE块模型；继承意味着从父元素继承box-sizing属性的值。
通过设置box-sizing:border-box，开发者可以更轻松地控制元素的整体大小，而不必担心padding和border对元素大小的影响。
如今，这个东西经常被用在网页设计中，增加布局的灵活性和可预测性。

最后，box-sizing属性从IE8 开始就支持了，后来所有主流浏览器都支持了。
为了兼容性，开发者通常会添加浏览器前缀，例如-moz-、-webkit-等，以支持旧的浏览器版本。
嘿嘿，听起来很简单，但是做起来却很难。
当我刚开始从事前端工作时，我什至没有考虑过这一点。
现在回想起来，我感触颇深。

w3c盒子模型

W3 C盒子模型是用于网页布局的矩形盒子，包括内容、内边距、边框和边距。
简单来说，就是网页元素的大小和位置。

内容是盒子里面的内容，内边距是内容和边框之间的空间，边框是框架的线，边距是元素之间的距离。

宽度和高度只计算内容，其他所有内容都必须添加。
例如，宽度=内容+左右内边距+左右边框+左右外边距。

在 CSS 中，使用 width 和 height 来设置内容的大小，使用 padding 来设置内边距，使用 border 来设置边框，使用 margin 来设置外边距。

布局时，要注意边框和内边距的影响。
例如，当两个元素相邻时，边距可能会合并。

掌握盒子模型，您将能够创建自己的网页。

第四篇：前端🔥八股文-CSS

2 02 3 年，朋友刚学CSS，盒子模型是基础。
说起来容易，但理解起来却相当困难。
标准盒模型和奇怪盒模型，这个一定要记住清楚，奇怪盒模型很容易混淆。

上周在网上看到一个例子，元素宽度=内容宽度+padding+边框，这就是标准的盒子模型。
但在奇怪的盒子模型中，总宽度仅取决于宽度属性。
如果这两者不混淆的话，布局就会混乱。

保证金池是另一个问题。
块级元素的上下边距可以自动合并，可以通过clear属性来解决。
我以前也犯过这个错误，后来我才知道如何处理。

CSS 选择器和优先级也很重要。
选择器指定元素，优先级确定样式覆盖。
我有一个项目，优先级是错误的，而且风格也很混乱。
我花了半天时间才解决。

position属性蛮有趣的，static、relative、absolute、fixed，每个定位都有用。
我朋友喜欢用快。
有时效果很好，有时则不然。

伪类和伪元素也经常被使用，例如 :hover、:before 和 :after。
我尝试过使用伪元素来给元素添加内容，这很有创意。

BFC和IFC，我刚学了这两个，一个独立的渲染区域和一个只有内联元素的BFC。
BFC可以解决很多布局问题。
之前遇到过浮动导致父元素高度塌陷的情况，用BFC解决了。

水平和垂直居中，我通常使用flex或grid布局，非常方便。
要隐藏页面元素，display:none非常简单，但有时如果你不想完全删除它，你想使用其他方法。

CSS动画非常酷。
@keyframes定义了动画，这很有趣。
灵活的布局也很有用，这样元素就会自动适应屏幕的大小。

移动端需要Rem和viewport定制。
rem 单位可以方便地进行自定义，并且视口自定义可以处理比例。

要消除溢出，请使用clearfix类或设置overflow属性。
我也遇到过这方面的问题。

自适应方块非常实用。
设置长宽比，宽度为1 00%，高度用calc计算。

视频透明效果和文本溢出椭圆效果也非常有用。
视频透明度可以与背景融合，文字溢出省略让页面更加美观。

说了这么多，CSS其实还是挺复杂的，但是我觉得学起来很有趣。
你呢？

盒模型宽高值的计算方式，边界塌陷，负值作用，box-sizing

关于盒子模型的事情……我需要说清楚。
宽度和高度如何计算要根据情况而定。

W3 C标准模型是老规则。
比如写一个div，设置宽度为1 00px，高度为2 00px。
这1 00px和2 00px只算内容。
如果要计算整个div占用了多少空间，就得加上padding（内边距）、border（边框）、margin（外边距）。
例如，上内边距1 0px，左边框5 px，上边距2 0px...整个宽度的计算方式为：2 0px(上边距)+5 px(左边框)+1 0px(上内边距)+1 00px(内容)+1 0px(下内边距)+5 px(右边框)+2 0px(下边距)...你看，这加起来。

IE的奇怪模型是不同的。
像 IE6 和 IE5 这样的老浏览器很愚蠢。
如果将宽度设置为 1 00px，它将包括内容、内边距和边框。
所以，这 1 00px 已经被打包了。
计算整个宽度要简单得多：上边距+1 00px（内容+内边距+边框）+下边距。
就是这么简单粗暴。

边框塌陷主要依靠垂直块级元素。
在同级元素之间，例如两个层叠放置的 div，它们的边距将被合并。
如果将一个设置为 5 0px，另一个设置为 3 0px，则中间的距离将为 5 0px，而不是 8 0px。
父元素和子元素也是如此。
父亲设置了上边距，儿子又设置了，而父亲没有边框，也没有固定高度，所以儿子的边距覆盖了它，中间的距离取决于儿子。

对于负值，margin 和 padding 都可以设置为负值。
负保证金有什么用？ 一个常见的示例是您希望下部框部分覆盖上部框。
如果将下面的框的上边距设置为负值，例如-2 0px，它将向上推并覆盖上面的框的2 0px。
也可以采用布局调整，比如左右固定中间自适应，有时通过负边距来实现。

box-sizing属性用于切换计算方法。
默认是 content-box，这是 W3 C 类型。
如果你无聊，想用IE之类的简单模型，设置border-box就可以了。
写border-box，宽度1 00px，它会直接包含padding和border，你调整大小会方便很多。
这个东西在响应式设计中常用到。

就是这样。