图书信息：《CSS设计指南（第3版）》（豆瓣）
原作名: Stylin’with CSS:a designer’s guide
这本书比较基础，适合初学者。自己已经很久没有专门读CSS方面的书了，就把这本买了半年多却一直未读的书拿出来翻了一翻。顺便查漏补缺。
##第1章 HTML标记与文档结构
目前，HTML一共有114个标签，但按照80/20原则，使用其中25个左右的标签就可以满足80%的标记需要。
超链接元素a的属性href的英文短语是：hyperlink reference。意为“超链接引用”。
####1.2.2 块级元素和行内元素
几乎所有HTML元素的
display属性值要么为block，要么为inline。最明显的一个例外是table元素，它又自己特殊的display属性值。
##第2章 CSS工作原理
###2.3 特殊的上下文选择符
通用选择符*：
这个选择符有一个非常有意思的用法，即用它来构成非子选择符，比如：
1 | section * a{font-size: 1.3em;} |
###2.4 ID和类选择符
可以给
id和class属性设定任何值，但不能以数字或特殊符号开头。
####2.9.3 计算特指度
这本书给的计算方法为“ICE”公式。这是个无穷大进制的三位数。依次代表id-class-element。
##第3章 定位元素
这里再次强调CSS的核心技术乃是定位：
要掌握CSS技术，核心就是要掌握元素定位，只有这样才能用CSS创造出专业水准的页面布局。
定位主要靠三个属性：position | display | float。
###3.1 理解盒模型
简写样式：
盒模型边距或边框的属性值简写模式按照上右下左来写。如果只写了3个，那么漏写的那个（一般也就是最后那个，左边）将使用对边的值。
####3.1.4 叠加外边距
垂直方向上的外边距会叠加。水平外边距不会叠加。
难怪在某本书上看到说，在布局控制方面，padding要比margin更好，就是因为前者定位明确。
###3.2 盒子有多大
盒模型结论一：没有（就是没有设置
width的）宽度的块级元素始终会扩展到天猫其父元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量等于水平边框、内边距和外边距的和。盒模型结论二：为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。实际上，盒子的
width属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度。
###3.3 浮动与清除
浮动非图片元素时，必须给它指定宽度，否则后果难以预料。图片无所谓，因为它本身有默认的宽度。
####3.3.2 围住浮动元素的三种方法
方法1：为父元素添加
overflow: hidden
方法2：同时浮动父元素
方法3：在父元素内容的末尾添加非浮动元素，可以直接在标记中添加，也可以通过给父元素添加clearfix类来添加（当然，样式表中得需要相应的clearfix规则）
###3.6 背景
背景图片是叠加在背景颜色之上的。
渐变是CSS帮我们生成的背景图片。添加渐变可以使用
background-image属性，也可以使用简写的background属性。
##第4章 字体和文本
这一章的4.4.2节 借助网格排版，给出了一个水平网格线背景下的文字排版，网格间隔18像素，仔细排版后确实很好看。
##第5章 页面布局
很多网站为了在第一屏极可能多的显示信息，都采用了多栏布局。这里所说的“第一屏”就是用户无需滚动就能看到的页面区域，相当于传统报纸行业所说的“折痕之上”的版面。
##第6章 界面组件
###6.1 导航菜单
:hover事件会沿着元素的结构层次“向上冒泡”。
下面是一个导航条+菜单示例。
###6.3 弹出层
如果要使用
figcaption，必须确保它在figure中是唯一的。而且，它要么是第一个子元素，要么是最后一个子元素。
在一个包含多个同辈元素的容器内，这些同辈元素都会构造一个 __堆叠上下文__。
z-index只对那些position值为static之外的元素有效。换句话说，涉及的两个元素必须是absolute、relative或fixed才行。
::after伪元素制作的三角形