1. HTML标记与文档结构
HTML标记
文本用闭合标签：<标签名 attr1="val1" attr2="val2" ...>文本内容</标签名> （属性可省略，包含的是会显示的实际内容）
引用内容用自闭合标签：<标签名 attr1="val1" attr2="val2" /> （给浏览器提供一个对要显示内容的引用）
属性：参考HTML Dog网站 http://htmldog.com/reference/htmltags
标题与段落：<hnum>, <p>
复合元素：多个标签构成，可能有一定的层级关系
嵌套标签：要先关闭内部标签，再关闭外部标签
HTML文档
文档流：HTML元素按照它们各自在标记中出现的先后顺序，依次从页面上方“流向”下方。
<html>标签：根级标签，页面中所有的其他标签都嵌套在这个标签内部，它的闭标签是整个页面中的最后一个闭标签。它只有两个直接的子标签：<head>和<body>
块级元素(display: block)：相互堆叠在一起沿页面向下排列，每个元素分别占一行，例如标题和段落。块级元素盒子会扩展到与父元素同宽。
行内元素(display:inline)：会相互并列，只有在空间不足以并列的情况下才会折到下一行显示，例如链接和图片。行内元素盒子会“收缩包裹”其内容，并且会尽可能包紧。
无论想了解哪个HTML元素，第一个要问的应该是：它是块级元素，还是行内元素？这样，在编写标记的时候，预想到某个元素在初识状态下如何定位的，才能进一步想好将来怎么用CSS重新定位它
(块级元素(display: block)：相互堆叠在一起沿页面向下排列，每个元素分别占一行，例如标题和段落。块级元素盒子会扩展到与父元素同宽。, 行内元素(display:inline)：会相互并列，只有在空间不足以并列的情况下才会折到下一行显示，例如链接和图片。行内元素盒子会“收缩包裹”其内容，并且会尽可能包紧。)
文档对象模型DOM
DOM是从浏览器的视角来观察页面中的元素以及每个元素的属性，由此得出这些元素的一个家族树。通过DOM，可以确定元素之间的相互关系。在CSS中引用DOM中特定的位置，就可以选中相应的HTML元素，并修改其样式属性。
2. CSS工作原理
CSS规则
行内样式：写在特定HTML标签的style属性里的。作用范围最小，只能影响它所在的标签，总会覆盖嵌入样式和链接样式（优先级最高）。
嵌入样式：放在HTML文档的head元素中，用<style>标签包围。应用范围仅限于当前页面，会覆盖外部样式表中的样式，但会被行内样式覆盖
链接样式：样式保存在样式表（扩展名为.css的文本文件）中，可以在任意多个HTML页面中链接同一个样式表文件，使用如<link href="style.css" rel="stylesheet" type="text/css" />的代码链接样式表。
在样式表中链接其他样式表的方法：@import url(css/styles2.css)
注意：@import 指令必须出现在样式表中其他样式之前，否则@import 引用的样式表不会被加载。
CSS规则：(例如：p {color:red;}) 选择符 {属性:值;}
* 选择符：指出规则所要选择的元素
* 声明：包括属性和值。属性指出要影响元素哪方面的样式，值是属性的一个新状态
1. 多个声明包含在一条规则里，例如：p {color:red;font-size:12px;}
2. 多个选择符组合在一起，选择符之间用逗号分隔，例如：h1, h2, h3 {color:blue;font-weight:bold;}
3. 多条规则应用给一个选择符，例如：h1, h2 {color:blue} h2 {font-style:italic;}
三种扩展方法
(1. 多个声明包含在一条规则里，例如：p {color:red;font-size:12px;}, 2. 多个选择符组合在一起，选择符之间用逗号分隔，例如：h1, h2, h3 {color:blue;font-weight:bold;}, 3. 多条规则应用给一个选择符，例如：h1, h2 {color:blue} h2 {font-style:italic;})
三种把CSS添加到网页中的方法
(行内样式：写在特定HTML标签的style属性里的。作用范围最小，只能影响它所在的标签，总会覆盖嵌入样式和链接样式（优先级最高）。, 嵌入样式：放在HTML文档的head元素中，用<style>标签包围。应用范围仅限于当前页面，会覆盖外部样式表中的样式，但会被行内样式覆盖, 链接样式：样式保存在样式表（扩展名为.css的文本文件）中，可以在任意多个HTML页面中链接同一个样式表文件，使用如<link href="style.css" rel="stylesheet" type="text/css" />的代码链接样式表。)
上下文选择符：标签1 标签2 {声明}。也叫后代组合式选择符，用于选择作为指定祖先元素后代的标签。例如：article p {font-weight:bold;}
记住：上下文选择符以空格作为分隔符，分组选择符以逗号作为分隔符
以某个祖先标签作为上下文：只要有标签在它的层次结构“上游”存在这么一个组选，那么就会选中该标签。无论从该标签到作为祖先的上下文之间隔着多少层次都没有关系。
子选择符>：标签1>标签2。标签2必须是标签1的子元素。即标签1不能是标签2的父元素之外的其他祖先元素。例如：section > h2 {color:blue;}
紧邻同胞选择符+：标签1+标签2.标签2必须紧跟在其同胞标签1的后面。例如：h2 + p {font-variant:small-caps;}
一般同胞选择符~：标签1 ~ 标签2.标签2必须跟（不一定紧跟）在其同胞标签1后面。例如：h2 ~ a {color:red;}
通用选择符*：通常称为星号选择符，是一个通配符，匹配任何元素
例如：
1. 把p包含的所有元素的文本变成红色：p * {color:red;}
2. 非子选择符：section * a {font-size:1.3em;} 任何section孙子元素，而非子元素的a标签都会被选中
ID和类选择符
ID选择符：#ID {声明}
类选择符：.类名 {声明}
例如：
1. 普通用法：.specialtext {font-size:12px;}
2. 标签带类选择符：p.specialtext {color:red;}
3. 多类选择器：.specialtext.featured {font-size:120%;} 对应class="specialtext featured"
唯一标识一个元素的时候，使用ID选择符；要标识一组具有相同特征的元素，则使用类选择符
(ID选择符：#ID {声明}, 类选择符：.类名 {声明}
例如：
1. 普通用法：.specialtext {font-size:12px;}
2. 标签带类选择符：p.specialtext {color:red;}
3. 多类选择器：.specialtext.featured {font-size:120%;} 对应class="specialtext featured")
属性选择符
属性名选择符：标签名[属性名]，选择任何带有属性名的标签名。例如：img[title] {border:2px;}
属性值选择符：标签名[属性名="属性值"]，选择任何带有值为属性值的属性名的标签名。例如：img[title="flower"] {border:4px;}
伪类
一个冒号(:)表示伪类，两个冒号(::)表示CSS3新增的伪元素
UI伪类：在HTML元素处于某个状态时（如鼠标指针位于链接上），为该元素应用CSS样式
1. 链接伪类
link: 链接等待用户点击。例如：a:link {color:black;}
visited: 用户此前点击过这个链接。例如：a:visited {color:gray;}
hover: 鼠标指针正悬停在链接上。例如：a:hover {text-decoration:none;}
active: 链接正在被点击（鼠标在元素上按下，还没有释放）。例如：a:active {color:red;}
2. :focus伪类：e:focus。表单中的文本字段在用户单击它时会获得焦点。例如：input:focus {border:1px solid blue;}
3. :target伪类：e:target。若用户点击一个指向页面中其他元素的链接，则那个元素就是目标target，可以用:target伪类选中它。例如：#more_info:target {background:#eee;} 会在用户单击链接转向ID为more_info的元素时，为该元素添加浅灰色背景。
结构化伪类：在标记中存在某些结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS样式
1. :first-child和:last-child：e:first-child和e:last-child。前者表示一组同胞元素中的第一个元素，后者表示最后一个。
2. :nth-child：e:nth-child(n)。e表示元素名，n表示一个数值（也可以是odd/even）。例如：li:nth-child(3) {color:gray;}
伪元素：文档中若有实无的元素
1. ::first-letter伪元素：e::first-letter。例如: p::first-letter {font-size:300%;} 将段落首字符放大。
2. ::first-line伪元素：e::first-line。选择文本段落的第一行。其长度会随浏览器窗口大小的变化而改变。
3. ::before和::after伪元素：e::before和e::after。用于在特定元素前面或后面添加特殊内容。例如：p.age::before {content:"Age: ";} p.age::after {content:" years.";}
继承：CSS中的祖先元素会向后代传递CSS属性的值。可继承属性和不可继承属性
层叠：层叠样式表中的层叠，是一种样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值的多个来源，确定最终使用哪个值。
浏览器层叠各个来源样式的顺序：
1. 浏览器默认样式表
2. 用户样式表
3. 作者链接样式表（按照它们链接到页面的先后顺序）
4. 作者嵌入样式
5. 作者行内样式
按照上述顺序依次检查每个来源的样式，在有定义的情况下，更新对每个标签属性值的设定（优先级从小到大）
层叠规则
规则一：找到应用给每个元素和属性的所有声明
规则二：按照顺序和权重排序
加重声明的权重：空格!important; 例如：p {color:green !important;}
规则三：按特指度排序
特指度表示一条规则有多明确。
计算特指度：每个选择符都要按“I-C-E”计算三个值
1. 选择符中有一个ID，就在I的位置上加1；
2. 选择符中有一个类，就在C的位置上加1；
3. 选择符中有一个元素（标签）名，就在E的位置上加1；
4. 得到一个三位数，三位数最大的胜出。
例如，body p#largetext ul.mylist li 特指度=114
规则四：顺序决定权重
若两条规则都影响某元素的同一个属性，而且它们的特指度也相同，则位置最靠下（或后声明）的规则胜出
规则声明
文本值（关键字）
数字值：后面都有一个单位
绝对值：in(英寸), cm(厘米), mm(毫米), pt(点), pc(皮卡), px(像素)
相对值：em(Em，表示一种字体中字母M的宽度), ex(Ex，表示给定字体中字母x的高度), %(百分比)
颜色值：多种格式，包括RGB, HSL和十六进制
颜色名。例如red。
十六进制颜色值（#RRGGBB或#RGB）
RGB颜色值（R,G,B）: rgb(r, g, b)。例如rgb(0,255,0)
RGB百分比值（R%, G%, B%）：r%, g%, b%
HSL(色相，饱和度%，亮度%)：HSL(0， 0%, 0%)
Alpha通道：用于设置颜色的不透明度
三种选择符：针对的都是标记中的某个部分
(上下文选择符：标签1 标签2 {声明}。也叫后代组合式选择符，用于选择作为指定祖先元素后代的标签。例如：article p {font-weight:bold;}, ID和类选择符, 属性选择符)
用来确定哪条规则会被最终应用
(继承：CSS中的祖先元素会向后代传递CSS属性的值。可继承属性和不可继承属性, 层叠：层叠样式表中的层叠，是一种样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值的多个来源，确定最终使用哪个值。, 规则声明)
3.定位元素
盒模型：浏览器为页面中的每个HTML元素生成矩形盒子
1. 4条边：top, right, bottom, left
2. 每个属性有三个粒度：哪个粒度的属性-哪条边-那条边的哪个属性。例如border, border-style, border-left-style
CSS为边框、内边距和外边距分别规定了简写属性。在每个简写声明中，属性值的顺序都是上、右、下、左（顺时针旋转）。例如：
{margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:8px;}等价于{margin:5px 10px 12px 8px;}。若哪个值没写，则使用对边的值。
边框(border)：可以设置边框的宽窄、样式和颜色
宽度(border-width)。可以使用文本值（thin, medium, thick），及除百分比和负值之外的任何绝对值
样式(border-style)。文本值（none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset等）
颜色(border-color)。任意颜色值（包括RGB, HSL, 十六进制颜色值和颜色关键字）
内边框(padding)：可以设置盒子内容区与边框的间距
外边距(margin)：可以设置盒子与相邻元素的间距
垂直外边距叠加：较宽的外边距决定两个元素最终离多远
水平外边距为相邻外边距之和
据经验，为文本元素设置外边距时通常需要混合使用不同的单位：
1. 一个段落的左右外边距可以使用像素，以便该段文本始终与包含元素边界保持固定间距，不受字号变大或变小的影响
2. 一个段落的上下外边距使用em为单位，可以让段间距随字号的变化而相应增大或缩小
盒子的大小
没有（即没有设置width的）宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量等于水平边框、内部边距和外边距的和。
为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。实际上，盒子的width属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度。
浮动(float)与清除(clear)
float属性：使元素脱离常规文档流，原来紧跟其后的元素会在空间允许的情况下，向上提升到与浮动元素平起平坐
文本绕排图片：
1. 在标记中先写图片，在写环绕它的文本。
<img ... />
<p>... the paragraph text...</p>
2. CSS规则
p {margin:0; border:1px solid red;}
/*外边距防止图片紧挨文本*/
img {float:left; margin:0 4px 4px 0;}
注意：浮动图片会从文档流中被一次，如果在标记中有文本元素跟在它后面，则其中的文本会绕开图片；浮动非图片元素时，必须给它设定宽度。
创建分栏：只要用一次float属性即可。
注：如果几个相邻的元素都具有设定的宽度，都是浮动的，而且水平空间也足以容纳它们，它们就会并列排在一行。
围住浮动元素的三种方法
1. 为父元素添加overflow:hidden，以强制它包围浮动元素
2. 同时浮动父元素
3. 给父元素的最后添加一个非浮动的子元素，然后清除该子元素
第一种方法，简单的在HTML标记中添加一个子元素(可以使用div)，并给它应用clear属性
第二种方法，给元素添加一个类(如clearfix)，然后添加如下CSS规则：
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both;}
没有父元素的清除方法
给浮动元素应用clear:both，强迫它定位在前一个浮动元素下方。
注：在空间足以容纳多个元素向上浮动时未必有效
通过clearfix类添加清楚元素
有父元素的情况下
(1. 为父元素添加overflow:hidden，以强制它包围浮动元素, 2. 同时浮动父元素, 3. 给父元素的最后添加一个非浮动的子元素，然后清除该子元素)
定位(position)：用于相对于它在常规文档流中的位置重新定位
静态定位(static, 默认值)：每个元素在处在常规文档流中，块级元素会在默认文档流中上下堆叠
相对定位(relative)：相对元素原来在文档流中的位置（或默认位置）。可以使用top, left属性相对元素在文档流中的常规位置重新定位。
注意：元素原来占据的空间没有动，其他元素也没动。记得要考虑元素原来的空间。
绝对定位(absolute)：会把元素彻底从文档流中拿出来，再相对于定位上下文进行定位
默认的定位上下文是body元素。因此在页面滚动时，为了维护与body元素的相对位置关系，它也会相应的移动。
绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要把相应的祖先元素的position设定为relative即可。
固定定位(fixed)：会把元素完全移除文档流，其定位上下文是视口（浏览器窗口或手持设备的屏幕），不会随页面滚动而移动
不常用，常见情况是用它创建不随页面滚动而移动的导航元素。
显示属性(display)
display: inline; 元素按行内元素展示，在浏览器中左右并排显示，只有前一行没有空间时才会显示到下一行
display: block; 元素按块级元素展示，在浏览器中上下堆叠显示
display: none; 元素及所有包含在其中的元素，都不会在页面中显示。它们原先占据的所有空间也都会被“回收”
背景
背景颜色：background-color。例如background-color:#fff
背景图片：background-image。例如background-image:url(images/circle.png)
默认情况下，背景图片会以元素左上角为起点，沿水平和垂直方向重复出现，最终填满整个背景区域
指定背景图片来源：background-image:url(图片路径/图片文件名)
可以给元素背景添加多个背景图片，使用多个url(图片路径/图片文件名)即可。多张图片会在背景中叠加起来，CSS规则中先列出的图片在上层。
背景重复：background-repeat
repeat： 默认值，水平和垂直重复，直至填满元素的背景区域为止
repeat-x：只在水平方向重复
repeat-y：只在垂直方向上重复
no-repeat：在任何方向上都不重复（只让背景图片显示一次）
round：为确保图片不被剪切，通过调整图片大小来适应背景区域
space：为确保图片不被剪切，通过在图片间添加空白来适应背景区域
CSS3规定的两个值，尚未得到浏览器支持
(round：为确保图片不被剪切，通过调整图片大小来适应背景区域, space：为确保图片不被剪切，通过在图片间添加空白来适应背景区域)
背景位置：background-position。用以改变背景图片的起点
5个关键字值：top, left, bottom, right, center。任意两个值组合起来都可以作为该属性的值。顺序不重要。若省略其中一个，怎被省略的值与给出的值一致
使用数值（例如40% 30%）：第一个值表示水平位置，第二个值表示垂直位置。要是只设定一个值，则将其用来设定水平位置，垂直位置则会被设为center
背景尺寸：background-size。用来控制背景图片的尺寸
50%：缩放图片，使其填充背景区的一半
100px 50px：把图片调整到100px宽，50px高
cover：拉大图片，使其完全填满背景区；保持宽高比
contain：缩放图片，使其恰好适合背景区；保持宽高比
背景粘附：background-attachment。控制滚动元素内的背景图片是否随元素滚动而移动
scroll：默认值，背景图片随元素移动
fixed：背景图片不会随元素滚动而移动。常用于给body元素中心位置添加淡色水印。
简写背景属性：background
可以用来设定所有背景相关的值
例如：body {background: url(images/watermark.png) center #ff no-repeat contain fixed;}
声明中少写了哪个属性的值，就会使用相应属性的默认值。
其他CSS背景属性
background-clip。控制背景绘制区域的范围。例如，可以让背景颜色和背景图片只出现在内容区，而不出现在内边距区域。默认情况下，背景绘制区域是扩展到边框外边界的。
background-origin。控制背景定位区域的原点，可以设定为元素盒子左上角以外的位置
background-break。控制分离元素（例如跨越多行的行内盒子）的显示效果。
背景渐变。CSS生成的背景图片。可以使用background-image属性，也可以使用简写background属性
线性渐变：从元素的一端延伸到另一端。例如：
1. background: linear-gradient(#e86a43, #fff) 默认从上到下
2. background: linear-gradient(left, #64d1dd, #fff) 从左到右
3. background: linear-gradient(-45deg, #e86a43, #fff) 从左上到右下
放射性渐变：从元素内一点向四周发散。例如：
1. background: -weblit-radial-gradient(#fff, #64d1dd, #70aa25) 默认渐变形状，渐变效果会填充元素
2. background: -weblit-radial-gradient(circle, #fff, #64d1dd, #70aa25) 圆形渐变
3. background: -weblit-radial-gradient(50px 30px, circle#fff, #64d1dd, #70aa25) 指定位置的圆形渐变
4.字体和文本
字体：主要描述一类字体的大小和外观
字体族：font-family。用于设定元素中对文本使用什么字体，可继承
在指定文本的字体时，需要多列出几种后备字体，以防第一种字体无效。这个字体的列表叫做字体栈。
例如：body {font-family: "trebuchet ms", tohoma, sans-serif;}
注意：给字体栈的最后一项制定一个通用字体类，确保最坏的情况下，文档起码可以通过正确的字形来显示。
5种通用的字体类：
1. serif，衬线字体，在每个字符笔画的末端会有一些装饰线
2. sans-serif，无衬线字体，在每个字符笔画的末端没有装饰线
3. monospace，等宽字体，每个字符的宽度相等，也称代码体
4. cursive，草书体或手写体
5. fantasy，不能归入其他类别的字体，一般都是奇形怪状的字体
字体大小：font-size。可继承
绝对单位，比如像素或点。缺点是在需要调整页面所有元素的字体大小时，必须一个一个修改样式表中的font-size
相对单位，比如百分比或em。相对字体大小相对的是最近的“被设定过字体大小的”祖先元素。
使用相对字体大小，会自动调整各层元素。
字体样式：font-style
italic/oblique：字体是斜体
normal：字体是正体
字体粗细：font-weight
数值，例如100、200等
关键字：lighter, normal, bold, bolder
字体变化：font-variant
small-caps：会使所有小写英文字母变成小型大写字母
normal
简写字体属性：font
规则一：必须声明font-size和font-family的值
规则二：所有值必须按如下顺序声明：
1. font-weight, font-style, font-variant不分先后
2. font-size
3. font-family
必须遵守的两条规则，否则浏览器无法正确解释声明的值
(规则一：必须声明font-size和font-family的值, 规则二：所有值必须按如下顺序声明：
1. font-weight, font-style, font-variant不分先后
2. font-size
3. font-family)
文本：描述对文本的处理方式
文本缩进：text-indent
值：长度值（正、负均可）
例如：p {text-indent:3em;}
设定行内盒子相对于包含元素的起点。默认情况下，这个起点就是包含元素的左上角。
设定正值，文本向右移，得到的是段落首行缩进效果；设定负值，段落的首行会从包含元素的左侧探出头来。
该属性可继承，子元素继承的是根据父元素宽度计算得到的缩进值
字符间距：letter-spacing
值：任何长度值（正、负均可）
例如：p {letter-spacing:.2em;}
设为正值，增大字符间距；设为负值，缩小字符间距。设定字符间距一定要用相对单位，以便字距间能随字体大小同比例变化。
单词间距：word-spacing
值：任何长度值（正、负均可）
例如：p {word-spacing:.2em;}
CSS把任何两边有空白的字符和字符串都视为“单词”。单词间距只调整单词间距，不影响字符间距。
文本装饰：text-decoration
值：underline, overline, line-through, blink, none
例如：.retailprice {text-decoration:line-through;}
文本对齐：text-align
值：left（左对齐）, right（右对齐）, center（居中对齐）, justify（两端对齐）
例如：p {text-align:right;}
行高：line-height
值：任何数字值（不用指定单位）
例如：p {line-height:1.5;}
修改默认行高最简单的方式就是使用font快捷属性，以复合值的形式把font-size核line-height值写在一块。
例如：div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;} 这里，行高是字体大小1.2em的1.4倍
文本转换：text-transform
值：none, uppercase, lowercase, capitalize
例如：p {text-transform:capitalize;}
垂直对齐：vertical-align
值：任意长度值以及sub, super, top, middle, bottom等
例如：span {vertical-align:60%;}
以基线为参照上下移动文本，但这个属性只影响行内元素。若想在垂直方向上对齐块级元素，必须将其display属性设定为inline
常用于公式或化学分子式中的上标和下标。
WEB字体
使用Google Web Fonts或Adobe的Typekit等公共字体库
使用事先打包的@font-face包
使用前提：可以从你的网站或第三方Web服务器下载到相应的字体
以这种方式提供的字体，会在使用该字体的页面第一次加载时被浏览器下载病患存起来，以后就不用下载了。除了显示网页之外，用户不能将这种字体用于其他用途。
存在一个问题：不同浏览器要求的字体格式不一样。
用你自己的字体生成的（使用Font Squirrel）@font-face包
设定Web字体的三种方式
(使用Google Web Fonts或Adobe的Typekit等公共字体库, 使用事先打包的@font-face包, 用你自己的字体生成的（使用Font Squirrel）@font-face包)
文字版式
简单的文本布局
基于网络的排版
经典的排版
首字母下沉：
1. 选择首字母：使用+和::first-letter。例如：h1 + p::first-letter {...}
2. 增大字体并浮动它
5.页面和布局
基本概念
布局高度：正常情况下应该保持元素height属性的默认值auto不变。只有这样，元素才能随自己包含内容的增加而在垂直方向上扩展。假如明确设定了元素的高度，那么超出的内容要么被检点，要么全跑到容器之外（取决于元素overflow属性的设定）。
布局宽度：需要更精细的控制布局宽度，以便随着浏览器窗口宽度的合理变化，布局能够做出适当的调整，确保文本行不会过长或过短。即使必须设定栏宽，也不要给包含在其中的内容元素设定宽度，应让这些内容元素自动扩展到填满栏的宽度。
三栏-固定宽度布局
html代码：
<div id="wrapper">
<header><!-- 标题 --></header>
<nav><!-- 无序列表 --></nav>
<article><!-- 文本 --></article>
<aside><!-- 文本 --></aside>
<footer><!-- 文本 --></footer>
</div>
css规则：
* {margin:0; padding:0;}
#wrapper {width:960px; margin:0 auto; border:1px solid;}
header {background:#foo;}
nav {
width: 150px;
float: left;
background:#dcd9c0;
}
nav li { list-style-type:none;}
article {
width: 600px;
float: left;
background: #ffed53;
}
aside {
width: 210px;
float: left;
background: #3f7ccf;
}
footer {clear:both; background: #000;}
问题：为栏设定内边距和边框，导致右边的栏可能滑到左边栏的下方
从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度和。可行但繁琐。
在容器内部的元素上添加内边距或外边距。前提是内部元素没有明确设定宽度。可行但繁琐。可以在栏内再嵌套一个内部div来减少繁琐。
使用CSS3的box-sizing属性切换盒子缩放方式，比如 section {box-sizing: border-box;}。应用box-sizing属性后，给section添加边框和内边框都不会增大盒子，相反会导致内容变窄。
解决方法
(从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度和。可行但繁琐。, 在容器内部的元素上添加内边距或外边距。前提是内部元素没有明确设定宽度。可行但繁琐。可以在栏内再嵌套一个内部div来减少繁琐。, 使用CSS3的box-sizing属性切换盒子缩放方式，比如 section {box-sizing: border-box;}。应用box-sizing属性后，给section添加边框和内边框都不会增大盒子，相反会导致内容变窄。)
三栏-中栏流动布局
方法一：在中栏改变大小时使用负外边距定位右栏。适合比较老的浏览器
控制两个外包装容器的外边距。其中一个外包装(threecolwrap)包围所有三栏，另一个外包装(twocolwrap)只包围左栏和中栏
...
div#twocolwrap {...; margi-right:-210px; ...;} /*把右栏拉到区块外边距腾出的位置上*/
...
article {...; margin-right:210px;...;} /*在流动居中的栏右侧腾出空间*/
aside {...; width:210px;...;} /*右侧栏长度为腾出的空间*/
方法二：使用CSS3让栏容器具有类似表格单元的行为。简单得多
通过CSS把布局的栏(display属性)设定为table-cell的三个好处
1. 单元格（table-cell）不需要浮动就可以并排显示，而且直接为它们应用内边距也不会破坏布局
2. 默认情况下，一行汇总的所有单元格高度相同，因而不需要人造的等高栏效果
3. 任何没有明确设定宽度的栏都是流动的
缺点：在IE7及更低版本中并没有得到支持，而且也没有稳妥的补救措施
只需要以下标记：
<nav><!-- 内容--></nav>
<article><!-- 内容--></article>
<aside><!-- 内容--></aside>
和以下CSS：
nav {display:table-cell;width:150px; padding:10px; background:#dcd9c0;}
article {display:table-cell; padding:10px 20px; background:#ffed53;}
aside {display:table-cell; width:210px;...}
多行多栏布局
HTML例子：
<div id="wrapper">
<header><!-- title --></header>
<nav><!-- subtitle or others--></nav>
<section id="brading">
<!-- image or others -->
</section><!-- brading ends -->
<section id="feature_area">
<article>
<div class="inner"><!-- content --></div>
</article>
<!-- omit other articles -->
</section><!-- feature_area ends -->
<section id="promo_area">
<article>
<div class="inner"><!-- content --></div>
</article>
<!-- omit other articles -->
</section><!-- promo_area ends -->
<footer><!-- footer or others --></footer>
</div>
CSS选择符的实际应用
在标记中保持类和ID属性最少的秘诀：给标记中每个主要区域的顶级元素添加一个ID，然后，这些ID就会成为HTML标记中的“路标”，放在上下文选择符开头的时候，能起到框定后代元素的作用。
内部DIV实战
6.页面组件
导航菜单：由一组链接组成。一般用HTML中的列表元素(ul或ol)来分组链接（复合逻辑，且即使无额外的CSS也能适当显示链接层次）。默认，列表项(li)会上下堆叠
简单HTML菜单标记：
<nav class="list1">
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</nav>
HTML下拉菜单标记：
<nav class="multi_drop_menu">
<!--一级开始-->
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx
<!--二级开始-->
<ul>
<li>xxx</li>
<li>xxx
<!--三级开始-->
<ul>
<li>xxx</li>
<li>xxx</li>
</ul><!--三级结束-->
</li>
<li>xxx</li>
</ul><!--二级结束-->
</li>
</ul><!--一级结束-->
</nav>
纵向菜单
使用“非首位子元素”选择符。例如：.list1 li+li {...}
让列表行可以点击：把内边距从li元素转移到链接内部，然后让链接往前填满整个列表项。
横向菜单
浮动列表项：
.list1 ul {overflow:hidde;} /*强制ul包围浮动的li的元素*/
.list1 li {flost:left; ...;} /*让li元素水平排列*/
.list1 a {display: block; padding:0 16px; ...;} /*让链接填满li元素*/
下拉菜单
顶级菜单的CSS样式：
...
.multi_drop_menu li ul {display:none;} /*隐藏低级菜单*/
让下拉菜单响应鼠标事件：
...
.multi_drop_menu li:hover > ul {display: block;} /*父元素悬停时显示*/
表单
HTML表单元素
form元素：素有表单的标记都包含在一个form元素中。
例如：<form class="xxx" action="xx.php" method="post">...</form>
两个必要的属性：action和method
1. action 用于指定服务器上用来处理表单数据的文件的URL
2. method （post/get）用于指定怎么把数据发送到服务器
提交表单后，表单控件（表单中用来收集数据的各种表单组件的通称）中填写的表单数据或作出的选择（以“名=值”的形式，“名”是在控件name属性中设定的名字）都会被发送到服务器。
可以把一组相关的表单控件组织到一个控件组元素fieldset中。fieldset的第一个子元素一定得是legend文本元素，其中包含这个控件组的标题。
每个表单控件（submit按钮除外），都有一个对应的label文本元素，用于描述控件代表的数据。label元素可以包含控件，也可以放在控件前面或后面。若没有用label包含控件，那么label的for属性与控件的id属性必须匹配，以便将两者关联起来。
input元素
多行文本区textarea元素
复选框、单选按钮和选项列表
表单标记策略
通过把每一对标注和控件都放到块级section元素中，它们自然就再也没上垂直堆叠起来。而且，也有了一个可以定位它们的包含元素。
设定表单样式
设计搜索表单
HTML：
<header>
<form class="stylin_form_search1" action="#" method="post">
<label for="search">search</label>
<input type="search" id="search" name="search" placeholder="serach" />
</form>
</header>
点击时，文本框动态变宽：
form.stylin_form_search1 input {
...
width: 70px;
.-webkit-transition: 2s width;}
form.stylin_form_search1 input:focus {width: 200px;}
CSS过渡：可以让CSS书写产生动画效果。
第一条CSS规则设定属性的初始状态和过渡参数；
第二天CSS规则设定事件发生时属性的目标状态。
通常，过渡动画是由用户鼠标悬停时的:hover伪类规则和表单元素获得焦点时的:focus伪类规则触发的。除此之外，还可以在一个带类名选择符的规则中设定新状态，然后通过JavaScript等为元素添加这个类名来触发过渡，添加类名的时机可以是鼠标点击或其他事件发生时
五个过渡属性
transition-property，过渡的CSS属性名，比如color, width
transition-duration，过渡的持续时间，以秒或毫秒设定，比如2s, 500ms;
transition-timing-function，过渡的调速函数，决定动画效果是否平滑，是先慢后快，还是先快后慢，比如ease-in, ease-out, ease-in-out或linear(default)
transition-delay，过渡开始前的延迟时间，以秒或毫秒设定，比如1s, 200ms
transition，过渡的简写属性，例如 transition: color 2s ease-in 1ms;
弹出层
堆叠上下文和z-index
一个包含多个同辈元素的容器内，这些同辈元素都会构造一个堆叠上下文。在这个上下文中，它们的子元素会上下堆叠起来。
CSS中的z-index属性，用于控制元素的在堆叠上下文中的次序。即，通过它可以改变元素堆叠时的默认次序。
1. z-index值较大的元素，在堆叠层次中位于z-index值较小的元素上方；
2. z-index属性的值可以是0到无穷大；负值也可以，但在某些浏览器中并不可靠；
3. 默认情况下，所有堆叠元素的z-index的值为auto，相当于0
4. 涉及的元素必须是absolute, relative或fixed定位才行
用CSS创造三角形
7.CSS3实战
规划页面结构
关于页面结构规划，记住：代码结构要符合逻辑，规划组织要考虑层次
页眉（header）
页面标题（section#title）
弧形角：border-radius
盒阴影：box-shadow
1. 例如：box-shadow: 4px 4px 5px 8px #aaa inset;
这几个值分别表示：水平偏移量、垂直偏移量、模糊量、扩展量、颜色、阴影位于边框内部（默认位于边框外部，即outset）
2. 最低限度，必须设定水平偏移量、垂直偏移量和颜色，这样会得到一个与元素宽度和高度大小一致且为指定颜色的硬边阴影
3. 如果水平偏移量和垂直偏移量是负值，阴影会出现在元素左上方
4. box-shadow支持多个阴影声明
搜索表单（form.search）
至少在WebKit浏览器中，可以给占位符文本设定不同样式，让它有别于用户输入的文本
菜单（nav.menu）
在一个元素内居中另一个元素的方法
对于常规、静态定位元素，可以让它向左或向右浮动，或者使用text-align属性让它在父元素内居左、居右或居中。还可以利用自动外边距（margin: 0 auto）来居中元素。
缺点：要居中的元素必须是有宽度的。
使没有固定宽度的元素也能在其父元素内居中：
为要居中元素的父元素应用text-align: center，为要居中的元素设定display: inline-block。
垂直居中
想在一个固定高度的元素内垂直居中一个文本，可以把这一行文本的line-height设定为该元素的高度。假设元素高度为300px，则：
text-align: center; /*水平居中*/
line-height: 300px; /*垂直居中：行高=容器高度*/
垂直居中其他元素，比如图片，可以将容器的display属性设定为table-row，再设定（只对单元格有效的）vertical-align属性为middle，比如：
display: table-cell; /*借用表格的行为*/
vertical-align: center; /*垂直居中*/
text-align: center; /*水平居中*/
专题区
文本阴影text-shadow :
text-shadow: 4px 4px 5px #aaa;
1. 这几个值的含义按顺序分别是：水平偏移量、垂直偏移量、模糊量和颜色
2. 没有扩展量
3. 最低限度，得提供水平偏移量、垂直偏移量和颜色
4. 如果水平和垂直偏移量是负值，阴影会出现在文本左上方
5. 支持多个阴影声明
登录表单
博文链接
图书区
CSS变换
transform属性能够调用函数，调用不同的变换函数可以实现不同形式的变换，而通过传入的参数值可以控制变换的结果。语法如下：
transform: 函数名(数值或x、y值)
scale：用于放大或缩小元素（指定大于1的值放大元素，小于1的值缩小元素），如transform: scale(1.5)
rotate：根据指定的度数旋转元素（正值顺时针旋转，负值逆时针旋转），如transform: rotate(-30deg)
skew：让元素在x轴和y轴方向倾斜（只指定一个值,y轴不受影响），如transform: skew(5deg, 50deg)
translate：根据指定的距离沿x轴和y轴平移对象（对象初始占据的空间会保留），如transform: translate(-50px, 20px)
transform-origin属性设定元素围绕其变换的原点。
1. 默认情况下，这个原点是元素垂直和水平方向的中心点
2. 可以使用transform-origin属性及位置关键字（left, center, right, top 和bottom等）另行设定原点，而使用正、负数字甚至可以把原点设定到元素边界之外
页脚
8.响应式设计
响应式设计的三个重要方面
1. 媒体查询：一种CSS语法，可以根据浏览器的特性，一般是屏幕或浏览器容器宽度提供CSS规则
2. 流式布局：使用em或百分比等相对单位设定也没总体宽度，让布局能够随屏幕大小而缩放
3. 弹性图片：使用相对单位确保图片再大也不会超过其容器
媒体查询
@media规则
可以在样式表或<style>标签的CSS中包含媒体查询，例如：
@media print {
nav {display: none;}
} /*若当前页面要打印，那么不显示nav元素*/
/*只在屏幕宽度不大于568px时应用*/
@media screen and (max-width:568px) {
.column {float: none}
}
最常用的媒体类型：
1. all：匹配所有设备
2. handled：匹配手持设备（小屏幕、单色、带宽有限）
3. print：匹配分页媒体或打印预览模式下的屏幕
4. screen：匹配彩色计算机屏幕
5. 其他：braille（盲文点字触觉反馈设备）、embossed（盲文分页打印机）、projection（投影仪）、speech（语音合成器）、tty（电话机屏幕等固定宽度字符栅格设备）和tv（计算机）
媒体特性：媒体某一方面的特性，一般带有min-或max-前缀。常用有：
1. min-device-width / max-device-width：匹配设备屏幕的尺寸
2. min-width / max-width：匹配视口的宽度，例如浏览器窗口宽度
3. orientation (值为portrait和landscape)：匹配设备是横屏还是竖屏
注：若想通过媒体查询来根据用户对浏览器窗口的缩放重新调整布局，应该使用min-width和max-width
可以使用逻辑运算符and, not, or及关键字all, only组合媒体类型和媒体特性
<link>标签的media属性
若要通过媒体查询应用的CSS规则非常多，那么可以考虑使用<link>标签的media属性设定条件，有选择地加载独立的样式表
例如：
<link type="text/css" media="print" href="css/print_style.css" />
断点(breakpoint)
指媒体查询起作用的屏幕宽度，其写法类似于：
@media screen and (max-width:640px) {/*CSS规则*/}
不要简单地用断点去匹配设备宽度，而是可以从慢慢缩小浏览器窗口开始，在发现当前布局不适合的时候再确定断点，然后编写新样式。不要针对某款具体的设备，而要为宽度在某个范围内的屏幕提供替代的布局，该布局对于范围内的设备都应该适用。
用<meta>标签设定视口
若想让自己的页面布局适合小屏幕，首先就要覆盖自动缩小的设定。方法是在页面的<head>标签内添加一个<meta>标签：
<meta name="viewport" content="width=device-width; maximumscale=1.0" />
这个<meta>标签告诉浏览器按照屏幕宽度来显示网页，不要缩小网页。
媒体查询的两种方式
(@media规则
可以在样式表或<style>标签的CSS中包含媒体查询，例如：
@media print {
nav {display: none;}
} /*若当前页面要打印，那么不显示nav元素*/
/*只在屏幕宽度不大于568px时应用*/
@media screen and (max-width:568px) {
.column {float: none}
}, <link>标签的media属性)
针对平板优化布局
针对智能手机优化布局
最后两个问题
移动Safari中的缩放bug：在设备从竖屏旋转到横屏时会导致缩放和重绘问题
让下拉菜单支持触摸
解决方案：使用Modernizr检测设备是否支持触摸，如果支持再去掉对visibility属性的过渡。如果设备支持触摸，Modernizr会给根元素html添加一个touch类，因此，就可以针对触摸设备单写一条规则