CSS世界 1-3章

这是读书笔记，将自己认为重要的，或是自己还不了解的知识点记录下来。

第1章

“流”：实际上是CSS世界中的一种基本的定位和布局机制，可以理解为现实世界的一套物理规则，“流”跟现实世界的“水流”有异曲同工的表现。
“流体布局”：指的是利用元素“流”的特性实现的各类布局效果。

第2章

2.1 专业术语

1.属性
属性对应的是平常我们书面或交谈时对CSS的中文称谓。比如：这个元素高度99像素。

2.值
值大多与数字挂钩。
一些常用的类型：

整数值，如z-index:1
数值，如line-height:1.5em中的1.5
百分比值，如padding:50%中的50%
长度值，如99px
颜色值，如#999

3.关键字
关键字指的是CSS里面很关键的单词，这里的单词特指英文单词。

4.变量
CSS中目前可以称为变量的比较有限。

5.长度单位
CSS中的单位有时间单位（如s、ms），还有角度单位（如deg、rad等），最常见的自然还是长度单位（如px、em等）。需要注意的是，诸如2%后面的百分号%不是长度单位！因为2%就是一个完成的值，是一个整体，你一定认为0.02是值，没错，2%也同样是值。
<number> + 长度单位 = <length>
长度单位可以分为相对长度单位和绝对长度单位。
1）相对长度单位。相对长度单位又分为相对字体长度单位和相对视区长度单位。

相对字体长度单位，如em和ex，还有CSS3新世界的rem和ch（字符0的宽度）。
相对视区长度单位，如vh、vm、vmin和vmax。

2）绝对长度单位：最常见的就是px，还有pt、cm、mm、pc等。

6.功能符
值似函数的形式指定（就是被括号括起来的那种），主要用来表示颜色（rgba和hsla）、背景图片地址（url）、元素属性值、计算（calc）和过渡效果等。

7.属性值
属性冒号后面的所有内容统一称为属性值。例如，1px solid rgb（0， 0， 0）就可以称为属性值，它是由“值+关键字+功能符”构成的。属性值也可以由单一内容构成。例如，z-index：1的1也是属性值。

8.声明
属性名加上属性值就是声明，例如：color：transparent；

9.声明块
声明块是花括号（{}）包裹的一系列声明，例如：

{
    height: 99px;
    color: transparent;
}

10.规则或规则集
出现了选择器，而且后面还跟着声明块，比如

.vocaulary {
    height: 99px;
}

11.选择器
选择器是用来瞄准目标元素的东西。

类选择器：指以“.”这个点好开头的选择器。很多元素可以应用同一个类选择器。“类”，天生就是被公用的命。
ID选择器：“#”打投，权重相当高。ID一般指向唯一元素。
属性选择器：指含有[]的选择器，形如[title] {}、[title="css-world"] {}、[title^="css-world"] {}、[title~="css-world"] {}、[title$="css-world"] {}等。
伪类选择器：一般指前面有个英文冒号（:）的选择器，如:first-child或:last-child等。
伪元素选择器：有连续两个冒号的选择器，如::first-line ::first-letter、::after和::before。

12.关系选择器
关系选择器是指根据与其他元素的关系选择元素的选择器，常见的符号有空格、>、～，还有+等，这些都是非常常用的选择器。

后端选择器：选择所有合乎规则的后代元素。空格连接。
相邻后台选择器：仅仅选择合乎规则的儿子元素，孙子、重孙元素忽略，因为又称为“子选择器”。>连接。
兄弟选择器：选择当前元素后面的所有合乎规则的兄弟元素。～连接。
相邻兄弟选择器：仅仅选择当前元素相邻的那个合乎规则的兄弟元素。+连接。

13.@规则
@规则指的是以@字符开始的一些规则，像@media、@font-face、@page或者@support，诸如此类。

2.2 “未定义行为”

当某个浏览器中出现与其他浏览器不一样的行为或样式表现的时候，就称为“未定义行为”。

第3章

从作用上来讲，块级负责结构，内联负责内容。

3.1 块级元素

