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

简单来说，CSS的核心是盒子、规则和布局，但往往是细节引起问题。

我们对此进行扩展，首先讨论最重要的盒子模型。
在标准模型中，宽度是内容+填充+边框。
去年我们跑了H5 项目，直接对1 00多个页面进行了样式修改。
还有一点就是奇怪的盒子模型。
IE6 等旧版本仍在使用。
width 属性特别烦人，因为它直接消耗所有边框和内边距。
还有一个非常重要的细节。
例如，在大小为 3 000 的项目中，合并边距会导致间距突然发生变化，必须使用clear 属性或更改布局来解决此问题。

一开始我以为BFC可以用绝对定位来创建，但后来发现我错了。
事实上，设置display:inline-block就可以了，但是你需要记住，浮动块为BFC创建了底层逻辑。
等等，还有一件事。
IFC 仅用于内联块，但在实践中它的使用频率比 BFC 少得多。
不要浪费时间学习。

最后注意：不要单独使用 flex 进行水平和垂直居中。
去年，我有一个项目，其中柔性包装设置不正确并且在大屏幕上未对齐。
我鼓励您更多地尝试网格。
简单粗暴，但仍然有效。

css盒子模型及盒子模型的类型

上周一位客户问我 HTML 元素的盒模型是什么。
我一听，就觉得这个问题问得好。
简单来说，盒模型是用来描述网页上每个元素占用多少空间的。
这相当于将网页的元素视为框。
该框包括边距、边框、填充和内容。

例如，我在2 02 3 年设计网站时遇到了这个问题。
我的客户都是非常注重细节的人。
他要求每个元素的边距严格遵循设计图纸。
这时候就必须考虑盒子模型了。

盒子模型有两种类型。
一种是W3 C的标准盒模型，另一种是IE的奇怪盒模型。
在标准盒模型中，元素的宽度仅由其内容宽度计算，其高度仅由其内容高度计算。
但奇怪的盒子模型的宽度包括边框、填充和内容宽度。

我客户的项目是针对主流浏览器的，所以我们需要使用标准的盒子模型。
然而，这可能会令人困惑，因为奇怪的盒子模型是某些旧浏览器中的默认模型。
在以后的设计中，我建议直接将 box-sizing 属性设置为 border-box，这样元素的总宽和高就是内容宽度加上 border 和 padding，这样布局会方便很多。

不管怎样，这个盒子的型号由你决定。
一旦你理解了它，网页布局就会变得更容易。
我仍然想知道是否应该找机会与我的客户更详细地讨论这个问题。
最后，这对于他以后的网站优化是非常有帮助的。

盒子模型简介

说白了，盒模型就是CSS中处理元素布局的基本概念。
它决定了页面上元素占用的物理空间。
其实很简单。
W3 C 标准盒模型和 IE 盒模型之间的主要区别在于计算元素的整体宽度和高度。

我们先来说说最重要的事情。
在W3 C标准盒模型下，元素的总宽度和高度是内容、内边距、边框和边距的总和。
例如，一个 1 00 像素宽的元素，加上 1 0 像素的填充和 1 像素的边框，实际上将占用 1 2 2 像素的空间。
这个规则在我们去年跑的项目中就遇到过。
当时，大约需要 3 ,000 个页面布局才能考虑到这一点。

还有一点，在IE框窗体下，元素的宽度和高度只包括内容、内边距和边框，而不包括边距。
因此，对于同一个元素，在 IE 框表单内，内容区域的宽度将自动设置为 7 8 px，以确保元素的总宽度保持为 1 00px。
这种差异在早期网页设计中是一个大问题，因为许多设计师和开发人员没有注意到它。

等等，还有一件事，CSS3 引入了box resize属性来解决不同浏览器中box模型差异的问题。
该属性允许开发人员指定元素用于计算的盒模型。
例如，设置为 border-box 可以更轻松地控制元素的整体大小，而不必担心 padding 和 border 对元素大小的影响。
我想很多人都没有注意到这一点，但它实际上在现代网页设计中非常重要。

最后提醒一下，框调整大小属性从IE8 开始就支持了，但是使用时，为了保证跨浏览器兼容性，开发者通常会添加浏览器前缀来支持旧版本的浏览器。
这些细节至关重要，而容易出现的风险就是忽视兼容性问题。