什么是CSS

CSS被称为 层叠样式表，即是 Cascade Style Sheets 三个词的首字母缩写。每个字母代表的含义不同：

  • C（Cascade）：指的是层叠，在CSS中编写样式规则是一个一个排列下来，可以简单的理解为先后顺序
  • S（Style） : 第一个S，它指的是样式规则，比如body{color: red}
  • S（Sheets） ：第二个S，它指的是样式表，就是我们常说的.css 文件，CSS的代码会放置在样式表里

CSS进阶 - 图1

CSS简单却不容易

先上一张图：
CSS进阶 - 图2
如果从CSS的语法规则和属性的使用上来说，它的确非常地简单，因为你只需要知道选择器选中了HTML中的哪个元素，给他运用了什么样的属性和值，就能在浏览器中呈现出来，比如：

  1. body { color: #fff; background-color: #09f;}

上面几行简单的CSS代码，就可以让你在浏览器中看到一个蓝底白字的效果：
CSS进阶 - 图3
而且也不需要一个一个把所有CSS属性及属性的值都记在脑中，因为我们有很多方式可以查阅到，比如MDN上就有CSS属性列表：
CSS进阶 - 图4
这就是为什么说CSS简单的主要原因。
那么为什么说CSS不容易呢？这是有很多原因的，先拿大家认为CSS简单的规则来说：

  1. <div class="card">1</div>
  2. <div class="card__news">2</div>
  3. .card { width: 100px;}
  4. .card.card__news { width: 100%;}

想象一下，这两个div 的width 分别是什么呢？试问一下，你自己一看到上面的代码能自信，马上的说出正确的答案？如果你心理想的答案和自己验证得到的答案是一致的，那么恭喜你，你对CSS有一定的认知，至少不是菜鸟级。那么请继续往下看这个示例：

  1. <div class="a">Text</div>
  2. <div class="b">Text</div>
  3. <div class="a b">Text</div>
  4. <div class="b a">Text</div>
  5. .a { color: red; }
  6. .b { color: blue; }
  7. .a.b { color: orange; }
  8. .b.a { color: yellow; }

试问这四个div 的文本颜色分本是什么？
就此题可以让不少同学感到困惑。除此之外，CSS中还有很多基本概念，可以让你不再觉得CSS容易，比如:

  • 文档流
  • BFC和IFC
  • 盒模型
  • 层叠
  • 继承
  • 权重
  • 布局
  • 样式维护
  • 等等

    文档流

    在CSS中，文档流是一个很基础也是很重要的一个概念。它是CSS的一种基本定位和布局机制。流是一种抽象概念，暗喻这种排列布局方式像水流一样。

很多时候它被称为文档流（Document Flow，但在CSS的标准被称为Normal Flow，即普通流或常规流。大家更喜欢称之为文档流。

“流体布局”，就是利用元素“流”的特性实现的各类布局效果。

当浏览器开始渲染HTML文档时，从窗口的顶端开始，解析整个文档内容的过程中，会分配元素需要的空间。除非文档的尺寸被CSS规则限定，否则浏览器会垂直扩展文档来容纳全部的内容。每个新的块级元素渲染为新行（独占一行）。行内元素则按照顺序被水平渲染直到当前行遇到边界，然后换到下一行水平渲染。

BFC和IFC

想要理解BFC与IFC，首先要理解另外两个概念：盒子（Box）和 格式上下文（即 Formatting context）。

在CSS中，页面中任何一个元素都可以看成是一个盒子（Box），在普通文档流中，盒子会参与一种格式上下文（Formatting Context），这个盒子可能是块盒子（block-level-box），也可能是行内盒子（inline-level-box）。其中块盒子参与BFC（块级格式上下文），行内盒子参与IFC（行内格式上下文）。

如果从这方面来理解的话，普通文档流的就是这样的一个过程：

  • 在对应的块格式化上下文中，块盒子按照其在HTML源码中出现的顺序，在其容器盒子里从左上角开始，从上到下垂直地依次排列，并且独占一行，边界紧贴容器盒子边缘。
  • 在对应的行内格式化上下文中，行内盒子从容器的顶端开始，一个接一个地水平排列。

扯了这么多，如果简单的描述就是：如何排列HTML元素而已。拿个块格式化上下文的文档流来举例，就像下面这样：

  1. <div>1</div>
  2. <div>2</div>
  3. <div>3</div>
  4. <div>4</div>
  5. <div>5</div>

对应的效果如下：
image.png

盒子

盒子，又称CSS盒子，是CSS布局的基本单位。简单来说，一个页面就是由很多个盒子组成的（具体参考盒模型）。元素的类型和 display 熟悉决定了盒子的类型。不同类型的盒子，会参与不同格式上下文。

  • 块盒子会参与块级格式上下文。也就是说，元素类型为block、table、list-item的元素会参与块级格式上下文（BFC）。

  • 行内盒子会参与行级格式上下文。也就是说，元素类型为inline、inline-block、inline-table的元素会参与行级格式上下文（IFC）。

    格式上下文

    格式上下文是 W3C CSS2.1规范中的一个重要概念，它指的的是页面中的一块渲染区域，并且这个格式上下文有一套自己的渲染规则，它决定了其内部元素将如何定位，以及和其他元素之间的关系。
    常见的格式上下文有两种：

  • 块级格式化上下文（BFC）

  • 行级格式化上下文（IFC）

    BFC

    BFC的特点：

  • 在一个BFC内部，盒子会在垂直方向上一个接一个地排列。

  • 在一个BFC内部，相邻的margin-top和margin-bottom会叠加。
  • 在一个BFC内部，，每个元素的左外边缘（margin-left)， 会紧贴包含块的左边，即使存在浮动元素也是如此。
  • 在一个BFC内部，如果存在内部元素是新的BFC，并且存在内部元素是浮动元素。则该BFC的区域不会与float元素的区域重叠。
  • BFC就是页面上的一个隔离的盒子，盒子里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时，其内部浮动元素的高度也会参与计算。

如何创建一个BFC：

  • 根元素
  • 浮动元素(元素的 float 不是 none)
  • 定位的元素 (元素具有 position 为 absolute 或 fixed)
  • 非块级元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex
  • 块级元素具有overflow ，且值不是 visible

BFC的作用：