《CSS权威指南》

前端学习笔记

重点篇章：

chapter 2 选择器
chapter 3 结构和层叠
chapter 7 基本视觉格式化
chapter 10 浮动和定位

Chapter 1 CSS和文档

CSS和文档

元素

+ 替换元素 | 非替换元素
+ 块级元素 | 行内元素

块级元素可嵌套行内元素，但反过来，则不行，不论是通过CSS来改变其display与否

首选样式表 与 候选样式表

<link rel="stylesheet" type="text/css" href="">
<link rel="alternate stylesheet" type="text/css" href="">

这个可以使用户手动选择所需要加载的样式表

引入样式的方法

• link
  
  • <link rel="stylesheet" type="text/css" href="">
• style
  
  • <style type="text/css">...</style>
• @import
  
  • 出现在 style 容器当中
  • <style type="text/css">@import url(style.css)</style>
  • 最好不要使用这种方法，因为其加载会在DOM之后，故会发生无样式空白闪烁的问题
  • 虽然在html文档当中使用 import会有问题，但是如果需要在 css文件中引用外部的css文件，这时候就非常有用了！放在所有样式前，@import url(绝对/相对url)
• 内联样式
  
  • <p style="color: red"></p>

向后可访问性
在一些较老的浏览器当中，无法识别style标签，但是会将其文本内容显示出来，为了解决这个问题，需要做一点小优化

<style type="text/css"><!--
    @import url(style.css)
    body {background: yellow;}
--></style>

Chapter 2 选择器

规则结构

选择器 + 声明块 {属性：值}

声明和关键字

通常情况下，CSS的关键字如果有多个，以 空格 分隔，但是，如果两个属性是表示相近的，并且都是数值表示，用 /进行分隔
h2 {font: large/150% sans-serif;}
斜线分隔了元素的字体大小和行高两个关键字

选择器类型

• ID选择器
  
  • !给多个元素赋予相同id，当给id写相关css属性的时候，这多个元素都会改变（不是只改变第一个的样式），但是在js当中，使用 getElementById()只会获取第一个
  • 但是由于 规范规定，id在文档当中是唯一的，所以~ 不必担心
• 类选择器
  
  • 多类选择器(.warning.urgen) !IE7以下不支持多类选择器，只会取最后一个类
• 元素选择器
• 派生选择器
  
  • 后代选择器
  • 兄弟选择器
  • 子代选择器
• 属性选择器 (a[href][title])
  
  • 支持多属性选择
  • [href^="bar"] [href&="bar"] [href~="bar"] [href|="bar"] [href*="bar"]
• 通配符选择器
• 伪类选择器
  
  • 静态伪类：link、visited
  • 动态伪类：focus、hover、active
  • 动态伪类可以用于任何元素上，不仅仅包括 a元素
  • 尽量避免使用动态伪类，因为改变了大小的话，其后的元素都要重新计算位置，导致回流，性能不好
  • 伪类可结合 a:link:hover:lang(fr)
• 伪元素(before、after、first-letter、first-line)
  
  • 所有伪元素都必须放在出现在该伪元素选择器的最后面 (!p:first-line em 是错误的)

Q1：the diffrence between h1#page-title and h1[id="page-title"]

A1：二者的区别在于 其特殊性不同， h1#page-title的特殊性为 101，而 h1[id="page-title"] 的特殊性为 11，二者由于写法上的不同，虽然表示同一个元素，但是如果二者同时出现，第一种方式的样式优先级会更高，会覆盖第二种，所以二者从本质上来说，还是不同的。

Q2：伪类 link visited hover active之间的顺序为什么很重要

A2：因为这四个的特殊性值都相同，都为10，所以，比如当 hover放在active后面话，那么当鼠标点击的时候，实际上，hover放在后面，其权重更大，故只会显示 hover的样式，而不会出现 active的样式。其他顺序同理。
推荐使用 LVHA

Chapter 3 结构和层叠

本章阐述CSS的 特殊性 继承 层叠

特殊性

特殊性值对于如何向文档应用声明很重要，因为不同的声明方式其作用不同。
特殊性值表述为4个部分，由用户代理自动完成计算特殊性

• 内联样式， 1,0,0,0
• 各个ID属性值， 0,1,0,0
• 各个类属性值、属性选择、伪类， 0,0,1,0
• 各个元素、伪元素，0,0,0,1
• 结合符和通配符对特殊性没有贡献
• !important声明 没有 特殊性值，但是其高于 内联样式

在写CSS的时候，如果发现改变写了但是却改变不了样式，那是因为特殊性值不够高，无法覆盖

继承

大部分的CSS属性都是可以继承的，一般情况下都不做特殊的考虑。但是，有些属性是不能继承的，常见于 外边距、内编剧、背景、边框等等

继承值 完全没有特殊性值，即 0 特殊性值的声明 都会比直接继承强，要解决这个问题，有些属性也有inherit的关键字，p {font-family: inherit} 就会比 * {font-family: Arial} 强

下面举一个例子说明继承完全无特殊值

#toolbar {
    color: white;
    background: black;
}

只要id为 toolbar的元素只包含纯文本而不包含其他内容，就能正常起作用，但是要是文本当中存在超链接a元素，用户代理就会占上风，因为用户代理可能包含以下规则 a:link {color: blue}，但是由于上面的 color: white对于 a元素来说，只是继承关系，其特殊性值为0，故用户代理会占上风。要去改掉这个的话，如下

