CSS-解密 ???

[yaofly2012]

探索 CSS 的本质

Life of a pixel

盒模型
MDN CSS 基础框盒模型介绍
层叠
定位
布局（流式布局，Flex布局，Grid布局）
选择器

介绍下 BFC、IFC、GFC 和 FFC？

基本概念：

1. 视觉格式化模型（visual formating model）：DOM元素的可视化模型，渲染树的节点。
2. 容器块（Containing block）：用于其它盒模型定位计算尺寸的矩形框。一般父元素的盒模型是其子元素的容器块。简单说就是可以设置宽高的盒模型都是容器块。
3. 视口（ViewPort）：DOM布局的跟容器块。一般是浏览器的窗口或者其它可视区域。
4. 块级元素（block-level element）：display属性取值为block, table, list-item的元素。
5. 块级盒模型（block-level boxes）：参与块格式化上下文（block formatting context）的盒模型。块级元素产生块级盒模型，并（除了table,可替换元素）作为子元素和生成内容的容器块。 故并且并不是所有的块级盒模型都是容器块（比如table，可替换元素），反之并不是所有的容器块都是块级盒模型，比如display取值是inline-block，table-cell的元素。
6. 块盒模型（block boxes）：既是块级盒模型又是容器块。
7. 流内（in-flow）：非浮动，并且非绝对定位（fixed, absolute)，并且不是跟元素的元素。
8. 流外（out-of-flow)：非流内元素。

[yaofly2012]

盒模型

一、概念

表示元素的矩形盒子，由四部分构成。

MDN CSS 基础框盒模型介绍里说的很详细里。

1. margin（外边距）区域
2. border（边框）区域
3. padding（内边距）区域
4. content（内容）区域

1.2 区域尺寸控制

margin, border, padding区域粗细（比用“大小”描述更形象些）有专门的CSS属性指定。但是确定content区域大小却复杂很多。

1.3 行内元素

非可替换元素行内元素高度由line-height指定。并且margin/padding-top/bottom是无效的。

1.4 宽高计算 & box-sizing

CSS里width, height, max/min-width/height属性指定的什么？
CSS中width/height指的是什么？

1.5 历史的兼容性

IE盒模型的差异

1.6 box-sizing显示指定

二、display

一直以为display是用来控制元素是块元素还是行内元素的。这种理解是不对的，其实display用来控制布局的。
display: block/inline的更准确的描述是表示常态流布局下控制元素是块元素还是行内元素。

三、定位 & position属性

3.1 定位类型

CSS2.1有三种定位策略：

1. 常态流（Normal flow）：

默认的定位策略，包含块级（行内级）盒模型的块格式化（行内格式化），以及他们的相对定位。

2. 浮动（Float）

浮动定位中分为两步：首先盒模型先按照常态流布局，然后从流中取出，平移到最左边或者最右边。内容可能（没有clear）会跟随浮动的方向。
浮动定位的盒模型也不在常态流中，但是对后面元素的布局有影响。

3. 绝对定位（Absolutely positioning）

盒模型完全从常态流中移除，并且对后面元素的布局没有影响。根据容器块确定位置。并且根据容器块的不同，绝对定位又分为：

• 绝对定位（absolute）
• 固定定位（fixed)。

4. 粘性定位（sticky）

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

CSS3新引入的。既有相对定位又包含固定定位（但是相对于最近的具有滚动属性的祖先元素）。

1. 祖先元素必须指定overflow属性（即overflow属性取值为hidden, scroll, atuo, overlay）;
2. 元素须指定top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与ralative定位相同。

• top: 表示相对顶部位置固定
• right: 表示相对右边位置固定
• bottom: : 表示相对底部位置固定
• left: 表示相对左边位置固定

原理：

