CSS权威指南 第3版.pdf

1 概述

1.1 CSS 世界的“世界观”

流：引导元素排列和定位的一条看不见的“水流”
流体布局：利用元素“流”的特性实现的各类布局效果
CSS2.1 兼容 IE8+
“流”的特性对

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

泛关键字：所有 CSS 属性都可以使用的关键字

百分号%不是长度单位，是一个完整的值

相对长度单位：

• 相对字体长度：em、ex、rem、ch
• 相对视区长度单位：vh、vw、vmin、vmax

绝对长度单位：px、pt、cm、mm、pc

变量：currentColor

功能符：rgba(0,0,0,.5)、url(‘lulu.png’)、attr(‘href’)、scale(-1)

焦点元素：像、 这样的元素，当我们使用键盘进行 Tab 键切换的时候，是可以被 focus 的，表现为虚框或者外发光
非焦点元素：指没有设置 tabindex 属性的

、等普通元素。

Firefox 认为 :active 发生在 mousedown 之后

3 流、元素与基本尺寸

3.1 块级元素(block-level element)

display: block | table | list-item
块级元素具有换行特性，因此都可以配合 clear 属性来清除浮动
IE 浏览器不支持伪元素的 display 值为 list-item

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

之所以 list-item 元素会出现项目符号是因为生成了一个附加的盒子，学名“标记盒子”(marker box), 专门用来放圆点、数字这些项目符号。IE 浏览器下伪元素不支持 list-item 或许就是无法创建这个“标记盒子”导致的

每个元素都有两个盒子：
外在的“外在盒子”：负责元素是可以一行显示，还是只能换行显示
内在的“容器盒子(内在盒子)”：负责宽高、内容呈现什么的

例如
inline-block：由外在的“内联盒子”和内在的“块级容器盒子”组成，因此既能和图文一行显示，又能直接设置宽高。
inline-table：由外在的“内联盒子”和内在的“table盒子”组成，因此既能和图文一行显示，又能显示成表格。

3.2 宽高作用的细节

流体特性主要体现在水平方向上
宽高作用于内在盒子(容器盒子)
即流体特性也就是作用于容器盒子的

3.2.1 width: auto 不同场景下的表现

• 充分利用可用空间(fill-available): 块级元素的宽度默认是100%于父级容器的
• 收缩与包裹(shrink-to-fit): 浮动、绝对定位、inline-block 元素 或 table 元素
• 收缩到最小(min-content)：table-layout 为 auto 的表格中

• 超出容器限制(max-content)：除非有明确的宽度限制或者内联元素设置了 white-space：nowrap

• 外部尺寸(Intrinsic Sizing): (fill-available) 尺寸由外部元素决定

• 内部尺寸(Extrinsic Sizing): 其他三种，尺寸由内部元素决定

3.2.1.1 外部尺寸与流体特性

3.2.1.1.1 正常流宽度
block 元素天生具备流特性，块级元素一旦设置了高度，流动性就丢失了
**借助block 元素流动性无宽度布局**：并不是看上去的宽度100% 显示这么简单，而是一种 margin | border | padding | content 内容区域自动分配水平空间的机制

3.2.1.1.2 格式化宽度
格式化宽度：绝对定位元素的非替换元素宽度大小相对于最近的具有定位特性(positon != static)的祖先元素计算

3.2.1.2 内部尺寸与流体特性

内部尺寸：假如这个元素里面没有内容，宽度就是0

3.2.1.2.1 shrink-to-fit
自适应性：元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸(除非容器尺寸小于元素的”首选最小宽度“）

应用场景：文字少的时候居中显示，文字超过一行的时候居左显示

<div class="box">
   <input id="conMore" class="content">文字内容</input> 
</div>

  .box {
     text-align: center;
     background-color: #cd0000;
     width: 500px;
   }
   .content {
     display: inline-block;
     text-align: left;
     background-color: yellow;
   }

3.2.1.2.2 min-content
当 (shrink-to-fit) 的元素的宽度设为0时：
东亚文字最小宽度为每个汉字的宽度
西方文字最小宽度由特定的连续的英文字符单元决定。（word-break:break-all 可以设置由字符决定)
图片这样的替换元素的最小宽度就是该元素内容本身的宽度

应用场景：利用连续英文单词不换行(首选最小宽度)的特性勾勒图形

    <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, Monaca, monospace;
    }
    .ao:before {
      content: "love你love"
    }
    .tu:before {
      content: "你love我"
    }
    .tu {
      direction: rtl;
    }

3.2.1.2.2 max-content
当 (shrink-to-fit) 的元素 设置 white-space: nowrap
如果内部没有块级元素或者块级元素没有设定宽度值，则“最大宽度”实际上是最大的连续内联盒子的宽度