#toolbar {color: white; background: black;}
#toolbar a:link {color: white}

层叠

层叠所解决的问题是，当特殊性值相同，比如都是0,0,0,1的时候，权重相等，那么应当如何解决他们的冲突呢？

遵循如下规则：
1. 找出相关的规则，这些规则都包含与一个给定元素匹配的选择器
2. 按显示权重对应用到该元素的所有声明排序。标志！important的规则的权重高于没有 !important标志的规则。按照来源对应用到给定元素的所有声明排序，共有三种来源：创作人员、读者和用户代理。正常情况下，创作人员的样式要胜过读者的样式。有!important的读者样式要强于所有样式。创作人员和读者样式都比用户代理默认样式强。
3. 按特殊性对应到给定元素的所有生命排序。有较高特殊性的元素权重大于有较低特殊性的元素
4. 按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现，其权重越大

总结起来，在声明权重方面要考虑5级。权重由大到小的顺序依次为
1. 读者的重要声明
2. 创作人员的重要声明
3. 创作人员的正常声明
4. 读者的正常声明
5. 用户代理的声明

所有对比样式最终是怎么样，考虑 权重、来源和特殊性，最后再考虑前后顺序。

Chapter 4 值和单位

颜色

• 命名颜色 (eg: maroon)
• 函数式 rgb
  
  • rgb(255, 255, 255)
  • rgb(100%, 100%, 100%) | 百分数可带小数
  • 当值不在 0 -255 或者 0-100%时，会将其弄为 0 | 255(100%)
