CSS核心概念

CSS解析规则

CSS对空格不敏感，因此每个样式后面都要加一个分号，不然会把写在后面的样式当成一个整体来解析，知道遇到分号为止。
最后一个属性的分号不是必须的
当浏览器遇见不认识的属性或值时，将忽略掉这个属性，继续解析后面的属性，这也是前端需要做浏览器兼容的原因之一
对于复合属性，只要其中一个值是错误的，整个属性都将不解析而被丢弃
最后一个CSS规则的大括号可以不闭合，注意，是对整个CSS模块而言的最后的一个大括号。
后代选择器中间必须加空格
换行会被解析为一个空格
关键字不可以用引号，否则被忽略
在多组选择器中，只要有一个选择器是错误的，其他的也不会执行
使用@import规则导入的外部样式表必须放在其他样式规则前面，否则@import会被忽略

替换元素与非替换元素

元素可分为替换元素和非替换元素
替换元素：是指浏览器根据元素的标签和属性来决定元素的具体内容，比如image中的src
非替换元素：其内容直接显示在客户端的元素称为非替换元素

属性值的计算规则

浏览器解析文档并构建文档树之后，会给文档中每一个元素的属性分配一个属性值，这个属性值会经过4个阶段才最终被确定。这四个阶段别分是：（1）指定值；（2）计算值；（3）使用值；（4）实际值。
继承：子元素的某些元素的属性值会继承父元素中对应属性的值
使用inherit继承：可继承或不可继承的属性都可以通过inherit来继承父元素的某个属性

可视化格式模型

盒子模型
可视化格式模型：把产生的所有盒子按照一定的规则摆放到页面上，即规定每个盒子该怎么去布局。
可视化格式模型规则了浏览器在媒介中应该如何去处理文档树

可视化格式模型中元素的布局

每个元素都会产生0个或多个矩形框（有写在占用原来位置的矩形框的同时漂浮到其他位置），影响这些矩形框的布局的因素有如下：
1. 框的大小以及框的类型：框的类型由display指定。我们常见块级元素和行内元素记忆行内块元素
2. 定位类型：定位类型无非3种，常规流、浮动和定位
3. 矩形框之间相互影响
4. 外部因素：注入可视区域的大小等

视口 (viewport)

视口也叫可视窗口，HTML默认宽度就是可视窗口的宽度
当可视窗口的尺寸小于文档渲染的页面大小时，客户端应该提供滚动机制
每个页面只有一个可视窗口，但一个可视窗口可以渲染多个页面（比如iframe嵌入的页面）

包含块

有时一个元素的位置和大小的计算都相对于一个矩阵，这个矩阵被称为“包含快”。包含块是一个相对概念，是所含子元素的父参照。
包含块不限制它里面元素的大小，也即允许包含的元素比自己大，超出的部分会溢出，而溢出的处理可以通过overflow属性来控制。
根目录的包含块是初始包含块，由客户端决定。

包含块的创建

从包含块的角度理解盒子的定位类型，可以理解为包谁创建了包含块，盒子（子元素）就当谁是参照。
1. 当定位值为fixed时，则包含块由视口创建
2. 当定位值为relative、static或没有设置定位属性，则包含块由最近的父元素或祖先元素创建
3. 当定位值为absolute时，则包含块由最近的定位值relative/absolute/fixed创建。如果没有定位的祖先元素，则包含块为初始包含块（具体由客户端或浏览器决定）
4. 当祖先元素是行内元素时，那么包含块取决于父元素或祖先元素的direction属性

控制框

块级元素和块框：

块级元素是在视觉上被格式化为块的元素。另外通过display也可以将一个元素转变成块元素，其中产生块元素的值为block/list-item/run-in/table
块级元素除了table以外都会形成一个主块框，这个主块框之包含一种类型的框，要么是块框要么是行内框。主块框会为子孙元素建立包含块，从而生成内容。
主块框参与块级格式化上下文（Block Formatting Context，简称BFC）

匿名块框

行内元素和行内框

行内元素是指那些不生成新的内容块是元素，内容在行内显示，通过display也可以将一个元素转变为一个行内元素。其中可以产生行内元素的值为inline/inline-table/run-in，行内元素会生成一个行内框。

匿名行内框

插入框(run-in)

插入框所在的元素会根据其后面的元素来确定它的类型应该是什么
1. 如果后面的元素是行内元素或行内块元素，则生成一个块框
2. 如果后面的元素是块级元素，则生成一个行内框

格式化上下文BFC、IFC

格式化上下文分为块格式化上下文和行内格式化上下文。块框参与块格式化上下文，行内框参与行内格式化上下文。

块格式化上下文BFC

子元素item浮动了会导致父元素无法自适应子元素的高度，当给父元素加了 /* overflow: hidden; */后，父元素的高度就是item的高度。

<style>
    .box{
      /* overflow: hidden; */
    }
    .item {
        float: left;
        width: 100px;
        height: 100px;
        background-color: azure;
    }
</style>

<html>
    <head>
        <title>测试</title>
    </head>
    <body>
        <div class="box">
            <div class="item">hello world</div>
        </div>
    </body>
</html>

overflow的原理：overflow是这样处理的，如果元素没有设置宽和高，那么就将盒子里所有元素加起的高度作为父盒子的高度。
BFC的特点（主要）
1. 同一个块格式化上下文中，块框垂直排列，margin被合并
2. 一个块格式化上下文中，包含块里面的所有元素，但不包含创建了新块格式化上下文元素
3. 当一个框创建了一个块格式化上下文，它将包括浮动元素
何时创建块格式化上下文
1. 根元素（html）——— body呢？
2. 浮动float不为none的元素
3. 绝对定位元素postion为absolute、fixed的元素
4. display不为block的元素
5. overflow不为visible的元素
6. 弹性盒子display为flex/inline-flex的元素
7. 其他

折叠外边距

根元素html的外边距不折叠
不是兄弟元素，子元素和父元素垂直方向的外边距也会折叠
水平外边距不折叠
当有多个子元素时，第一个的margin-top和最后一个的margin-bottom会和父元素外边距折叠
其他