“块级元素”：block-level element，常见：<div><li><table>。
注：“块级元素”和“display:block;”不是一个概念。例如，<li>元素默认的display值是list-item，<table>元素默认的display值是table，但是它们均是“块级元素”，因为它们都符合块级元素的基本特征，也就是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。
正是由于“块级元素”具有换行特性，因此理论上它都可以配合clear属性来清除浮动带来的影响。
每个元素都由两个盒子（外在盒子和内在盒子，内在盒子又叫作“容器盒子”）组成。外在盒子负责元素是可以一行显示，还是只能换行显示；内在盒子负责宽高、内在呈现什么的。
值为block元素的盒子实际由外在的“块级盒子”和内在的“块级容器盒子”组成，值为inline-block的元素则由外在的“内联盒子”和外在的“块级容器盒子”组成，值为inline的元素则内外均是“内联盒子”。

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

所有的块级元素都有一个主块级盒子，list-item除此之外还有一个附加盒子。
附加盒子，学名标记盒子（marker box），专门用来放圆点、数字这些项目符号。
每个元素都有两个盒子，外在盒子和内在盒子。外在盒子负责元素是可以一行显示，还是只能换行显示；内在盒子负责宽高、内容呈现什么事的。
内在盒子，专业名称叫做“容器盒子”。
按照display的属性值不同，值为block的元素的盒子实际由外在的“块级盒子”和内在的“块级容器盒子”组成，值为inline-block的元素则由外在的“内联盒子”和内在的“块级容器盒子”组成，值为inline的元素则内外均是“内联盒子”。

width/height作用在内在盒子，也就是“容器盒子”。

3.2 width/height作用的具体细节

width/height作用在内在的盒子，也就是“容器盒子”。

3.2.1 深藏不露的width:auto

width：auto；的4种不同宽度表现

充分利用可用空间。比如：<div><p>这些元素的宽度默认是100%于父级容器的。
收缩与包裹。典型代表就是浮动、绝对定位、inline-block元素或table元素。方便理解，可以叫做“包裹性”。
收缩到最小。这个最容易出现在table-layout为auto的表格中。当每一列空间都不够的时候，文字能断就断，但中文是随便断，英文单词不能断。
超出容器限制。除非有明确的width相关设置，否则上面3种情况都不会主动超过父级容器宽度的。也有一些特殊情况，比如white-space:nowrap。

尺寸也分为内部尺寸和外部尺寸。以上4种情况，只有第一种，也就是<div>默认宽度100%显示，是“外部尺寸”，其余全部是“内部尺寸”。而这唯一的“外部尺寸”，是“流”的精髓所在。

1、外部尺寸与流体特性

（1）正常流宽度。
无宽度、无图片、无浮动。
无宽度：少了代码，少了计算，少了维护。
所谓流动性，并不是看上去的宽度100%显示这么简单，而是一种margin/border/padding和content内容区域自动分配水平空间的机制。
（2）格式化宽度。
仅出现在“绝对定位模型”中，也就是出现在position属性值为absolute或fixed的元素中。在默认情况下，绝对定位元素的宽度表现是“包裹性”，宽度由内部尺寸决定，但有一种情况其宽度由外部尺寸决定的：当left/right或top/bottom对立方位的属性值同时存在的时候，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特性（position属性值不是static）的祖先元素计算。

2、内部尺寸与流体特性

所谓内部尺寸，简单来讲就是元素的尺寸由内部的元素决定，而非由外部的容器决定。
如何快速判断一个元素使用的是否为“内部尺寸”：假设这个元素里面没有内容，宽度就是0，那就是应用的“内部尺寸”。其有3种表现形式：
（1）包裹性。“包裹性”除了“包裹”，还有“自适应性”。
所谓“自适应性”，指的是元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸（除非容器尺寸小于元素的“首选最小宽度”）。换句话说就是，“包裹性”元素冥冥中有个max-width:100%罩着的感觉。
因此，对于一个元素，如果其display属性值是inline-block，那么即使其里面内容再多，只要是正常文本，宽度也不会超过容器。
“包裹性”对实际开发有什么作用呢？
页面某个模块的文字内容是动态的，可能是几个字，也可能是一句话。然后，希望文字少的时候居中显示，文字超过一行的时候居左显示。

