CSS 世界 阅读笔记:（Ch1-Ch3）

CSS 世界 阅读笔记:

对于CSS 这门语言，3 年学习80 分和10 年学习90 分对于产品价值的区别其实有限。
拨开眼前的面纱，定睛一看，会发现，缺的其实不是前端，而是优秀的、有资历的、技术有深度的前端开发人员。
在CSS 的世界里，页面上的任何看似简单的呈现都是由许许多多CSS 属性共同作用的结果。

Ch1 概述

1.1 CSS 世界的“世界观”

首先，将抽象的CSS 直接和具体的现实世界相对应，更加易于理解。其次，以完整的体系来学习CSS要比单纯关注属性值理解得更加深刻，可以培养从宏观层面认识与理解CSS 的习惯。再次，这也方便我们记忆，枯燥的代码总是过目就忘，鲜活的角色总是印象深刻。

1.2 世界都是创造出来的

CSS 全称是Cascading Style Sheets，翻译成中文就是“层叠样式表”。
CSS 世界的诞生就是为图文信息展示服务的。

1.3 CSS 完胜SVG 的武器——流

1.3.1 何为“流”

“流”实际上是CSS 世界中的一种基本的定位和布局机制，可以理解为现实世界的一套物理规则，“流”跟现实世界的“水流”有异曲同工的表现。所以，所谓“流”，就是 CSS 世界中引导元素排列和定位的一条看不见的“水流”。

1.3.2 流是如何影响整个CSS 世界的

（1）擒贼先擒王。因为CSS 世界的基石是HTML，所以只要让HTML 默认的表现符合“流”，那么整个CSS 世界就可以被“流”统治，而事实就是如此！
（2）特殊布局与流的破坏。如果全部都是以默认的“流”来渲染，我们只能实现类似W3C 那样的文档网页，但是，实际的网页是有很多复杂的布局的，怎么办？可以通过破坏“流”来实现特殊布局。实际上，还是和“流”打交道。
（3）流向的改变。默认的流向是“一江春水向东流”，以及“飞流直下三千尺”。然而，这种流向我们是可以改变的，可以让CSS 的展现更为丰富。因此，“文档流从左往右自上而下”这种说法是不严谨的，大家一定要纠正过来。

1.3.3 什么是流体布局

所谓“流体布局”，指的是利用元素“流”的特性实现的各类布局效果。因为“流”本身具有自适应特性，所以“流体布局”往往都是具有自适应性的。但是，“流体布局”并不等同于“自适应布局”。

1.4 CSS 世界的开启从IE8 开始

这里的“世界”特指的是CSS2.1 的世界，并不包括CSS3。

1.5 table 自己的世界

table 比CSS 还要老，也就是CSS 正式诞生之前，table 就已经出现了。前面提到了“流影响了整个CSS 世界”，其中并不包括table。table有着自己的世界，“ 流”的特性对table 并不适用。

1.6 CSS 新世界——CSS3

（1）布局更为丰富。
• 移动端的崛起，催生了CSS3 媒介查询以及许多响应式布局特性的出现，如图片元素的srcset 属性、CSS 的object-fit 属性。
• 弹性盒子布局（flexible box layout）终于熬出了头。
• 格栅布局（grid layout）姗姗来迟。
（2）视觉表现长足进步。
• 圆角、阴影和渐变让元素更有质感。
• transform 变换让元素有更多可能。
• filter 滤镜和混合模式让Web 轻松变成在线的Photoshop；
• animation 让动画变得非常简单。

Ch2 需提前了解的术语和概念

2.1 务必了解的CSS 世界的专业术语