如果元素包含块(border区域）位置相对最近的滚动祖先元素的位置超过top/right/bottom/left 指定的阀值时：

• 则采用relative定位；
• 否则相对于**最近的滚动祖先元素*固定元素的位置（top/right/bottom/left 指定的位置）
  类似fixed定位，只不过不过相对于最近的滚动祖先元素固定。

如果同一个滚动的元素下面存在多个生效的粘性定位的子孙元素，则后面的会顶走前面的。

和relative的差异：

1. 都属于流内元素；
2. 相对的的元素不同。

应用

1. MDN Sticky positioning举例里基于首字母的列表。
   省市区列表中基于首字母分组展示。
2. 页面滚动时固定非顶部菜单。
3. 这里杀了个回马枪，还是说说position:sticky吧有个相对于底部粘性。

3.2 Issues/Concern

1. 浮动定位和绝对定位的盒模型都不在常态流中，但是浮动定位对后面的元素布局有影响，而绝对定位没有影响；
2. absolute和fixed定位区别是定位相对的容器块不同；

3.3 position属性

除了float定位，其他定位方式都是由position属性指定。

3.4 盒模型偏移量

定位元素（positioned element）

position属性值为非static的元素。定位元素的位置受top/right/bottom/left属性的控制。
注意：定位元素跟是否浮动没有关系。

top/right/bottom/left属性

定位元素包含相对定位和绝对定位。针对这两种定位top/right/bottom/left属性具有不同的意思：

属性	相对定位	绝对定位
top	表示盒模型相对于原来位置向下偏移距离	表示盒模型的上margin边界到定位容器块上border边界的距离
right	表示盒模型相对于原来位置向左偏移距离	表示盒模型的右margin边界到定位容器块右border边界的距离（左移距离）
bottom	表示盒模型相对于原来位置向上偏移距离	表示盒模型的下margin边界到定位容器块下border边界的距离（上移距离）
left	表示盒模型相对于原来位置向右偏移距离	表示盒模型的左margin边界到定位容器块左border边界的距离（右移距离）

其实本质上相对定位元素相对于是原位置容器，从这个角度看相对定义和绝对定位的top/right/bottom/left属性含义是一样的。

三、布局

1. 流式布局

常态流中的盒模型都属于一个格式化上下文（formatting context），块级盒模型参与块格式化上下文（block formatting context），行内级盒模型参与行内格式化上下文（inline formatting context）。

从上到下，从左到右一次布局。

块格式化上下文（BFC）

1. 盒模型在垂直方向上依次布局，水平方向占据整个容器宽度，跟盒模型本身的宽度无关，即不管本身盒模型宽度如何都占据容器块的整个宽度；
2. 盒模型的左Margin边界挨着容器块的左content边界（如果是right-to-left格式化，则右margin和右content边界相接），即使存在float元素；
3. Margin折叠。

行内格式化上下文（IFC）

如下

2. table布局

3. float布局

参考

1. MDN CSS 基础框盒模型介绍
2. CSS2 visuren
3. 杀了个回马枪，还是说说position:sticky吧
4. CSS Position Sticky Tutorial With Examples[Complete Guide]

[yaofly2012]

BFC(Block formatting context)

一、概念

A block formatting context is a part of a visual CSS rendering of a web page. It's the region in which the layout of block boxes occurs and in which floats interact with other elements.

BFC是CSS可视化渲染的一部分。它是一块区域，规定了内部块盒的渲染方式，以及浮动相互之间的影响关系。
从另一方面来说块元素布局效果（如margin合并等）和float布局效果只在BFC里进行的。

1.2 特性

1. 包含内部的float元素
   即BFC不会因为float子元素导致高度坍塌。可以作为清除浮动的方式

2. 排除外部的float元素
   BFC不会外部float元素发生重叠。可用于实现多列布局。
   当构建BFC区域的元素紧接着一个浮动盒子时，即，是该浮动盒子的兄弟节点，BFC区域会首先尝试在浮动盒子的旁边渲染，但若宽度不够，就在浮动元素的下方渲染。

3. 禁止margin 合并
   以免影响BFC外部布局。
   注意：只是禁止BFC元素和子元素之间的margin合并。并不影响BFC子元素直接的margin合并

4. 综上：BFC是就像一道屏障，隔离出了BFC内部和外部，内部和外部区域的渲染相互之间不影响。BFC有自己的一套内部子元素渲染的规则，不影响外部渲染，也不受外部渲染影响。

二、创建BFC

MDN Block formatting context罗列了产生BFC的各种情况。

三、用法

BFC会影响布局，但是一般我们创建BFC是为了定位和清除浮动。

四、FFC( Flex formatting context)/GFC(Grid formatting context)

1. 除了布局不同，其他同BFC；
2. 不包含float子元素。

参考

1. MDN Block formatting context
2. MDN clear
3. MDN float
4. 清除浮动的四种方式及其原理理解

[yaofly2012]

继承

求值过程

每个DOM元素的属性值的确定过程要经过4个阶段：

1.1 指定值【High】

指定值就是用户/作者定义的期望值（写在纸面上的，这一部分也是我们能控制的部分，也是重点研究的部分）。浏览器通过下面的 机制确定指定值：

1.2 计算值

在层叠过程中会把指定值解析成计算值。比如把URI转成绝对地址，'em', 'pt'转成'px'单位的值。

1.3 使用值

DOM有些属性的值得等到布局时才能计算出来（比如指定值为百分比的宽度属性）。结合计算值和相关的依赖计算出的值就是使用值。

1.4 真实值

使用值都是用户希望的渲染结果，但是浏览器可以能有些限制。真实值就是DOM最终渲染后的真实值。

二、继承（Inheritance）

2.1 可继承性

有些属性值可以被子元素继承的（比如color, font-size等），关于属性是否可以被继承参考具体的属性说明。子元素继承的父元素的属性的计算值。

2.2 取值为'inherit'的属性

每个属性可以取值为‘inherit'，表示继承父元素的值。并且对于不可继承的属性如果取值是'inherit’，则强制继承父元素属性值。

三、@import规则

3.1 用处

@import规则用来导入外部CSS文件。
格式：@import '' | url('') [mediaType]+，多个媒介类型用逗号隔开。可以放在style元素和CSS文件中。
在style元素中：

<style type="text/css">
@import 'index.css'; /* OR @import url('./index.css');*/
</style>

在CSS文件中：

@import 'detail.css';
.c_order p{ /*0011*/
	color: red;
	background-color: #ccc
}

3.2 规则

1. @import必须放在其他样式声明之前，除了@charset规则，注释，以及其他@import规则。

@import "subs.css"; 
h1 { color: blue }
@import "list.css"; /* 该@imprt无效，没有放在其他CSS声明之前 */

2. @import不能放在声明块中

@media print {
  @import "print-main.css"; /* 无效，不能放在Block中 */
  body { font-size: 10pt }
}

3. 浏览器在解析时会忽略无效的@import规则。

3.3 与link的区别

两者在引入样式表的功能上没有区别，偏向使用link方式。
What's the Difference Between @import and Link for CSS?

参考

1. CSS2 cascade

[yaofly2012]

层叠（Cascade）

对开发来说了解层叠的过程是必须的。先知道浏览器如何确定指定值，才能更好的指定CSS样式。

确定样式依赖：

1. 样式来源（Orgin）；
2. 重要性（Importance）；
3. 精确度（Specificity）；
4. 出现先后。

前3个因素构成样式的权重。层叠流程大致如：

来源（Origin）& 重要性（Importance）

一般样式有3个来源：浏览器默认样式，浏览器用户导入的样式，开发者指定的样式。他们的权重由小到大分别是：

1. 浏览器默认样式；
2. 浏览器用户指定非important样式；
3. 页面作者指定的非important样式；
4. 页面作者指定的important样式；
5. 浏览器用户指定的important样式。

其中页面作者和浏览器用户指定的样式关系比较令人深思：浏览器采用一种平衡策略来平衡两者的关系。
有些用户可能有一些特殊阅读需求（比如大号字体），浏览器也提供了该功能，即通过!important声明来提供声明权重。

/* From the user's style sheet */
p { text-indent: 1em ! important } /* 覆盖页面作者的声明 */
p { font-style: italic ! important } /* 覆盖页面作者的声明 */
p { font-size: 18pt }


/* From the author's style sheet */
p { text-indent: 1.5em !important }
p { font: normal 12pt sans-serif !important }
p { font-size: 24pt } /* 覆盖用户的声明 */

精确度（Specificity）

如果通过来源和重要性确定的权重相同，就得计算选择器的精确度，精确度越高权重越高。

计算规则：

根据选择器的类型和样式来源分为四类：

• a: style方式；
• b: ID Selector；
• c: 属性选择器，类选择器，伪类选择器 ；
• d: 标签选择器，伪元素选择器。

这四类依照abcd的顺序构成一个数，该数字就是选择器的精确度（Specifity)，数字越大权重越大，采用权重大的选择器指定的样式，如果权重一样则后声明的覆盖先声明的。