<div class="box">
  <p id="conMore" class="content">文字内容-新增文字-新增文字</p>
</div>
.box {
      padding: 10px;
      background-color: #cd0000;
      text-align: center;
}
.content {
      display: inline-block;
      text-align: left;
}

（2）首选最小宽度。指的是元素最适合的最小宽度。
若外部容器的宽度是240像素，假设宽度是0，请问里面的inline-block元素的宽度是多少？是0吗？不是的，在CSS世界中，图片和文字的权重要远大于布局，此时所表现的宽度就是“首选最小宽度”。具体规则如下：

东亚文字（中文）最小宽度为每个汉字的宽度。
西方文字最小宽度由特定的连续的英文字符单元决定。
类似图片这样的替换元素的最小宽度就是该元素内容本身的宽度。

（3）最大宽度。就是元素可以有的最大宽度。如果内部没有块级元素或者块级元素没有设定宽度值，则“最大宽地”实际上是最大的连续内联盒子的宽度。（“连续内联盒子”指的全部都是内联级别的一个或一堆元素，中间没有任何的换行标签<bar>或其他块级元素。）

3.2.2 width值作用的细节

margin的背景永远是透明的。
宽度设定和表现并不合理的现象，总结为两点：
1）流动性丢失
对于块状元素，如果width:auto;则元素会如水流般充满整个容器，而一旦设定了width具体数值，则元素的流动性就会被阻断。
2）与现实世界表现不一致的困扰。
包含padding或border会让元素宽度变大的CSS表现造成的。
如何避免？方法之一就是采用书写方式约束，如使用“宽高分离原则”。

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

所谓宽高分离原则，就是CSS中的width属性不与影响宽度的padding/border（有时候包括margin）属性共存。

1、为何要宽高分离
在前端领域，一提到分离，作用一定是便于维护。比方说，样式和行为分离、前后端分离或者这里的“宽高分离”。
2、可能的挑战
“宽高分离”多使用了一层标签，HTML成本变高。没错。但是，实际上，如果不考虑替换元素，这世界上绝大多数的网页，只需要一个width设定就可以了。但，话又说回来，“无宽度”网页布局是需要很深的CSS积累才能驾驭自如的！！！
有没有既无须计算，又无须额外嵌套标签的实现呢？有，那就是可以改变width作用细节的box-sizing属性。

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

1、box-sizing的作用
box-sizing顾名思义就是“盒尺寸”。
box-sizing的实际支持情况如下：

.box1 { box-sizing: content-box; } /* 默认值 */
.box2 { box-sizing: padding-box; } /* Firefox 曾经支持 */
.box3 { box-sizing: border-box; } /* 全栈支持 */
.box4 { box-sizing: margin-box; } /* 从未支持过 */

width是作用在content box上的，所以设定了margin、border、padding元素后，元素宽度=content+padding+border+margin。

1、box-sizing的作用

顾名思义就是“盒尺寸”。

2、为何box-sizing不支持margin-box

margin的背景永远是透明的。

3、如何评价*{box-sizing:border-box}

存有问题：
1）这种做法易产生没必要的消耗。通配符应该是一个慎用的选择器，因为它会选择所有的标签元素。对于普通内联元素（非图片等替换元素），box-sizing无论是什么值，对其渲染表现都没有影响，因此，对这些元素而言就是没有必要的消耗；同时有些元素，如search类型的搜索框，其默认的box-sizing就是border-box，因此，*对search类型的<input>而言也是没有必要的消耗。
2）这种做法并不能解决所有问题。box-sizing不支持margin-box，只有当元素没有水平margin时候，box-sizing才能真正无计算，而“宽高分离”等策略则可以彻底解决所有的宽度计算的问题

3.2.6 关于height：100%