1．属性：属性对应的是平常我们书面或交谈时对CSS 的中文称谓。
2．值：“值”大多与数字挂钩。
3．关键字：关键字指的是CSS 里面很关键的单词，这里的单词特指英文单词：transparent、solid、inherit 等
4．变量：CSS 中目前可以称为变量的比较有限，CSS3 中的currentColor 就是变量，非常有用。
5．长度单位：CSS 中的单位有时间单位（如s、ms），还有角度单位（如deg、rad 等），但最常见的自然还是长度单位（如px、em 等）。
长度单位又可以分为相对长度单位和绝对长度单位。
（1）相对长度单位。相对长度单位又分为相对字体长度单位和相对视区长度单位。
• 相对字体长度单位，如em 和ex，还有CSS3 新世界的rem 和ch（字符0 的宽度）。
• 相对视区长度单位，如vh、vw、vmin 和vmax。
（2）绝对长度单位：最常见的就是px。
6．功能符：值以函数的形式指定（就是被括号括起来的那种），主要用来表示颜色（rgba 和hsla）、背景图片地址（url）、元素属性值、计算（calc）和过渡效果等。
7．属性值：属性冒号后面的所有内容统一称为属性值。
8．声明：属性名加上属性值就是声明。
9．声明块：声明块是花括号（{}）包裹的一系列声明。
10．规则或规则集：出现了选择器，而且后面还跟着声明块。
11．选择器：选择器是用来瞄准目标元素的东西。
• 类选择器：指以“.”这个点号开头的选择器。很多元素可以应用同一个类选择器。
• ID 选择器：“#”打头，权重相当高。ID 一般指向唯一元素。
• 属性选择器：指含有[]的选择器。
• 伪类选择器：一般指前面有个英文冒号（:）的选择器。
• 伪元素选择器：就是有连续两个冒号的选择器。
12．关系选择器：关系选择器是指根据与其他元素的关系选择元素的选择器。
• 后代选择器：选择所有合乎规则的后代元素。空格连接。
• 相邻后代选择器：仅仅选择合乎规则的儿子元素，孙子、重孙元素忽略。>连接。
• 兄弟选择器：选择当前元素后面的所有合乎规则的兄弟元素。~连接。
• 相邻兄弟选择器：仅仅选择当前元素相邻的那个合乎规则的兄弟元素。+连接。
13．@规则：@规则指的是以@字符开始的一些规则。

2.2 了解CSS 世界中的“未定义行为”

Ch3 流、元素与基本尺寸

3.1 块级元素

“块级元素”对应的英文是block-level element，常见的块级元素有div 、li 和table 等。“块级元素”和“display 为block 的元素”不是一个概念。
正是由于“块级元素”具有换行特性，因此理论上它都可以配合clear 属性来清除浮动带来的影响。

3.1.1 为什么list-item 元素会出现项目符号

按照display 的属性值不同，值为block 的元素的盒子实际由外在的“块级盒子”和内在的“块级容器盒子”组成，值为inline-block 的元素则由外在的“内联盒子”和内在的“块级容器盒子”组成，值为inline 的元素则内外均是“内联盒子”。
现在，大家应该明白为何display属性值是inline-block的元素既能和图文一行显示，又能直接设置width/height 了吧！因为有两个盒子，外面的盒子是inline 级别，里面的盒子是block 级别。
实际上，如果遵循这种理解，display:block 应该脑补成display:block-block，display:table 应该脑补成display:block-table，我们平时的写法实际上是一种简写。

3.1.2 display:inline-table 的盒子是怎样组成的

外面是“内联盒子”，里面是“table 盒子”。得到的就是一个可以和文字在一行中显示的表格。

和文字平起平坐的表格：<div class="inline-table">
    <p>第1列p>
    <p>第2列p>
div>

.inline-table {
    display: inline-table;
    width: 128px;
    margin-left: 10px;
    border: 1px solid #cad5eb;
}
.inline-table > p {
    display: table-cell;
}

3.1.3 width/height 作用在哪个盒子上

在解释内外盒子的时候就已经提到过了：是内在盒子，也就是“容器盒子”。

3.2 width/height 作用的具体细节

3.2.1 深藏不露的width:auto

（1）充分利用可用空间。
（2）收缩与包裹。
（3）收缩到最小。
（4）超出容器限制。