应用场景：自定义滚动：

• 借助原生的滚动，scrollLeft/scrollTop 值变化，优点是简单，不足是效果呆板
• 根据内部元素的尺寸和容器的关系，通过修改内部元素的位置实现滚动效果，优点是效果可以很绽放。iScroll 模拟水平滚动，只能使用“最大宽度”，这样滚动到底的时候才是真的到底

https://github.com/cubiq/iscroll

<div id="wrap" class="wrap">
  <ul>
    <li><img src="./images/1.jpeg" alt="1"></li>
    <li><img src="./images/1.jpeg" alt="2"></li>
    <li><img src="./images/1.jpeg" alt="3"></li>
    <li><img src="./images/1.jpeg" alt="4"></li>
    <li><img src="./images/1.jpeg" alt="5"></li>
  </ul>
</div>

    .wrap {
      width: 300px;
      height: 200px;
      position: relative;
      overflow: hidden;
    }
    .wrap > ul {
      position: absolute;
      white-space: nowrap;
    }
    .wrap li {
      display: inline-block;
    }

    new IScroll('#wrap', {
      scrollbars: true,
      scrollX: true,
      scrollY: false,
    })

3.2.2 width 值

width 的值作用于 content box

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

嵌套一层标签，父元素定宽，子元素width: auto
子元素的 content box 宽度是100px

.father {
  width: 100px;
}
.son {
  border: 1px solid;
}

过深的嵌套会增加页面渲染和维护成本

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

盒尺寸(box-dimension): box-sizing改变 width 作用的细节
默认是content box
border box: content-box 和 padding 以及 border 一起自动分配 width 值
margin 的背景永远是透明的
Flex 布局： IE10+

解决替换元素宽度自适应问题：

input, textarea, img, video, object {
  box-sizing: border-box;
}

3.2.5 关于 height：auto

子元素高度的和

3.2.6 关于 height：100%

对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。
因此让元素支持 height：100%：

• 设定显式的高度值
• 使用绝对定位
  • 绝对定位元素的百分比：计算是相对于 padding box 的，就是会把 padding 大小值计算在内
  • 非绝对定位元素的百分比：相对于 content box 计算的

html, body {
    height: 100%;
}

div {
  height: 100%;
  position: absolute;
}

应用场景：图片上下切图布局示意

3.3 min-width/max-width/min-height/max-height

IE7+

初始值：

• max-*: none
• min-*: 0 | auto

3.3.3 超越!important, 超越最大

min-width > max-width > !important > style > css

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

<input id="check" type="checkbox">
<p>个人觉得，...</p>
<div class="element">
  <p>display:table-cell其他...</p>
</div>
<label for="check" class="check-in">更多↓</label>
<label for="check" class="check-out">收起↑</label>

.element {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s;
}
:checked ~ .element {
  max-height: 666px;
}

如果 max-height 值太大，在收起的时候可能会有”效果延迟“的问题，因此建议使用足够安全的最小值，这样，收起时即使有延迟，也会因为时间很短，很难被用户察觉，并不会影响体验。

3.4 内联元素

display：inline | inline-block | inline-table

: inline-block
: inline

可以和文字在一行显示

3.4.2 内联盒模型

3.4.2.1 内容区域(content area)

本质上是一个字符盒子(character box)
em-box,可看作是中文字符占据 1em 高度区域；
可以把文本选中的背景色区域作为内容区域，注意chrome浏览器下，::selection和图文混排或者有垂直padding的时候，范围会明显过大

3.4.2.2 内联盒子(inline box)

实际指的就是元素的“外在盒子”，用来决定元素是内联还是块级

3.4.2.3 行框盒子(line box)

每一行就是一个“行框盒子”，每个“行框盒子”又是由一个一个“内联盒子”组成的

3.4.2.4 包含块—包含盒子(containing box)

由一行行的“行框盒子”组成

3.4.3 幽灵空白节点(strut)

是个假想盒，存在于每个“行框盒子”前面，同时具有该元素的字体和行高属性的0宽度的内联盒

div {
    background-color: #cd0000;
}
span {
    display: inline-block;
}
<div><span></span><div>

4 盒尺寸四大家族

4.1 深入理解 content

4.1.1 content 与替换元素

替换元素：通过修改某个属性值呈现的内容就可以被替换的元素

• 内容可替换
• 内容的外观不受页面上的 CSS 的影响
• 有自己的尺寸
  • : 300*150
  • :0
  • CSS 属性上有自己的一套表现规则：如vertical-align非替换元素是指X的下边缘，替换元素是元素的下边缘
  • 不支持::before|::after伪元素

  替换元素的默认display值

  元素	Chrome | IE	Firefox
  	inline	inline