a，b，c，d的取值规则：

1. 如果元素存在style声明的属性，则a=1, 否则a=0
2. b= 选择器中元素ID的数量
3. c=选择器中属性和（伪）类的数量
4. d=选择器中（伪）元素的数量

*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0  什么也没有*/
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1  一个标签名*/
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 一个标签名，一个伪元素，故d=2*/
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 两个标签名*/
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 三个标签名*/
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 一个标签名，一个属性名*/
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 三个标签名，一个类名*/
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 一个标签，两个类名*/
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 一个ID*/
 ul[id="list"] {}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 一个标签，一个属性。注意没有包含ID选择器，虽然属性里是判断ID的*/
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 style属性指定*/

出现先后

如果精确度也相同，则后出现的覆盖先出现的。

参考

1. CSS2 cascade

[yaofly2012]

一、float

1.1 概念

好吧，之前确实没真的了解什么是float元素：

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.

1. 浮动盒模型尽可能的向左（右）平移一直到碰到容器块的左（右）内容边界或者其它浮动盒模型的右（左）Margin边界，并且如果同行中存在行盒模型则他们上Margin边界对齐，同行中所有浮动盒模型也上Margin对齐
2. 如果水平方向上不能容下浮动盒模型（即剩余区域的宽度比浮动盒模型小），则浮动盒模型就向下移动直到找到合适的宽度的区域；
3. 浮动盒模型不在流中，按理说它应该不影响之后元素的布局。对应块格式上下文确实如此，但对于行格式上下文去并非如此：和浮动盒模型相邻的行盒模型会适当缩短给浮动盒模型腾出空间，即浮动盒模型会影响行盒模型的宽度。