<div class="father">
	<span class="child">恰如一江春水向东流，流到断崖也不回头span>
div>

.father {
  width: 150px;
  padding: 10px;
  background-color: #cd0000;
  white-space: nowrap;
}
.child {
  display: inline-block;
  padding: 5px;
  background-color: #f0f3f9;
}

在CSS 世界中，盒子分“内在盒子”和“外在盒子”，显示也分“内部显示”和“外部显示”，同样地，尺寸也分“内部尺寸”和“外部尺寸”。其中“内部尺寸”英文写作“Intrinsic Sizing”，表示尺寸由内部元素决定；还有一类叫作“外部尺寸”，英文写作“Extrinsic Sizing”，宽度由外部元素决定。
1．外部尺寸与流体特性
（1）正常流宽度。在页面中随便扔一个div 元素，其尺寸表现就会和水流一样铺满容器。这就是block 容器的流特性。这种特性，所有浏览器的表现都是一致的。表现为“外部尺寸”的块级元素一旦设置了宽度，流动性就丢失了。
（2）格式化宽度。格式化宽度仅出现在“绝对定位模型”中，也就是出现在position属性值为absolute 或fixed 的元素中。对于非替换元素，当left/top 或top/bottom 对立方位的属性值同时存在的时候，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特性（position 属性值不是static）的祖先元素计算。此外，和上面的普通流一样，“格式化宽度”具有完全的流体性，也就是margin、border、padding 和content 内容区域同样会自动分配水平（和垂直）空间。
2．内部尺寸与流体特性
所谓“内部尺寸”，简单来讲就是元素的尺寸由内部的元素决定，而非由外部的容器决定。假如这个元素里面没有内容，宽度就是0，那就是应用的“内部尺寸”。
（1）包裹性。按钮文字越多宽度越宽（内部尺寸特性），但如果文字足够多，则会在容器的宽度处自动换行（自适应特性）。
（2）首选最小宽度。所谓“首选最小宽度”，指的是元素最适合的最小宽度。

<span class="ao">span>
<span class="tu">span>

.ao,
.tu {
  display: inline-block;
  width: 0;
  font-size: 14px;
  line-height: 18px;
  margin: 35px;
  color: #fff;
}
.ao:before,
.tu:before {
  outline: 2px solid #cd0000;
  font-family: Consolas, Monaco, monospace;
}
.ao:before {
  content: "love你love";
}
.tu {
  direction: rtl;
}
.tu:before {
  content: "我love你";
}

（3）最大宽度。最大宽度就是元素可以有的最大宽度。如果内部没有块级元素或者块级元素没有设定宽度值，则“最大宽度”实际上是最大的连续内联盒子的宽度。

3.2.2 width 值作用的细节

width 是作用在“内在盒子”上的，“内在盒子”又被分成了4 个盒子，分别是content box、padding box、border box 和margin box。margin box 没有名字！content box 环绕着width 和height 给定的矩形。明摆着，width:100px 作用在了content box上。
（1）流动性丢失。
（2）与现实世界表现不一致的困扰。

3.2.3 CSS 流体布局下的宽度分离原则

所谓“宽度分离原则”，就是CSS 中的width 属性不与影响宽度的padding/border（有时候包括margin）属性共存。分离，width 独立占用一层标签，而padding、border、margin 利用流动性在内部自适应呈现。
1．为何要宽度分离。在前端领域，一提到分离，作用一定是便于维护。
2．可能的挑战。过深的嵌套是会增加页面渲染和维护成本的。实际上，如果不考虑替换元素，这世界上绝大多数的网页，只需要一个width 设定就可以了，就是最外层限制网页主体内容宽度的那个width，而里面所有元素都没有理由再出现width 设置。

3.2.4 改变width/height 作用细节的box-sizing

