在规则方面，我们首先会澄清什么对象。就像篮球规则适合篮球游戏一样，CSS布局规则的应用范围是什么？这导致了视口的概念。
视口代表当前可见的计算机图形区域。通常与浏览器窗口相同，但不包括UI，菜单栏等。-即您浏览的文档部分。它是CSS布局的最大范围规则，即，视口是CSS布局规则下的最大容器。
布局视口和组成区域通常被认为是布局视口。因为查看端口的布局是缩放的，大小的大小也在变化。它在CSS的作用下也是最大的容器。
视觉视口和视觉视图端口是屏幕的视觉部分，不包括屏幕键盘，放大了该区域。视图端口与视口的布局相同或更小。
此外，视觉端口，上述的布局视图端口和视图端口（Visual ViewPort）并不是您唯一会遇到的部分。考虑了确切或部分显示在布局视图中的任何子视图端口。
我们通常认为将宽度和高度介质查询与浏览器窗口的宽度和高度进行比较。它们实际上相对于视口。
3.1。由于视图端口的缩放特性，CSS可以使用视图端口大小的长度单元来完成文档。您还可以使用媒体查询来完成文档，而媒体查询的作用也是视口。
3.2。由于坐标系的相应关系，坐标系可以计算坐标系中指定元素的偏移，并通过映射关系以产生视觉对话的效果来将其映射到其他元素。
3.2。借助界限，例如我们开发移动应用程序，我们通常需要考虑诸如刘海位置和操作栏位置之类的因素。
在理解布局规则下最大的容器之后，我们需要了解可以放置在容器中的元素功能。总的来说，它可以分为两个元素：块 - 级别的元素和内部关联元素，也有一个两者之间的特殊元素：内部级别元素
普通布局流（即文档流）是一个放置在浏览器视图端口中的系统和组织元素的系统。默认情况下，块 - 级别元素的内容宽度是其母体元素的100％。它的高度与其内容一致。它垂直放电。该块可以包含块 - 级别的元素和内部关联元素。通过设置。块级别的元素具有外距离折叠的特征。内部关联元素的高度宽度与内容一致，并且水平放电。如果块中没有足够的空间来容纳所有框，则可以更换框，并且称为框架。框架的高度受到银行内部元素的高度影响。
在CSS中，所有元素都放在独立的元素框中。了解这些“盒子”的基本原理是我们使用CSS实现准确布局和处理元素排列的关键。缩放框模型，我们将再次讨论。
CSS代表级联样式表。重要的是要理解第一个级别的级联 - 卡斯卡德的表达是理解CSS的关键。
StyleSheets Cascade - 简而言之，CSS规则的顺序很重要；当将同一级别的两个规则应用于元素时，实际使用规则会写在后面；实际使用规则。
1.1。如果您有多个规则和相同的权重，则将应用最后的规则。它可以理解为以下规则涵盖了先前的规则，直到最后一个规则开始样式。
1.2。优先事项
有一个特殊的CSS可以用来涵盖上述所有优先级计算，但是需要仔细地使用它。用于修改特定属性的值，可以涵盖普通规则的层。如果您想覆盖CSS也要声明，您需要在没有添加声明之前对较高规则添加声明。
也需要在上下文中理解继承 - 属于父元素上的某些CSS属性是由被子元素继承的，而某些属性则不能。哪个属性在很大程度上由常识确定。并且可以由元素属性控制
完整的CSS框模型应用于块 - 级别的框，内部框仅使用框模型中定义的内容的一部分。该模型定义了框的每个部分-margin，边框，填充和内容 - 可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准和替代（即）框模型。
如下所示：
在标准模型中，如果将框设置为框，则将普通的框模型设置为内容。板和边界以及设置的高度以确定整个框的大小。结果如下所示：
IE框型号框的大小添加到边框和内侧距离。在此模型的情况下，所有宽度都是可见的宽度，因此内容宽度是宽度减去边框和填充部分。默认浏览器使用一个标准模型。如果您需要使用替代模型，则可以通过设置来实现它。普通框型号和IE框模型之间的区别，如下所示：
此外，我们通过设置框属性（例如或OR）来控制框的外部显示类型内部显示类型通过使用类似的属性值。如果您将其设置在一个元素上，则外部显示类型为，但是内部显示类型已修改。基于此，我们可以根据框的内部和外部显示类型进行分类：弹性框模型和网格盒模型
弹性盒模型弹性框是一种维定的布局方法，用于按行或列放置元素。元素可以膨胀以填充其他空间并收缩以适应较小的空间。
当元素表现为弯曲盒时，它们会沿两个轴排列：
1.如何设置主轴方向
弹性框提供了这样的属性，该属性可以指定主轴的方向（放置了弹性框的位置） - 默认值为
2.内容更改
当您在布局中使用固定宽度或固定时，可能会在容器的弹性盒元素溢出中出现问题并破坏布局。
- 的缩写。
3.弹性项目的动态大小
这是一个缩写属性，最多可以指定三个不同的值
我们应该尝试使用缩写来减少代码的冗余。
网格框Model CSS网格是Web的两个维度布局系统。Grid是由一系列水平和垂直线组成的布局模式。一个网格通常具有许多列和行，以及线和列，列，列，列，列，列之间的间隙和列。这个缝隙通常称为天沟。
首先，将容器的属性设置为定义网络。就像弹性盒一样，将父容器更改为网格布局后，他的直接子iitem将成为网格项目。
1.定义网格排名属性的数量
2.网格差距
3.表达网络和隐藏网络格式
让我们了解明确的网络和隐藏的网络格式。显式网络是由我们或属性创建的。隐藏的网络是将其放置在网络中时生成的。显式网络与隐式网络之间的关系类似于弹性网络盒子和横轴。
简而言之，隐藏的网络是将无法放入格式的元素放置。浏览器会根据定义的显式网络自动生成网格的网格部分。
4.使用多个列自动填充
在某些情况下，我们需要让网格自动创建许多列来填充整个容器。通过设置属性，我们可以实现此效果，但是这次我们将在功能中使用关键字来替换确定的重复编号。
使用可以自动创建多个列以填充整个容器。
注意：弹性框和网格框。默认外部显示类型是在块的前提下产生的
了解布局规则的范围，客观对象和一些基本概念。接下来，我们将讨论规则的演变。从规则的出现开始，我们将逐步讨论CSS的开发，以使我们对规则的理解更为具体。
首先，我们浏览器的主要功能是为计算机用户提供纯文本文档的便利性。结果，在开始时，CSS规则生存在需求时正常文件流的布局规则中。
注意：上述第二部分的默认规则的说明。没有更长的启动。
有了用户的需求，还不足以浏览纯文本文档。慢慢出现在图形文档中，图片布局的外观，在规则中添加一些新元素，然后形成定位和浮动规则。
静态定位静态正常文档流，默认定位方法。
下图显示了文档流的默认定位方法：
相对定位相对保留原始文档流量位置，并确定需要将定位元件移至的位置
以下两张图是静态和再生之间的区别。静态是文档流中的默认定位方法。
绝对的绝对定位元素不再存在于正常文档布局流中。定位元素应位于“包含元素”，组合和精确布局的锚点中。
绝对定位元素的“元素”是哪个元素？这取决于绝对定位元素的父元素的正属性。
通过设置包含绝对定位元素的元素的上下文，指定了绝对定位元素的后者起点。
如果所有父元素都没有显着定义位置属性，则默认情况下默认情况下该位置属性是静态的。结果，绝对定位元素将包含在初始块容器中。此初始块容器的大小与该容器相同浏览器视图端口和HTML元素也包含在此容器中。简而言之，绝对定位元件将放置在HTML元素外部，并根据浏览器视口放置。
z-indexx
当我们在上下文中有多个定位元素时，当元素层堆叠时，我们可以使用属性更改元素堆栈顺序。默认，定位元素为z index as auto，实际上是0。
下图显示，由于父级元素设置了相对定位，因此绝对定位元件在父元件中作为锚点定位：
固定定位固定与绝对定位方法完全相同。只有一个主要区别：固定元件的绝对定位相对于HTML元素或其最近的定位祖先，而固定定位固定元件相对于浏览器视口本身。
下图将指示固定定位：
粘度定位粘性也具有可用的位置值，称为位置：粘性，它比其他位置值更新。它基本上是相对位置和固定位置的混合物。它允许定位元素表达为相对定位，直到滚动到阈值点（例如，从视口的顶部出发10个像素）。从那以后，它将成为固定的。
如下所示，设置了粘性定位：
随着定位的出现和丰富，我们将使用CSS布局来增加越来越多的。
接下来，让我们简要描述浮点的概念
最初，引入了Float属性，以允许Web开发人员获得简单的布局，包括漂浮在文本列中的浮动图像，并且文本在左或右侧包围。
但是，Web开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，因此浮动使用的范围扩大了。
浮点通常应用于图形，首次沉没，并设置多个列。
在出现弹性盒的概念之前，我们经常使用Float的规则来启动多列。
跨越图形布局和多个列的应用后，我们具有格式化上下文的概念。
块形式上下文（BFC）是网页的Visual CSS渲染的一部分。它是盒子块的布局与其他元素交互的区域。
简而言之，BFC已格式化了Box.BFC内容块具有以下特征：
BFC特征创建BFC的特征
BFC的出现解决了诸如删除浮动和格式环境之类的问题，从而带来了更多有关多列布局的应用程序。
上面讨论的弹性盒不再在这里扩展。
上面讨论的网格盒不再在这里扩展。
然后，有了多列布局的需求，CSS具有这些规则，例如弹性布局和网格布局。它为页面布局提供了更丰富和多样化的手段，并且在应用程序中越来越简单。
以上是CSS布局规则的开发过程。规则从简单开始，并逐渐变得丰富而多样，以满足布局的需求。
本文的内容来自MDN
https://developer.mozilla.org/zh-cn/docs/learn/css_layout
原始：https：//juejin.cn/post/7095243008534118437