1.2 特性

float布局的初衷就是为了实现文本环绕图片效果。float元素具有两个特性：

1. 属于流外元素；
2. 不和inline元素重叠。

1.3 和position属性冲突

1. float只对非绝对定位元素才有效；
   position: relative的float元素先进行float布局，然后再是position: relative的效果，比如指定了top/right/bottom/left属性。

2. 绝对定位元素（absolute, fixed）的float属性是无效的。
   即流外元素的absolute和fixed的优先级要比float要高。

二、清除浮动

清除浮动一般有两个目的：

1. 单纯的实现元素展示在float元素下面；
   利用clear清除浮动

2. 防止父元素高度坍塌。
   清除浮动方式除了利用clear外，还可以利用BFC。

2.1 clear外，还可以利用BFC

sets whether an element must be moved below (cleared) floating elements that precede it

即：指定一个元素是否必须移动到在它之前的浮动元素下面。
前面的元素：元素本身或者父元素前面的兄弟元素。

2.2 BFC

如上

参考：

1. MDN clear
2. 清除浮动的几种方式，各自的优缺点
3. 清除浮动的四种方式及其原理理解

[yaofly2012]

IFC (Inline formatting context)

一、IFC特性

1. 行盒模型的宽度取决于其包含的行内盒模型宽度以及该行中是否有浮动元素，高度受line-height属性控制；
2. 行内盒模型在水平方向上依次布局，并且水平方向上的margin，border，padding影响布局

• 垂直方向的margin, padding无效，
• 垂直方向border能显示，但不影响布局，即不影响高度。

3. 包含行内盒模型的矩形块构成一个行，称为行盒模型（行内盒模型都在一个行内）；

4. 一般情况，行盒模型的左（右）Margin边界和容器的左（右）内容边界相邻；
   如果两个边界直接有浮动元素，则和浮动元素的相应Margin边界相邻。

5. 一个行内元素可能跨越多个行盒模型（折行文本）。

二、奇怪的空隙

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                width: 300px;
            }
        </style>
    </head>
    <body>
        <img src="icon.png" />
        <img src="icon.png" />
        <img src="icon.png" />
        <img src="icon.png" />
        <img src="icon.png" />
        <img src="icon.png" />
    </body>
</html>

2.1 水平方向空隙

原因

由书写代码时的换行符导致的。

解决方案

1. 代码压缩，去除换行符。

<body>
        <img src="icon.png" /><img src="icon.png" /><img src="icon.png" /><img src="icon.png" /><img src="icon.png" /><img src="icon.png" />
    </body>

2. font-size: 0；
3. 采用非流式布局，如flex布局；
4. inline盒模型改成block盒模型。

2.2 垂直方向的空隙

原因

linine元素是基于baseline对齐的，底部存在空隙的，对于图片尤为明显。

解决方案

1. font-size: 0；
2. vertical-align: bottom;
   底部对齐
3. 采用非流式布局，如flex布局；
4. inline盒模型改成block盒模型。