1．box-sizing 的作用
虽然box-sizing 被直译为“盒尺寸”，实际上，其更准确的叫法应该是“盒尺寸的作用细节”，或者说得更通俗一点，叫“width 作用的细节”，也就是说，box-sizing 属性的作用是改变width 的作用细节。改变了width 作用的盒子。
2．为何box-sizing 不支持margin-box。它本身就没有价值！
3．如何评价*{box-sizing:border-box}
（1）这种做法易产生没必要的消耗。
（2）这种做法并不能解决所有问题。
4．box-sizing 发明的初衷
在CSS 世界中，唯一离不开box-sizing:border-box 的就是原生普通文本框和文本域的100%自适应父容器宽度。

3.2.5 相对简单而单纯的height:auto

CSS 的默认流是水平方向的，宽度是稀缺的，高度是无限的。因此，宽度的分配规则就比较复杂，高度就显得比较随意。height:auto 的表现也基本上就是：有几个元素盒子，每个多高，然后一加，就是最终的高度值了。

3.2.6 关于height:100%

对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值！
1．为何height:100%无效
浏览器渲染的基本原理：首先，先下载文档内容，加载头部的样式资源（如果有的话），然后按照从上而下、自外而内的顺序渲染DOM 内容。如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。‘auto’ * 100/100 = NaN。
2．如何让元素支持height:100%效果
（1）设定显式的高度值。
（2）使用绝对定位。
绝对定位的宽高百分比计算是相对于padding box 的，也就是说会把padding 大小值计算在内。但是，非绝对定位元素则是相对于content box 计算的。

3.3 CSS min-width/max-width和min-height/max-height 二三事

3.3.1 为流体而生的min-width/max-width

在 CSS 世界中，min-width/max-width 出现的场景一定是自适应布局或者流体布局中。

3.3.2 与众不同的初始值

浏览器中的min-width/min-height 的初始值都是auto。
（1）min-wdith/height 值为auto 合法。（2）数值变化无动画。
min-width/min-height 的初始值是auto，max-width/maxheight 的初始值是none。

3.3.3 超越!important，超越最大

1．超越!important
超越!important 指的是max-width 会覆盖width，而且这种覆盖不是普通的覆盖，是超级覆盖。
2．超越最大
超越最大指的是min-width覆盖max-width，此规则发生在min-width和max-width 冲突的时候。

3.3.4 任意高度元素的展开收起动画技术

.element {
	max-height: 0;
	overflow: hidden;
	transition: max-height .25s;
}
.element.active {
	max-height: 666px; /* 一个足够大的最大高度值 */
}

但是，使用此方法也有一点要注意，即虽然说从适用范围讲，max- height 值越大使用场景越多，但是，如果max-height 值太大，在收起的时候可能会有“效果延迟”的问题。

3.4 内联元素

3.4.1 哪些元素是内联元素

inline-block 和inline-table 都是“内联元素”，因为它们的“外在盒子”都是内联盒子。
就行为表现来看，“内联元素”的典型特征就是可以和文字在一行显示。
浮动元素和后面的文字并不在一行显示，浮动元素已经在文档流之外了。证据就是，当后面文字足够多的时候，文字并不是在浮动元素的下面，而是继续在后面。

3.4.2 内联世界深入的基础—内联盒模型

（1）内容区域（content area）。内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子（character box）；但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些元素，内容区域可以看成元素自身。
（2）内联盒子（inline box）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒子”，用来决定元素是内联还是块级。
（3）行框盒子（line box）。每一行就是一个“行框盒子”，每个“行框盒子”又是由一个一个“内联盒子”组成的。
（4）包含盒子（containing box）。p 标签就是一个“包含盒子”（实线框标注），此盒子由一行一行的“行框盒子”组成。

3.4.3 幽灵空白节点

“幽灵空白节点”实际上也是一个盒子，不过是个假想盒，名叫“strut”，中文直译为“支柱”，是一个存在于每个“行框盒子”前面，同时具有该元素的字体和行高属性的0 宽度的内联盒。