不断创造，加速增长！这是我参与的“掘金日新项目” ·在六月挑战赛的第三天，点击这里查看活动详情
本文是
一篇翻译文章，有些内容难免理解有误，如果有错误，请见谅。请参阅文章末尾的原始链接。
前言
几年前，我对CSS有一个重要的认识。
在那之前，我仍在学习CSS，专注于我们在日常开发中编写的属性和值，例如z-index：10或justify-content：center。我想，如果我也能广泛地理解每个属性的作用，我就会对语言有更全面、更深入的理解。
我的主要理解是CSS不仅仅是属性的集合。它就像一个由这种相互关联的布局算法组成的尺度。每种算法就像一个复杂的系统，有自己的规则和秘密机制。仅仅了解这些特殊属性的作用是不够的，我们需要了解布局算法的工作原理以及它们如何使用我们设置的属性。你以前
是否曾经对熟悉的CSS感到不安，你以前用过很多次，但解释结果与预期的不同？这非常令人沮丧，让我们觉得语言不一致。为什么完全相同的 CSS 最终会有所不同？
触发因素是属性子集的复杂系统正在作用于它，并且存在更改属性行为的微妙上下文触发器。我们对这种语言模型的整体理解是不完整的，这给我们带来了“惊喜”。
当我们开始研究布局算法时，一切似乎都更有意义。困扰我们长期的问题将得到解决。我们会意识到CSS实际上是一种非常强大的语言，我们将真正开始享受编写它。
在本文中，我们将使用这些新视角来帮助我们理解 CSS 中发生的事情并破译常见问题。
布局算法
那么，什么是布局算法？您可能已经熟悉了一些css3理解，其中包括：
从技术上讲，它们被称为布局模式，而不是布局算法。但我发现“布局算法”是一个更有用的标签。
当浏览器呈现我们的 HTML 内容时，每个元素将使用默认布局算法估计其布局。我们可以选择具有特定 CSS 声明的不同布局算法来控制它们。例如，使用位置：绝对将元素切换为绝对定位。
让我们看一个示例，其中有以下 CSS 样式：
.box {
z-index: 10;
}
我们的第一步是确认将使用哪种布局算法来呈现 box 元素。基于之前的 CSS，我们知道我们正在使用流布局的形式。
流媒体布局可以说是最原始的布局，创建于互联网被视为大量超链接文档的时代。它有点类似于文字处理软件（如Microsoft Word）中使用的布局算法。
流式处理布局用作非表 HTML 元素的默认布局算法。除非我们故意修改所使用的布局算法，否则我们将默认为流式布局。
z-index 属性用于控制元素的堆叠顺序，以确定哪个元素在重叠时位于“顶部”。事实上：它不是在流布局之上实现的，流布局是创建文档流样式的布局，我们还没有看到允许元素重叠的文字处理软件。
如果你几年前问我，我会这样回答：
如果不将定位条件设置为“相对”或“绝对”，则无法使用 z-index，因为 z-index 属性取决于定位方法。
这并非完全错误，但对此存在一些误解。更准确地说，z 索引属性未在流式处理布局算法中实现。因此，如果我们希望此属性有效，我们需要选择另一种布局算法。
你可能认为我有点骗子，但这些小误会会造成很大的痛苦。例如，请看以下示例：
在这个反例中，我们使用 Flex 布局设置 3 个同级节点。中间节点：我们设置 z 索引，它生效。尝试删除它，并注意到它位于其他节点旁边。怎么会这样？我们也没有设定位置：相对！
这是因为 z 索引属性是在弹性框算法中实现的。当语言作者设计 Flexbox 算法时，他们决定设置 z-index 属性来控制堆叠顺序，就像在定位布局中一样。
这是一个关键的范式转变。CSS属性本身毫无意义，布局算法定义了它们的作用，以及如何在布局估计中使用它们。
需要明确的是，有些 CSS 属性在所有布局算法中的工作方式都相同。例如，颜色：红色无论如何都会使文本显示为黄色。但是，每个布局算法都可以覆盖任何属性的默认行为，而某些属性则不能。
下面的反例让我感到惊讶：您是否知道长度属性会根据布局算法实现不同的功效？下面是一个示例来说明：
.item 元素只有一个 CSS 属性，宽度：2000px，它的第一个实例以流式布局呈现，实际上长度为 2000px。在流式处理布局中，width 属性是一个“严格”属性，在设置时占用 2000px 的空间。第二个实例在 Felx 容器中呈现，这意味着它将根据 Flexbox 布局进行解释，其中宽度更像是一个“建议”。Flexbox 规范将此称为假定大小，并且对元素的大小没有强制性限制或影响。在适当的范围内，它的长度为 2000px，但如果放置在较小的容器中，它将被缩小以适应。
同样，框架的作用非常重要。在弹性框布局中css3理解，并不是说宽度属性很特殊。只是 Flexbox 布局算法和流式处理布局算法实现 width 属性的方式不同。
我们编写的 CSS 属性是输入，就像我们传递给函数的参数一样。由布局算法确定选择哪种处理方法来处理此输入。如果我们想了解 CSS，我们需要了解这个布局算法是如何工作的，仅仅知道这样的属性值的使用是不够的。
确定布局算法
CSS 没有供我们设置的布局模式属性，但是有几个属性我们可以调整我们使用的布局算法，它们有时会让我们在实践中感到棘手。
在某些情况下，应用于元素的 CSS 属性将导致它进入特定的布局模式。例如：
.help-widget {
/* 使用定位布局 */
position: fixed;
right: 0;
bottom: 0;
}
.floated {
/* 使用浮动布局 */
float: left;
margin-right: 32px;
}
在其他情况下，我们必须查看哪种布局适用于元素的父级：
<style>
.row {
display: flex;
}
</style>
<ul class="row">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
当我们使用 display： flex 时，我们实际上并没有将 Flexbox 布局应用于 .row 元素;相反，我们说它的子元素应该使用 Flexbox 布局来解释。用技术术语来说，display： flex 创建了 flex 格式上下文。所有直接子元素都位于此上下文之上，这意味着它们将使用 Flexbox 布局，而不是默认的流式处理布局。
display：flex 将内联元素（例如）转换为块级元素，因此这仍然会对父元素的布局产生一些影响。但是，这不会更改已使用的布局算法。
布局算法的变体
某些布局算法可以定义为多个变体。例如，当我们使用定位布局时，我们有几种不同的“定位方案”：
每个变体都像一个微型布局算法，尽管它们有一些共同点（例如，两者都可以使用 z-index 属性）。同样，在动态布局中，元素可以是块级的，也可以是内联的。
冲突
当在一个元素前面应用多个布局算法时会发生什么？
<style>
.row {
display: flex;
}
.primary.item {
position: absolute;
}
</style>
<ul class="row">
<li class="item"></li>
<li class="primary item"></li>
<li class="item"></li>
</ul>
所有三个列表项都是灵活布局容器中的子元素，因此应根据弹性框布局进行定位。但是中间元素设置位置：绝对以使其成为位置布局。据我了解，元素的渲染是基于一种主要的布局模式确定的，某些布局模式优先于其他布局模式。我不知道确切的层次结构，但位置布局通常胜过一切（可能是因为位置布局会影响文档流布局结构）。因此，在里面的反例中，中间元素将根据位置布局而不是 Flexbox 布局进行渲染。因此，弹性框布局估计仅适用于两个元素，而不是三个元素。就 Flexbox 布局而言，中间元素不存在，它不会影响布局算法。
通常，冲突是有意的，但是如果您注意到元素未以所需的形式呈现，则必须进行分析以确定它正在使用哪种布局形式。答案可能会让你震惊！
相对定位
一个困境是：如果每个元素都由单个布局算法渲染，我们如何理解相对定位？一旦设置了位置：相关元素，很明显它应该通过位置布局来渲染。它可以设置专门的定位布局属性顶部，左侧属性，但是，它也可以参与弹性框/网格布局。这个问题在本文之前可能已经很复杂了，但现在我们可以这样解释：
每个元素都呈现在特定格式上下文中，由布局算法决定是否参与。 通常，定位布局算法会忽略此上下文，但它也会为相对定位规定例外情况。
在弹性框的上下文中呈现相对定位的元素时，定位布局算法将允许它参加。使用该上下文构建大小/位置后，它将应用定位布局内容（例如，通过顶部或左侧调整位置）。
它可以理解为一种组合，定位布局算法和Flexbox布局算法可以组合在一起，作用于相对定位的元素。
内联魔术空间
好吧，让我们看一个经典的“令人困惑的CSS”问题，看看专注于布局算法如何帮助我们解决它。
井。。。为什么图像下方有一些额外的空间？如果您使用开发人员工具查看它，您会注意到一些像素差异： 视频演示
图像高 250px，但容器高 258.5px！
如果您熟悉袋子型号，您就会知道您可以使用填充、边框、边距进行填充。您可能觉得图像上有一些边距设置，或者容器上是否有填充设置？在这种情况下，这些属性都不会生效。这就是为什么这么多年我仍然称它为“内联魔法空间”。它不是真正的罪魁祸首。要了解这里发生了什么，我们必须深入研究流程布局。
流布局
如前所述，流式处理布局是为文档流而设计的，类似于文字处理软件。该文档具有以下结构：
-> 单个字符被组合成短语和句子。这些元素并排设置为内联，当没有足够的水平空间时，会发生换行
->段落被视为块，例如标题或图片。这些块垂直堆叠，一个在另一个之上，从上到下排列。
流布局基于此结构，单个元素可以是内联元素（段落中的短语并排）或块元素（从上到下堆叠）。
路线因语言而异
在此示例中，我们假设使用的是水平、从左到右的语言，如德语。并非所有这些都是真的。某些语言，如阿拉伯语和希伯来语，是从右到左水平书写的。其他的与英语相似，在古代，它们是从上到下垂直书写的。
大多数 HTML 元素都有默认值。被视为
块级元素，被视为内联元素。内联元素应在段落中使用，而不是作为布局的一部分。例如，我们想在语句中间添加一个小图标。为了使内联元素不会对周围文本内容的可读性产生不利影响，需要添加一些额外的垂直空间。这就是为什么在前面的示例中为图像留出一些额外空间的原因。因为默认情况下，图像是内联元素。
流式处理布局算法将此图像视为段落中的字符，并在下面添加一些空间以确保它不会影响下一行的呈现。默认情况下，内联元素是基线对齐的。这意味着图像的顶部将与文本所在的水平线匹配。这就是为什么在图像下方有一些空间的动机 - 一个容纳后代的空间，例如字母j和p。
因此，这不是由于边距、填充、边框，这是流体布局适用于内联元素的固有空间。
解决上一个问题有
几种方法可以解决前面的问题，最简单的方法是将图像视为块级：
或者将布局窗体更改为其他布局模式
我们也可以通过使用行高将多余的空间压缩到 0 来解决这个问题
该解决方案通过将其设置为 0 来删除所有其他行宽，这会影响多行文本的可读性，但此示例不包含文本，因此这不是问题。
结论
那里
是CSS中的很多布局算法，它们都有自己的怪癖和隐藏的机制。当我们专注于CSS属性时，我们只听到冰山一角。我们从来不理解真正重要的概念，例如堆叠环境或包含块或级联起源！CSS是一种棘手的语言。我们没有错误提示、调试器或 Console.Log。我们的直觉是我们拥有的最好的工具。而且，当我们只是使用CSS片段而没有真正理解它们时，出现怀疑只是时间问题。因此，我们需要在日常熟练使用CSS属性的过程中深入了解不同的布局算法，这样才能防止一些意想不到的问题。
原文链接：
了解布局算法
其他了解信息：
CSS 流式处理布局
CSS定位布局浮动布局
，前端构造范式的浮动布局
目录 [1] 媒体类型 [2] 媒体属性 [3] 句型之后，说到响应式设计，肯定离不开媒体查询媒体。 通常认为媒体查询是CSS3的新内容。 其实CSS2已经存在了，CSS3增加了媒体属性和使用场景（IE8-浏览器不支持）。本文将详细介绍CSS2中的媒体查询内容媒体类型
×目录[1]媒体类型[2]媒体属性[3]句子模式
后来的话
说到响应式设计，肯定离不开媒体查询媒体。 通常认为媒体查询是CSS3的新内容。 其实CSS2已经有了，CSS3又增加了媒体属性和使用场景（IE8-浏览器不支持）。本文将详细解释什么是媒体查询
媒体类型
在CSS2中，媒体查询仅用在 和 标签中，并作为媒体属性存在
media属性用于为不同的媒体类型指定不同的样式
screen 计算机屏幕（默认值）
tty 电传打字机以及使用等宽字符网格的类似媒介
tv 电视类型设备（低分辨率、有限的屏幕翻滚能力）
projection 放映机
handheld 手持设备（小屏幕、有限的带宽）
print 打印预览模式 / 打印页
braille 盲人用点字法反馈设备
aural 语音合成器
all 适合所有设备
真正广泛使用并兼容所有浏览器的媒体类型是“屏幕”和“所有”
<style media="screen"> .box{height: 100px;width: 100px; background-color: lightblue;} </style> <p class="box"></p>
媒体属性
媒体属性是 CSS3 的新增内容。 大多数媒体属性都以“min-”和“max-”为前缀，用于表示“小于或等于”和“大于或等于”。这可以防止使用与 HTML 冲突的“”字符和XML
【注意】media属性必须用中括号()括起来，否则无效
下表列出了所有介质属性
width | min-width | max-width
height | min-height | max-height
device-width | min-device-width | max-device-width
device-height | min-device-height | max-device-height
aspect-ratio | min-aspect-ratio | max-aspect-ratio
device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
color | min-color | max-color
color-index | min-color-index | max-color-index
monochrome | min-monochrome | max-monochrome
resolution | min-resolution | max-resolution
scan | grid
[1] 颜色（颜色）
指定输出设备的每像素单位的位值。 如果设备不支持输出颜色，则值为0
将样式表应用于所有可以显示颜色的设备
<style> @media (color){ .box{height: 100px;width: 100px;background-color: lightblue;} } </style> <p class="box"></p>
[2] 颜色索引（color-index）
颜色索引指定输出设备中颜色查找表的条目数，如果不使用颜色查找表，则该值等于0
将样式表应用到所有使用至少256个索引颜色的设备（以下代码不显示，表示返回值为0）
<style> @media (min-color-index: 256){ .box{height: 100px; width: 100px;background-color: lightgreen;} } </style> <p class="box"></p>
[3]纵横比（aspect-ratio）
宽高比描述输出设备的目标显示区域的宽高比。 该值由两个以“/”分隔的正整数组成。表示水平图像素数（第一个值）与垂直图像素数（第二个值）的比值
将样式表应用于具有完美圆形或宽屏视口的设备
<style> @media (min-aspect-ratio: 1/1) { .box{height: 100px;width: 100px; background-color: lightgreen; } } </style> <p class="box"></p>
[4] 设备纵横比（device-aspect-ratio）
设备纵横比描述了输出设备的纵横比。 该值由两个以“/”分隔的正整数组成。表示水平图像素数（第一个值）与垂直图像素数（第二个值）的比值
将样式表应用于宽高比为 16:9 的特殊宽屏设备
<style> @media (device-aspect-ratio:16/9) { .box{ height: 100px;width: 100px; background-color: pink;} } </style> <p class="box"></p>
【5】设备高度（device-height）
device-height 描述输出设备的高度
将样式表应用到最小高度为 1000px 的屏幕上显示的文档
<style> @media (min-device-height: 1000px) { .box{ height: 100px;width: 100px; background-color: pink;} } </style> <p class="box"></p>
【6】设备长度（设备宽度）
device-length 描述输出设备的长度
将样式表应用于屏幕上显示的文档css3 媒体查询，最小长度为 1000px
<style> @media (min-device-width: 1000px) { .box{ height: 100px; width: 100px;background-color: lightblue; } } </style> <p class="box"></p>
【7】网格
Grid 确定输出设备是网格设备还是位图设备。 如果设备是基于网格的（例如电传打字机终端或只能显示一个字形的电话），则该值为 1，否则为 0
将样式表应用于非网格设备
<style> @media (grid:0) { .box{height: 100px;width: 100px; background-color: lightgreen;} } </style> <p class="box"></p>
【8】身高
高度描述输出设备渲染区域的高度（例如可视区域的高度或复印机纸箱的高度）
将样式表应用于视口高度小于 800px 的设备
<style> @media (min-height:800px) { .box{ height: 100px; width: 100px;background-color: lightgreen; } } </style> <p class="box"></p>
[9]宽度（宽度）
长度描述了输出设备渲染区域的长度
将样式表应用于可视区域小于 800px 的设备
<style> @media (min-width:800px) { .box{ height: 100px;width: 100px; background-color: lightgreen;} } </style> <p class="box"></p>
[10]黑白（单色）
B&W 指定黑白（灰度）设备的每像素位数。 如果不是黑白设备，则值为0
将样式表应用于非黑白设备
<style> @media (monochrome:0) { .box{height: 100px; width: 100px; background-color: lightgreen;} } </style> <p class="box"></p>
【11】方向
方向指定设备是处于横向（长度小于长度）还是纵向（高度小于长度）模式
值：横向（横屏）|纵向（竖屏）
将样式表应用于纵向设备
<style> @media (orientation: portrait) { .box{height: 100px;width: 100px;background-color: lightgreen; } } </style> <p class="box"></p>
【12】分辨率
帧速率指定输出设备的比特率（像素密度）。比特率可以用每英寸点数 (dpi) 或每分米 (dpcm) 表示
【注】有关屏幕三要素（屏幕规格、分辨率、像素密度）的内容移至此处
将样式应用到每英寸至少 90 点的设备
<style> @media (min-resolution: 90dpi) { .box{height: 100px;width: 100px; background-color: lightgreen; } } </style> <p class="box"></p>
[13] 扫描（扫描）
扫描描述了电视输出设备的扫描过程
值：逐行|隔行
句型
媒体查询包含现有的 CSS2 媒体类型（或称为媒体类型）和新的 CSS3 媒体属性，其中包含一个或多个表达式，这些表达式将被解析为 true 或 false
当媒体查询为真时，将根据正常的级联规则应用关联的样式表或样式规则。 尽管媒体查询返回 false，但标签上带有媒体查询的样式表仍然会被下载（只是不应用）
<link rel="stylesheet" href="style.css?7.1.2" media="print"> <p class="box"></p>
media 不是“print”，因此媒体查询为 false。并且，仍然下载 style.css 文件
逻辑运算符
运算符 not、and、only 和冒号 (,) 可用于创建复杂的媒体查询
和
and 运算符用于组合多个媒体属性css3 媒体查询，并将它们合并到同一个媒体查询中。仅当每个属性都为 true 时，此查询的结果才为 true
[注意] 在不使用 not 或 only 运算符的情况下，媒体类型是可选的，默认为 all
应用样式表满足横屏且最小间距700px的条件
@media all and (min-width: 700px) and (orientation: landscape) { ... }
因为媒体类型是可选的，不使用 not 或 only 运算符，默认是 all，所以可以简写为
@media (min-width: 700px) and (orientation: landscape) { ... }
或者
将多个媒体查询放在一起，用冒号分隔； 只要其中任何一个为 true，整个 media 语句就会返回 true，相当于 or 运算符
满足700像素或横屏最小间距的手持设备应用样式表
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
不是
not 运算符用于反转媒体查询的结果
【注意】not关键字只能应用于整个查询，不能应用于独立查询
@media not all and (monochrome) { ... }
//等价于
@media not (all and (monochrome)) { ... }
仅有的
only运算符表示仅当媒体查询匹配成功时才应用指定的样式。可用于防止所选样式在旧浏览器中应用
【注】经测试，无论是否使用唯一运算符，对结果没有影响
<style media="only screen and (max-width:1000px)"> .box{width: 100px;height: 100px;background-color: pink;} </style> <p class="box"></p>
事实上，在only、not、and和or（用冒号表示）这四种逻辑中，only and更常用