height和width有一个比较明显的区别就是对百分比单位的支持。对于width属性，就算父元素width为auto，其百分比值也是支持的；但是，对于height属性，如果父元素height为auto，只要子元素在文档流中，其百分比值完全就被忽略了。
例如

div {
    width: 100%; // 这是多余的
    height: 100%; // 这是无效的，这个div高度永远是0，哪怕父级<body>塞满了内容也是如此。
}

// 需要如下设置才行
html, body {
    height: 100%;
}

百分比高度值要想起作用，其父级必须有一个可以生效的高度值！！（或者使用绝对定位）

1、为何height: 100%无效

规范中指出：如果包含块的高度没有显式指定（既高度由内容决定），并且该元素不是绝对定位，则计算值为auto。要知道auto和百分比计算，肯定是算不了的：

'auto' * 100 / 100 = NaN

但是宽度的解释是：如果包含块的宽度取决于该元素的宽度，那么产生的布局在CSS 2.1中是未定义的。

2、如果让元素支持height:100%效果

1）设定显式的高度值。
2）使用绝对定位。
此时的height: 100%就会有计算值，即使祖先的height计算为auto也是如此。
需要注意的是，绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，区别在于绝对定位的宽高百分比计算是相对于padding box的，也就是说会把padding大小值计算在那，但是非绝对定位元素则是相对于content box计算的。

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

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

为了避免图片在移动端展示过大影响体验，常常会有下面的max-width限制：

img {
    max-width: 100%;
    height: auto!important;
}

height:auto是必须的，否则，如果原始图片有设定height，max-width生效的时候，图片就会被水平压缩。强制height为auto可以确保宽度不超出的同时使图片保持原来的比例。

3.3.3 超越!important，超越最大

CSS世界中，min-width/max-width和min-height/max-height属性间，以及与width和height之间有一套相互覆盖的规则。这套规则用一句比较通俗的话概括就是：超越!important，超越最大。

1、超越!important

超越!important指的是max-width会覆盖width，而且这种覆盖不是普通的覆盖，是超级覆盖，覆盖到什么程度呢？
max-width > !important > 直接在元素的style属性中设置CSS声明。

2、超越最大

超越最大指的是min-width覆盖max-width。

3.4 内联元素

3.4.1 哪些元素是内联元素

1、从定义看
首先要明白这一点：“内联元素”的“内联”特指“外在盒子”，和“display为inline的元素”不是一个概念！inline-block和inline-table都是“内联元素”，因为它们的“外在盒子”都是内联盒子。
2、从表现看
典型特征就是可以和文字在一行显示。
有一个问题：浮动元素貌似也是可以和文字在一个水平上显示的，是不是浮动元素也是内敛级别的呢？不是的，实际上，浮动元素和后面的文字并不在一行显示，浮动元素已经在文档流之外了。证据就是，当后面文字足够多的时候，文字并不是在浮动元素的下面的，而是继续在后面。这就说明，浮动根元素和后面的文字不在一行，只是它们恰好站在了一起而已。真相是。浮动元素会生成“块盒子”。

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

1）内容区域。
内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子；但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些元素，内容区域可以看成元素自身。

2）内联盒子。
内联盒子不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒子”，用来决定元素是内敛还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类：
如果外部含内联标签（<span>、<a>和<em>等），则属于“内联盒子”（实线框标注）；如果是个光秃秃的文字，则属于“匿名内联盒子”（虚线框标注）。

3）行框盒子。
每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。

4）包含盒子
<p>标签就是一个“包含盒子”（实线框标注），此盒子由一行一行的“行框盒子”组成。

3.4.3 幽灵空白节点

“幽灵空白节点”是内联盒模型中非常重要的概念，具体指的是：在HTML5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这一个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样。
注意，这里有一个前提，文档声明必须是HTML5文档声明（<!doctype html>）。
规范中实际上对这个“幽灵空白节点”是有提及的，“幽灵空白节点”实际上也是一个盒子，不过是个假想盒，名叫“strut”，中文直译为“支柱”，是一个存在于每个“行框盒子”前面，同时具有该元素的字体和行高属性的0宽度的内联盒。