CSS精要

颜色的十六进制

CSS中RGB的十六进制对应数 # 00 00 00 前两位代表红色R，中间两位代表绿色，最后两位代表蓝色B。
数字越大，代表颜色越深，00就是没有该种类的颜色。例如，纯红色的十六进制就是#FF0000，也可以简写为#F00。

CSS的选择器

类选择器：.classname{ }。
id选择器： #idname{ }。
元素选择器： h2{ }，p{ }。
后代选择器： ul em{ } 选择ul元素下面的em元素的样式，em与ul直接可以间隔1层或者多层。
子元素选择器： 只选择h1 元素子元素的 strong 元素，h1 > strong { }。
属性选择器： [title]{ }为所有具有title属性的元素设定样式
[title = “hi”]{ } 为title属性=hi的所有元素设定样式
[title~=“hi”]{ }为包含指定值的 title 属性的所有元素设置样式，比如某个元素 title具有多个属性，用空格分开 title = “hello hi” ，使用这种形式就能选中它。

CSS命名规范

比较常见的有BEM，NEC，AliceUI，具体规范的细则见这里。

主流的CSS方案

• 跟 JS 完全解耦，靠预处理器和比如 BEM 这样的规范来保持可维护性，偏传统
• CSS Modules，依然是 CSS，但是通过编译来避免 CSS 类名的全局冲突
• 各类 CSS-in-JS 方案，React 社区为代表，比较激进
• Vue 的单文件组件 CSS，或是Angular 的组件 CSS（写在装饰器里面），一种比较折中的方案

CSS样式的优先级

优先级最高的是 ！important 标注的样式。
其次是 在html代码中内嵌的 css。比如直接在标签里面加style = “color:red;”。
再其次是id选择器。
最后是类选择器。
如果是同一个级别的，那么在CSS代码中，后出现的选择器样式会覆盖先出现的选择器样式。

内联元素与块级元素

1.块级元素总是在新行上开始，内联元素与其他元素在同一行
2.块级元素可以设置元素的宽，高，内联元素不可以。内联元素的高取决于里面文字的样式大小。
3.块级元素可以包含块级元素或者内联元素，内联元素只能包括内联元素或者文字。

定位与浮动

绝对定位（position:absolute）：先将元素从文档流中删除，然后根据相对其父元素的绝对值定位，可以放到父元素下面的任何位置。定位后，该元素生成一个块级框，不论它原来是什么框。采用绝对定位的元素，已经不在文档流中，完全有可能覆盖了文档流中的元素。绝对定位里面的父元素不是直接意义上的父元素，而是在所有定义了position属性的父元素（包含祖父元素，祖祖父元素）中选择离它最近的那个。
举个例子，body中包括了div1 ，div1 包括了div2，div2包括了div3。现在我们来设置div3的position为absolute。首先它会去找参照物，首先看div2，div2有没有设置position属性。如果有，那么就以div2为参照。如果没有，那么继续向上找，找到div1，再看div1有没有设置position属性。如果有，那么就以div1为参照。如果一直找不到设置了position属性的父元素，那么div3只好以浏览器的窗口作为参考，进行绝对定位了。
position采用absolute的元素，找到参照物后，不管该参照物有没有设置padding，以参照物的左上角为原点进行定位。

相对定位（position:relative）：元素形状不变，相对应该有的位置偏移某个距离，原本的空间仍然保留。换句话说，它只是把显示的位置相对于原有位置偏移了，占据的位置仍然在文档流中没有挪动。

固定定位（position:fixed）: 与绝对定位类似，不过不是针对父元素进行绝对值定位，而是直接根据浏览器窗口进行绝对定位。

关于元素嵌套规则

前面说了块级元素可以嵌套块级元素，但是有几个例外。这几个特殊的标签是：
h1、h2、h3、h4、h5、h6、p、dt。它们只能嵌套内联元素。

IFC、BFC、GFC 与 FFC

FC（Formatting Context）格式化上下文。
IFC就是内联（行级）格式化上下文。IFC的行高由包含行内元素的最高实际高度决定，不受到垂直方向上的padding/margin影响。IFC主要用来设置行内元素的水平对齐，垂直对齐的方式。
比如垂直居中vertical-align:center, 水平居中text-align:center。

BFC就是块级格式化上下文。只要元素满足下面任一条件即可触发 BFC 特性：

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）。GFC将改变传统的布局模式，他将让布局从一维布局变成了二维布局。简单的说，有了GFC之后，布局不再局限于单个维度了。这个时候你要实现类似九宫格，拼图之类的布局效果显得格外的容易。

FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，display值为flex或者inline-flex的元素将会生成自适应容器（flex container）。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。