• 十六进制RGB颜色 (eg: #FFFFFF)

长度单位

绝对长度单位 相对长度单位

绝对长度单位

• 英寸 in
• cm
  
  • 2.54cm = 1 in
• mm
• pt 标准印刷单位
  
  • 72pt = 1 in
• pc 印刷单位
  
  • 1pc = 12pt

相对长度单位

• em em-height 印刷度量单位
  
  • 根据元素的默认 px 值得不同而不同，如果一个元素的 font-size为14px，那么 1em = 14px
• ex x-height 印刷度量单位
  
  • 由字体当中 小写字母的 高度决定其大小
  • 通常，大部分浏览器，都默认 1ex = 0.5em
• px

Chapter 5 字体

字体系列主要讨论 font-family font-weight font-size font-style font-variant

字体系列 font-family

CSS定义了5种通用字体系列

• Serif
  
  • 字体成比例，并且有上下短线
  • Times、Georgia、New Century Schoolbook
• Sans-serif
  
  • 字体成比例，没有上下短线
  • Helvetica、Geneva、Verdana、Arial、Univers
• Monospace
  
  • 字体不成比例，其宽度是确定的
  • Courier、Courier New、Andale Mono
• Cursive
• Fantasy

1. 强烈建议，在设置字体系列的时候，带上 通用字体系列，即所谓的 候补策略
   font-family: Times, serif;
   这样能保证在用户代理上假如没有安装 Times的话，也会根据serif来选择一个用户已经安装的 Georgia也好或者其他相近的字体
2. 使用引号
   a. 如果字体当中存在空格或者其他，使用引号包含完整字体
   b. 如果不想使用 serif通用字体，而是想使用 特定 字体 'serif'，则加上引号，表示需要一个叫 serif的特定字体

字体加粗 font-weight

font-weight: 100

关键字 100-900

映射字体设计中的一个很常见的特性，即为字体制定了9级加粗度。
但是，通常情况下，都不是说 100一个粗度，200一个粗度。
通常用户代理 把 400 当做 normal，700 当做 bold
所以通常情况下，在字体没有指定 medium的情况下，100-500都表示 normal，600-900都表示 bold

字体大小 font-size

有7种 绝对大小

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
  缩放因子可能是 1.5 或者 1.2

不同用户代理的默认值不同，可能为 small | medium

相对大小
使元素的大小相对于其父元素的大小进行缩放

• larger
• smaller

缩放因子一般也为 1.2

百分数和大小

百分数值总是根据从 父元素 继承的大小来计算，即如果使用百分数来计算字体大小，首先看他父元素的字体大小为多少，再与百分数相乘，可叠加
百分数在某种程度上 等价于 em

字体样式 font-style

font-style: normal | italic | oblique | inherit

字体变形

font-variant: small-caps | normal | inherit

font属性

font: font-weight | font-style | font-variant | font-size/line-height | font-family

font: bold italic 200%/1.2 sans-serif;

前面三个关键字的顺序是随意的，可以使任何顺序，但是最后两个 font-size 和 font-family 顺序不可变，并且不可或缺，一定要有，，并且，font-size 总在 line-height之前

font-face 规则

@font-face {
    font-family: "My font";
    src: url(……);
}

但是吧，最好不用让用户代理去下载你的字体，因为这可能会花一些时间才能获取到字体文件，这会延迟文档的显示，或者至少延迟最终输出

Q1：为何上面的 line-height 为1.2 body字体大小为 12px时候，line-height 为30px

因为 line-height 的值为缩放因子的时候， 是根据自身元素的 font-size 来确定的，所以是 24px 的 1.2 倍，是 差不多 30px

Chapter 6 文本属性

缩进和水平对齐

缩进文本 (text-indent)
设置块级元素第一行的缩进，如果想要 行内元素设置相同效果，用内边距
text-indent: length | percentage | inherit

！注意一下，text-indent是可继承的，所以当父级元素设置了之后，后代也会继承该属性，也会首行缩进，如果不需要的话，记得设置为 0

水平对齐 text-align

text-align: left | center | right | justify | inherit

垂直对齐

行高 line-height
line-height: <length> | <percentage> | <number> | normal | inherit

line-height属性是指文本行基线之间的距离，而不是字体大小。

行间距 = line-height - font-size 有可能为负值

计算出行间距，再除以2，分别加于行内字体(一般情况下为内容区)的上下两部分，其结果就是该元素的行内框。所以换句话说，line-height可以改变元素的整体高度。即实际上其可以改变块级元素之间的行间距

！注意：
1. 行间距只能应用于 非替换元素
2. line-height 实际上只影响行内元素和其他行内内容，为什么这么说？

p {line-height: 0.25em}

如果p当中没有任何内容或者行内元素，实际上 line-height 并不会影响 p的高度。那至于为什么设置 p 的 line-height 可以实现 行内元素的垂直居中的原因是因为 line-height 有继承性，行内元素继承之后会计算出 半间距加在内容区的上下两部分，所以实现了居中。

具体的行框图 可以 看 书本的 图6-5 会一目了然

注意了 行高也是可以继承的，但是如果像下面的代码一样

body {font-size: 10px;}
div {line-height: 1em;}
p {font-size: 18px;}
<div>
    <p>1111</p>
</div>

则样式看起来的话，p的文本就会缩在一起，甚至有重叠部分。

解决办法：
1. 给p 重新设置 line-height 的值
2. 父元素设置 line-height 的值得时候，不是具体的长度，而是数字 1，即缩放因子，则会根据自己的 font-size的大小来决定 line-height 的值

垂直对齐文本 vertical-aligh

vertical-align 属性只应用于 行内元素 和 替换元素 和 表单元素，并且不可继承。

vertical-align不影响块级元素中内容的对齐。

vertical-aligh: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

实际上是改变 基线的对齐方式，而不是实现其垂直居中
默认情况下，浏览器都会讲基线与其父元素的基线对齐，即 baseline

vertical-align: <percentage> 的对齐方式是 指定的百分数为该元素的 line-height 的百分数，而不是相对于其父元素的 line-height。

字间隔和字母间隔

字间隔 word-spacing

word-spacing: <length> | normal | inherit

其中，normal 等同于 0

字母间隔 letter-spacing

同上，通常用在可以使用增加字母之间的间隔来达到 强调 的效果

以上二者，都有可能被 text-align: justify 所影响，如果是设置了 letter-spacing的具体值，则不会，但是 word-spacing一定会受影响

文本转换

文本转换 text-transform

text-transform: uppercase | lowercase | capitalize | none | inherit

文本装饰

文本装饰 text-decoration

text-decoration: none | underline | overline | line-through | blink | inherit

处理空白符

white-space: normal | nowrap | pre | pre-wrap | pre-line | inherit

那么，white-space 的用途，想想有米的时候，如果给你的设计稿当中，有部分字体就是要在另外一行进行显示，但是又不想用 br 这种方式，那么就可以使用 white-space: pre-wrap

--

Chapter 7 基本视觉格式化

基本框

即基本盒模型：

content + padding + border + margin

块级元素

一个元素的width被定义为从左内边界到右内边界的距离，即content部分

水平格式化

水平属性
margin-left | border-left | padding-left | width | padding-right | border-right | margin-right
这七个属性就是影院一个元素块在水平方向上的布局了。其中 只有 外边距 和 width 可以为auto值，其余都必须是 0 或者是 确定的数值

即正常情况下，内部元素块的元素宽度等同于包含块的宽度（包含块是元素外部第一个块级元素），那么假设有以下几种情况

1. margin和width都设置为100px，而包含块的宽度为400px，那么此时称为 格式化属性过分受限, 浏览器通常会将margin-right重新设置为auto，填补其空缺距离，但是如果是在从右向左的语言当中的话， 就是将margin-left设置为auto
2. 如果全都设置auto，此时会优先保障width最大化，即width占有包含块的全部宽度，而margin-left和margin-right 都设置为默认的0

上面所说的 内部元素块的元素宽度等同于包含块的宽度的含义是，七个水平属性的值加起来一定要等于包含块的宽度，啥意思？这就和margin可以设置为 负值 有关了，比如以下代码

div {
    width: 400px;
}
p {
    margin-left: 10px;
    width: auto;
    margin-right: -50px;
}

那么p的 width 应该是 440px
因为必须符合 10+0+0+440+0+0+（-50）= 400，所以width会被计算为 440 所以这样做导致的效果元素块会超过包含块的实际宽度，那么页面实际上也就会因此而向右多出 50px 的宽度，这就知道为啥以前会出现这种情况了
总之，其遵循 七个水平属性相加 = 包含块宽度

替换元素
替换元素的水平格式化可用上面所说的全部， 但是有一个地方不同的是，当width设置为auto的时候，非替换元素会尽量占据包含块的宽度，但是，替换元素则是为其内容的固有宽度

垂直格式化

垂直属性
同上，7个。这七个属性的值必须等于元素包含块的 height，同样的，也只有margin-top margin-bottom 和 height 可以设置为 auto，但是在正常流当中，margin设置为auto与水平方向上的不同，其垂直方向上设置auto时，默认为0，这就不能很好的实现 垂直居中

包含块没有设置height属性（默认情况下为auto）或者显示地设置起height属性为auto时，并且只有块级子元素的时候

1. 其默认高度 = 最高块子元素的外边框边界 到 最低块外边框边界 的距离，因此，子元素的外边距会"超过"包含块，所以这时候设置子元素的margin-top或者bottom时 无效的
2. 但是如果包含块设置了 border 或者是 padding 的话，则其高度为 最高子元素的外边距边界到最低子元素的下边距边界之间的距离

合并垂直外边距
包含块中的相邻的块级元素，如果都有margin-top 和 margin-bottom，那么会将相邻的top和bottom进行合并，取二者之间较大的作为其间距

负外边距
负外边距不仅影响垂直格式化，而且影响外边距如何合并。遵循如下规则

1. 如果相邻元素的垂直外边距都设置为负数，则会取外边距绝对值的最大值最为间距
2. 如果一个正一个负，则用 正外边距-负外边距的绝对值，进行合并，为其之间的间距

行内元素

行内格式化

行内元素垂直水平居中
https://codepen.io/yacent/pen/jVbrbP

行框高
行框高实际上指的是 line-height 所指示的高度，其不包含内边距、边框和外边距

实际上 vertical-align 的对齐方式，虽然说是修改基线的对齐方式，但是实际上，原理是说，比如

vertical-align: top
实际上是 将行内元素的 行内框 的顶端与包含该元素的行框的顶端对齐。

vertical-align: baseline
实际上是 将行内元素的 行内框的基线 与 包含该元素的行框的基线对齐

非替换元素的 内边距 和 边框 不改变行框高，也不会影响父元素的行框高。padding 和 margin 也不会影响行内文本的布局，只会影响左右，而不会影响垂直方向上的变化。
所以，才会有这么一个现象，display为 inline 的时候，设置 margin-top、margin-bottom、padding-top、padding-bottom 是无效的，并且设置 width 也是无效的 （前提：行内非替换元素）
所以如要想要行内元素的垂直方向上的 行内边距 和 外边距 起作用的话，可以将 display: inline-block

改变元素显示

display: none | inline | inline-block | block | ...

注意，display 改变的只是元素的显示角色，而不是其本质。(一个段落生成行内框饼不会把这个段落真正变成一个行内元素！)
所以，它只是影响元素是如何显示的，而不会影响或者改变它是何种元素。

行内快元素 inline-block
如果不做任何修改，行内快元素会作为替换元素放在行中，所以其默认对齐方式是元素底部与父元素的基线对齐

为什么要有行内块元素，首先行内块元素的话，相比于行内元素，其可以设置 width、height、padding-top(bottom) 、margin-top(bottom) 等，对外表现出inline的特性，对内又表现出 block，可以设置宽高。

Chapter 8 内边距、边框和外边距

基本元素框

宽度和高度

width 和 height 不能应用到 行内非替换元素 当中，不起作用。
但是行内替换元素(eg: 图片) 就可以设置 width 和 height

外边距和内边距

外边距 margin
默认值为 0，不过浏览器一般都提供了预定的样式

百分数和外边距：
如果为外边距设置百分数的话，其实根据包含块的 width 来进行计算而得到

至于为什么margin-top: 10% 也是根据 width的10%来计算，是因为如果按照包含块的 height来计算的话，将会无线循环，因为计算出来的高度叠加上去，包含块的高度又变了。这就是为何使用百分数是根据 width 来进行计算的原因了。

外边距值复制 值复制
p {margin: 0.25em 1em}规则如下

1. 如果缺少左外边距的值，则使用右外边距的值
2. 如果缺少下外边距的值，则使用上外边距的值
3. 如果缺少右外边距的值，则使用上外边距的值

<top>    <right>    <bottom>    <left>
  ↓      ↑  ↓           ↑          ↑
  |______|__|___________|          |
  |______|  |______________________|

看实际书写过程中 margin: 上右下左 缺少什么，再对应规则

外边距和行内元素
margin-top | margin-bottom 不会作用于行内非替换元素。但是会作用于行内替换元素(把行内替换元素 想象成 display: inline-block 即可)

内边距 与 外边距的特性一样，就不做阐述了，同上。

边框 border

border-width border-color border-style

border: 1px solid #000 顺序不重要，缺少某个值得时候，将采取默认值

简写过程中，采取默认值这一点要额外注意，你可能会写了如下的代码

h1 { border: 1px solid #000; }
h1 { border: 1px green; }

由于层叠的原因，后面会覆盖前面，又由于没有声明 border-style，所以采用默认值 none，此时，将不会显示出边框了。

其中 border-style是一定要声明的，因为默认为 none，如果不显示声明的话，实际上是看不到边框的。

Chapter 9 颜色和背景

颜色

前景色 color

color: <color> | inherit

color 可以是所有合法的颜色值，不仅仅影响行内内容的颜色，而且还影响元素周围的边框(当框没有设置颜色的时候，采取前景色作为其框的颜色)

背景

背景色 backgroud-color

background-color: <color> | transparent

1. 背景色：背景色的作用范围一直到 边框的外边界，是外边界，而不是内边距的外边界，注意了。
2. 背景色不可继承，默认值为 transparent,所以才能看到父级元素的背景

背景图 background-image

background-image: url() | none 无继承
背景图从 内边距 的 左上角开始排列

关于背景图的良好实践

在使用背景图的时候，最好是加上背景颜色，有以下好处和坏处
好处：
如果背景图无法加载，至少还有背景颜色来区分没有一个区域
坏处：
如果所使用的图片有alpha通道的话，那么透明的部分会与背景相重叠，不雅观。

背景重复 background-repeat

backgound-repeat: repeat | repeat-x | repeat-y | no-repeat
改变背景图像的重复方式，默认为 repeat，即 x和y都进行重复

背景定位 background-position

background-position: [top|bottom|center][left|right|center] | x% y% | xpos ypos
1. 改变图像在背景中的起始位置，该属性只能应用于 块级元素 和 替换元素，因为图像的定位是相对于元素的 内边距边界 放置图像，而行内元素没有内边距边界，只有左右，没有上下。
2. 如果使用第一种方式赋值给 backgroud-position，如果只有一个值，而不是成对出现，那么另外一个值默认是 center
3. 使用百分数时，如果没有给垂直方向的值，则默认为 50%

背景关联 background-attachment

background-attachment: scroll | fixed 少用，默认为scroll

这个background-attachment是什么时候会用呢？
比如如果块级元素过大，超过一屏，但是图片居中的时候，有时候会一开始看不到图片，而看到图片之后，随着鼠标的滚动，有可能等会又看不到了。如果想要背景图片固定在可是窗口，可以采用这个属性，则原图像就不会跟随滚动了

但是，使用了 background-attachment 之后，其对齐方式就不是在其 包含块了，而是根据可视窗口来决定，即图像的放置由可视窗口来决定。

背景大小 background-size

background-size: length | percentage | cover | contain

1. length, 就是固定的长度值，这个没啥好说的，只设置第一个值，第二个为auto,自动按比例计算。
2. percentage，是根据其父元素的大小来按百分比计算，第二个不填则为auto
3. cover，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
4. contain，把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，即如果宽度或者高度 到达父元素的高度或者宽度，则不会再继续放大了，这个不一定会铺满整个元素。

汇总 background

background: color | image | repeat | attachment | postion/size

1. 前面顺序都是可以随意的，但是 position 一定是在 size 之前，可以想，css1的时候，只有position，所以position的顺序要早过 size
2. 不一定所有值都得填完，不填的话会使用默认值

Chapter 10 浮动和定位

浮动 float

float: none | left | right 无继承

浮动元素会以某种方式从正常的文档流当中脱离出来，但其仍然会影响其他元素的布局。

1. 浮动元素的外边距不会合并
    -> 这不会进行外边距合并，可以实现外边距不合并。
2. 给非替换元素设置浮动的时候，最好是给其定一个宽度 width 会比较好，否则浮动元素的width有可能是 1 或者 0
3. 设置了浮动属性后，不论这个元素本身是什么，它都会生成一个 块级框。 这会使浮动元素像块级元素一样 摆放。这也是为啥前后段落的位置会影响其摆放。

浮动元素的包含块

浮动元素的包含块是其最近的块级祖先元素

浮动元素都是可见的，不会相互重叠

浮动元素的摆放规则

影响浮动元素摆放的规则，如下，已下讨论情况默认为 float: left，源文档即所谓的 源代码

1. 浮动元素 不能 超出其包含块的 内边界，即都在 padding 内部进行浮动
2. 浮动元素的左外边界必须紧贴源文档中之前出现的左浮动元素的右外边界，除非其在源文档当中出现的位置 低于 所有左浮动元素的下边界，则其可以一直浮动到包含块的内边距。
3. 左浮动元素的右外边界不会在 右浮动元素的左外边界内。(eg: 包含块为 500px,而左右浮动元素都为 300px，此时，先浮动的元素会在上面，后浮动的元素会向下浮动至前一浮动元素的下边界，然后向左(右))，保证了 不会重叠，除非浮动元素本身的长度就大过包含块，否则，浮动元素不会超出包含块的内边界（即 规则1）
4. 一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时，就好像在两个元素之间有一个块级元素。
5. 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
6. 如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成的任何行框的顶端更高。（即浮动元素不能比它在源代码当中出现的行框的位置更高）
7. 在同一行源代码中有多个向左浮动元素，其会按顺序进行浮动，当位置超过包含块的宽度时，超出的那块会向下浮动，再向左浮动至包含块的内边界
8. 浮动元素尽可能高地放置（但有限制，参考 规则6）
9. 左浮动元素必须向左尽量远，右浮动元素必须向右尽量远，上下的话，参考前面的规则。

以上规则，保证的了浮动元素的浮动顺序以及浮动位置，总的来说可以总结为一下几点
1. 浮动元素都是 可见的，不会相互重叠
2. 浮动元素不会超出包含块的内边界，除非其本身长度就超过了
3. 后浮动元素顶端不会超过前浮动元素的顶端
4. 浮动元素的顶端位置不会超过其自身在源代码中的行框位置。
5. 浮动元素会尽可能的 左 或者尽可能地 右

浮动元素与内容重叠

由于浮动元素设置了 负外边距，而导致了与行内元素或者块级元素重叠时，其显示状态遵循以下两个规则

1. 行内框(即 display: inline)与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素的上面
2. 块级框与一个浮动元素重叠时，其边框和背景在浮动元素“之下”，而内容则在浮动元素 “之上” 显示

以上两条规则与浮动元素以及内容在文档当中出现的文本顺序无关（即不遵循正常文档流），不论是怎样的顺序，都会有同样的行为。

清除浮动

clear: left | right | both | none

clear的作用原理：增加元素的上外边距，使之最后落在浮动元素的下面。
所以原来元素的上外边距有可能会改变。

定位 position

基本概念

定位的类型

position: staic | relative | absolute | fixed

定位开始于包含块的边框边界

static:
    元素框正常形成，位置即按照正常流的位置进行布局

relative:
    元素框偏移某个位置。相对于原来未定位之前的位置进行偏移（仍然保留原本占用的空间）

absolute:
    元素框都文档流当中完全删除，并相对于其包含块（第一个非 static的）定位。原本在文档当中占据的空间也会去除。

fixed:
    类似于absolute，不过其实相对于 可视窗口 进行定位，也脱离文档流

postion的 absolute 和 fixed 以及 float属性都会使元素脱离文档流，但是他们有不同点

position属性的脱离文档流之后，定位元素不会影响其他元素的布局，但是float属性导致的脱离文档流，浮动元素仍然会在内部影响其他元素的布局

偏移属性

偏移属性对 完成定位 很重要，决定最终偏移的位置。

top、right、bottom、left
值： length | percentage | auto
默认值：auto (auto的意义并不是 0，后面会说到)
百分数: top和bottom相对于包含块的高度，left和right相对于包含块的宽度
作用：定位元素（即position属性不是 static的元素）

偏移定位元素的外边距边界时，其会影响元素的所有一切（外边距、边框、内边距和内容）都会在定位的过程中移动，即margin、padding、border这些都会在定位过程中随定位元素移动，所以调整margin也可以改变定位位置。

限制宽度和高度

min-width min-height 百分数时参考的是 包含块的 宽度
max-width max-height 百分数时参考的是 包含块的 高度

内容溢出和裁剪

overflow: visible | hidden | scroll | auto

适用于 块级元素 和 替换元素

元素可见性

visibility: visible | hidden | collapse | inherit

collapse 用在 表元素当中，如果在 非表元素当中使用的话，相当于 hidden

Q: visibility: hidden 与 display: none 的区别

display:none 其元素不在文档流当中，不影响文档的布局
visibility: hidden，元素只是不可见，还在文档流当中。

z-index

z-index: integer | auto
规定了元素在z轴上的摆放顺序，默认情况下，为auto值，即后代与其父框的层次相同，这个框不会建立新的局部上下文。

考虑以下代码

<p class="p1">sadsd<span>I am span</span></p>
<p class="p2">two <span>span 2</span></p>
.p1 {z-index: 3;}
.p1 span {z-index: 4;}
.p2 {z-index: 2;}
.p2 span {z-index: 10;}

以上代码结果并不会致使p2当中的span位于 p1之上，每一个框只会以其父框为标准，其在全局下的布局的话，参考父框的z-index的值

定位的几种方式

绝对定位

绝对定位元素的包含块是其最近的position值不为static的祖先元素

自动边偏移
偏移属性的默认值为 auto，除bottom外，其他三个为auto的时候，会有什么特殊效果呢？

top: 定位元素的顶端要相对于其 未定位前本来的位置 的顶端对齐
left(right)：定位元素左（或右）边界与元素未定位时该边界原本的位置对齐

总的来说，一句话，就是设置为auto，则按照原本其出现的位置出现，但是已经脱离了文档流了。只是位置是原来的位置

Q1：如果同时设置偏移属性各个值，并且都为非auto，那么定位应该听谁的呢

分以下两种情况，定位元素是否已经确定了或者设置了 width 和 height
1. 如果定位元素未设置width 和 height，那么，偏移属性四个值（top、right、bottom、left）都会作用，而元素的 width 和 height就会根据这四个值来进行适应性变化，以都满足要求
2. 如果设置了 width 和 height，那么，忧郁元素的宽高都固定了，不可能四个偏移属性都满足，那么此时，top 和 left 起作用，忽略 right 和 bottom

上面Q1只适用于 行内非替换元素。如果是替换元素，其width和height是已经设置好了，知道了固定的width和height的，所以1 不适用，其只会根据偏移属性来定位，即同时出现，则听 top、left

固定定位

完全脱离文档流，只相对于 可视窗口进行定位

相对定位

不脱离文档流，相对于原来的位置进行定位，原本的位置还占据着。

Chapter 11 表布局

表格式化

表显示值 display

table       {display: table}
tr          {display: table-row}
thead       {display: table-header-group}
tbody       {display: table-row-group}
tfoot       {display: table-footer-group}
col         {display: table-col}
colgroup    {display: table-col-group}
td, th      {display: table-cell}
caption     {display: table-caption}

表层

一个表在CSS的定义之下，有6个不同的层，不同的元素放在不同的层当中。
层 由 ↑ 到 ↓ 的顺序如下

单元格 (th、td)
行 (tr)
行组 (tbody)
列
列组
表 (table)

由上至下，上面的样式会覆盖下面的。

表标题 caption-side

通过html元素 caption 或者是 display: table-caption 的元素， 可以设置表的标题。
通过 caption-side可以设置标题的位置

caption-side: top | bottom

caption类似于块级元素，可以设置自己的文本、内边距、边框等等

表单元格边框

border-collapse: separate | collapse | inherit 应用于 table

默认值是 separate，即单元格之间是有分隔的，分隔的距离还可以由 border-spacing 来改变，如果为 collapse，则单元格之间没有空隙。

分隔单元格边框 border-collapse: separate

边框间隔 border-spacing

border-spacing: length length? 先左右，后上下，只能作用于 table

该属性只有在 border-collapse 为 separate的条件下才会起作用，如果是 collapse的话，是不会起作用的，其相当于html当中，在table元素的 cellspacing

在分隔边框模型中，不能为行、行组、列和列祖设置边框。如果设置了，则会被用户代理所忽略。

如果想让单元格看不见，可以用上一张定位时出现过的一个属性 visibility 来进行修饰，即 visibility: collapse | hidden

合并单元格边框 border-collapse: collapse

合并单元格边框与分隔单元格边框有所区别，最显著的就是会进行边框合并。

1. table不能有任何的内边距。
2. 单元格之间不会有任何的间隔，如果单元格都有边框，则会进行边框合并，看哪个边框更占上风，去合并其他边框。
3. 单元格、行、行组、列和列组都可以设置边框。

边框合并
遵循如下的一些规则
1. 如果某个边框的 border-style 为 hidden，其会优先于所有其他合并边框，不显示该边框
2. 某个边框的 border-style 为 none，优先级最低，其边框由其他单元格所决定
3. 非以上两种情况，则首先看边框的宽度，宽度更大的占优势，如果宽度相同，边框样式不同，则遵循以下顺序（最优先 → 最不优先
double solid dashed dotted ridge outset groove inset
4. 颜色的话，这个随意啦，不要状态在意。

前面三点都与 表层顺序 没有关系，最后一点颜色与顺序有关。表层越上的先显示。

表大小

宽度

确定表的宽度有两种不同的方法： 固定宽度布局 和 自动宽度布局

二者都可已确定表的宽度，并且可能会带来不同的结果，但是，二者最为显著的差异是 速度，使用 固定宽度布局，用户代理能够更快地计算出表的布局。这很容易理解，因为如果使用自动布局的话，每次调整窗口或者初始化的时候，都必须考虑包含块的大小以及每个单元格内容的大小，如果包含块动态变化，那表的宽度也动态变化，这会导致很多回流和重绘，性能消耗大。这也是为什么不用表的原因之一。

由下面这个CSS属性来决定
table-layout: fixed | auto | inherit 应用于 table 元素

固定布局 table-layout: fixed

各列单元格的宽度由第一行当中的单元格的宽度所决定。

自动布局

只要表的 width 为auto，就会触发使用这个模型。

Chapter 12 列表与生成内容

列表中的项其实就是块框，但其多出的部分不属于文档布局。CSS2中允许创作人员定义自己的计数模式和格式。列表项标志不会影响列表元素的布局

列表

列表类型 list-style-type

list-style-type: disc | circle | square | decimal | ... | inherit

disc            实心圆
circle          空心圆
square          实心方块
decimal         1,2,3,4,5...
decimal-leading-zero    01,02,03,04,05...
upper-alpha     A,B,C...
upper-latin
lower-alpha     a,b,c...
lower-latin
upper-roman
lower-roman
lower-greek     传统小写希腊符号
...
none            不适用标志

1. 如果写了一个用户代理无法识别的值，用户代理一般会将其处理为 decimal
2. 列表当中如果某个列表项的 list-style-type设置为 none，其不会中断计数，会继续算下去。

列表项图像 list-style-image

list-style-image: url | none | inherit

必须使用！ 绝对URL

列表项标志位置 list-style-position

list-style-position: inside | outside | inherit

默认值是 outside，即你平常所看见的列表项标志的所在，inside的话，就是将列表项放到内容里

简写列表项 list-style

list-style: <type> || <image> || <position>

三者可以是任何顺序列出，而且这些值都可以忽略，忽略的话，都使用默认值，即 list-style: disc none outside
三者只要其中一个有，其他两个不写的话，就使用默认值。

列表布局

放置 列表项标志的 空白处，通常是通过调整列表的 padding-left 或者 margin-left来进行留白，通常为40px，这是以前留下来的。

生成内容

比如在使用列表的时候，浏览器会自动为列表项生成 列表项标志，空心圆、数字之类的，并且进行计数，这些都是由用户代理进行实现的。

插入生成内容

通过使用 :before 和 :after 伪元素，再根据其 content属性将生成内容放在一个元素内容的前面或后面，来实现内容的插入

a[href]:before {
    content: '(link) ';
}

其生成的内容会直接加到元素的元素框内（除 列表标志外），不过生成内容也是有一定限制的，如下的一些操作是无效的。

1. 禁止对生成内容进行 浮动 或 定位
2. 如果 :before 或 :after选择器的主体是块级元素，则display属性只接受值为 none、inline、block、marker，其他都处理为 block
3. 如果主体是行内元素，则display属性只能接受值为 none 和 inline，其他都处理为 inline

指定内容 content

content：normal | string | url | counter | attr(<identifier>) | ...

a[href]:after {content: " [" attr(href) "] ";}
属性之间的连写不需要 + 号，直接空格隔开就好。

计数器 content: counter()

计数器这里的意思是，CSS2.1以后，能够让我们自定义列表项的标志当中的计数规则，当然，这里需要对列表进行从一定的CSS的修改。请看下面的例子。
计数器可以应用于任何元素，不仅仅局限于 列表(ul ol之类的)

计数器需要用到两个CSS属性，如下

counter-reset: <identifier><integer>? | none
integer即定义了当前计数器从多少开始递增

counter-increment: <identifier><integer>? | none
integer即定义了递增规则，一次递增多少个整数

/*========= html =========*/
<ol>
    <li>111</li>
    <li>111</li>
    <li>111</li>
</ol>
/*========= css =========*/
ol {
    list-style: none;
    counter-reset: ordered -1;
}
ol li:before {
    counter-increment: ordered 10;  // 计数发生在显示之前
    content: counter(ordered) ". ";
    margin: 0.25em 0;
}

结果会如下所示

9. 111
19. 111
29. 111

递增会发生在显示之前，并且每一个列表或者说每层嵌套都会产生自己的 作用域，什么意思，看下面的代码

<ol>
    <li>111</li>
    <li>111
        <ol>
            <li>111</li>
            <li>111</li>
            <li>111</li>
        </ol>
    </li>
    <li>111</li>
</ol>

实际上，这个就会显示成如下
1. 111
2. 111
    1. 111
    2. 111
    3. 111
3. 111

那如果你想嵌套在当中的计数继承于或者说追加于老计数器上，那么可以将 content: counter() 改为 content: counters()，即改成 counter s

ol {
    list-style: none;
    counter-reset: ordered;
}
ol li:before {
    counter-increment: ordered;
    content: counters(ordered, ".") "-"
}

实际上，这个就会显示成如下
1. 111
2. 111
    1.1. - 111
    1.2. - 111
    1.3. - 111
3. 111

Chapter 13 用户界面样式

CSS大部分是关于文档的样式改变，但其也提供很多有用的界面样式工具，比如可以重用用户默认环境的某些方面来设置文档的字体和颜色样式，或者说可以对焦点强调和鼠标光标施加影响。

系统字体和颜色

系统字体 font

CSS2定义了6个系统字体关键字，其包含了字体的所有属性，其主要目的就是让元素控件的样式和系统或者说浏览器本身的样式相同，以保持整套风格。

caption
    由标题控件使用的字体样式，如按钮和下拉控件
icon
    操作系统图标标签所用的字体样式，如硬盘驱动器、文件、文件夹等
menu
    下拉菜单和菜单列表中文本使用的字体样式
message-box
    对话框中文本使用的字体样式
small-caption
    标题小控件的标签使用的字体样式
status-bar
    窗口状态条中文本使用的字体样式

以上关键字都只能适用于 font 属性

body {font: caption;}

系统颜色

强烈建议创作人与不要使用系统颜色，因为在CSS2.1 CSS3中很多都已经废弃了

有一些还是可以进行使用的，经常也会看到，譬如 highlight

光标 cursor

光标在用户界面中起着一个很大的作用，对提供交互反馈方面尤为重要。

cursor: url | auto | pointer | crosshair | help | text | wait | default | ...

常用的一些就是 pointer | text | help | crosshair

如果要自定义图标，url 必须跟有一个逗号和某个通用关键字

a { cursor: url(global.cur), pointer; }

轮廓 outline

轮廓通常都能应用在指示焦点所在地方，比如input输入的时候，显示outline，便是当前正在这里操作。

轮廓与边框有什么不同
1. 轮廓不像边框那样参与到文档流中，即不会占据任何空间，不会影响到文档流的重新布局
2. 默认情况下，轮廓的出现是在边框外面，但显示在 margin 之上
3. 整个轮廓的宽度只能是一样的，但是 border 可以上下左右都不同的width

outline 与 border的属性类似

outline-style: double | solid | dashe | ... 没有 hidden，默认值是 none，所以默认是看不见的，style为none的时候，width 为 0
outline-width: thin | medium | thick | length
outline-color: color | invert 默认值 invert 即取元素的反色来进行展示

outline 属性

outline: color | width | style 顺序没有关系，随意些

Chapter 14 非屏幕媒体

设计特定于媒体的样式表 media

可以直接在 link 或者 import 当中进行使用

<link rel="stylesheet" type="text/css" href="***" media="screen">

@import url(test.css) screen, projection

media属性，可以直接定义该样式表能使用于什么媒体当中，当然，还有一种更加通用的方法，是在css当中使用媒介查询，即 @media screen

使用media 块的原因是可以只在一个css样式表当中，定义多个适用于媒体的media块

分页媒体

定义打印页面大小 @page

在CSS2.1以后，创作人员只能调整页面的外边距区，即页面区和页框之间的距离，也可以想象成打印的时候，内容和页面边框之间的距离

@page {margin: 0.5in;}

page: identifier | inherit

@page :first {margin: 6cm;}
@page :left {margin-left: 3cm; margin-right: 6cm;}
@page :right {margin-left: 6cm; margin-left: 3cm;}

后两个 left 和 right 在打印书本的时候通常都会使用，左右两页的距离会有所不同。

分页 page-break-before(after)

page-break-before page-break-after
auto | always | avoid | left | right 只能应用于position属性为relative或static的非浮动块级元素