1. 三种方法设置CSS样式
1）内联式CSS样式，如<p style="color: red; font-size: 12px;">文本</p>
2）嵌入式CSS样式，把CSS样式代码写在<style type="text/css"></style>之间
3）外部式CSS样式，在<head>标签中使用<link>标签，将CSS样式文件链接到HTML文件内。<link href="base.css" rel="stylesheet" type="text/css" />。rel属性规定当前文档与被链接文档之间的关系。
2. 三种方法设置CSS样式优先级
内联式>嵌入式>外部式 （前提为嵌入式必须在外部式后面）
简单说就是就近原则，越靠后越有效，后面的效果会覆盖前面的。
3. 选择器
1）类选择器 .className {}
2）id选择器 #id {}
3）子选择器 .food>li {}；用于选择指定标签的第一代子元素。如果不用“>”符号，则类名为food的标签下的所有li元素都会被选择，而不止第一代。
4）包含选择器 .food li {} 作用于所有子后代元素
5）伪类选择器 a.hover {color: red;} 伪类选择器允许给HTML不存在的标签（标签的某种状态）设置样式。前例为我们给HTML中一个链接标签的鼠标滑过状态设置字体颜色。
4. 浏览器通过权值选择CSS样式
标签权值为1，类选择器权值为10，id选择器权值为100。继承的权值很低，有些文献称其为0.1。
例：p {} 权值为1
p span {} 权值为1+1=2
p span .warning {} 权值为1+1+10=12
5. CSS的层叠 后面的样式会覆盖前面的样式
6. CSS的重要性
p {color: red !important;} 可将一句样式（而不是整个选择器的样式）设置为最高权值，甚至高于用户自己设置的样式。
7. CSS格式化排版
1）文字排版
body {
font-family: "宋体"; /*为网页中的文字设置字体为宋体*/
font-size: 12px; /*字号*/
color: #666; /*颜色*/
font-weight: bold; /*文字粗体*/
font-style: italic; /*文字斜体*/
text-decoration（单词意思为装饰）: underline; /*文字下划线*/
text-decoration: line-through; /*文字删除线*/
}
2）段落排版
p {
text-indent: 2em; /*缩进，段前缩进文字的2倍大小*/
line-height: 1.5em; /*行高为文字的1.5倍*/
letter-spacing: 5px; /*中文字间距，英文字母与字母间距*/
word-spacing: 5px; /*英文单词间距*/
text-align: center/left/right; /*块状元素中的文本或图片居中居左或居右*/
}
8. 元素分类
1）块级元素 设置display: block
特点：每个块级元素都从新的一行开始，并且其后的元素也另起一行（即一个块级元素独占一行）；元素的高度、宽度、行高及顶、底边距都可设置；元素宽度默认和父容器一致（如果未设置）。
2）内联元素 设置display: inline
特点：和其他元素在同一行上；高度、宽度及顶、底边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
3）内联块状元素 设置display: inline-block
特点：和其他元素在同一行上；元素的高度、宽度、行高及顶、底边距都可设置。
9. 盒模型
1）边框
a. 边框三属性：粗细、样式、颜色 div {border: 1px solid red;}
b. border-style常见样式：dashed-虚线；dotted-点线；solid-实线。
c. 只为一个方向设置边框：border-bottom/top/left/right。
2）盒模型的宽度和高度
a. 宽度 = margin-left + border + padding-left + width + padding-right + border + margin-right；
b. 高度 = margin-top + border + padding-top + height + padding-bottom + border + margin-bottom；
3）盒模型-元素内容与边框之间的距离padding
a. div {padding: 20px 10px 15px 30px;} 设置顺序为上-右-下-左，顺时针；
b. div {padding: 10px;} 上下左右都为10px；
c. div {padding: 10px 20px;} 上下为10px，左右为20px。
4）盒模型-边框外的距离margin
与padding的使用方法相同。区别为，margin在边框外，padding在边框内。
10. CSS布局模型
1）流动模型（flow）
a. 默认的网页布局。
b. 块状元素在其所处的包含元素内自上而下按照顺序垂直延伸分布，宽度为100%。
c. 内联元素在其所处的包含元素内从左到右水平分布显示。
2）浮动模型（float）
a. 可以使两个块级元素并排显示。
b. float:left在左边显示，float:right在右边显示。
3）层模型 具有三种形式。
a. 绝对定位 position: absolute
相对于父包含块（父包含块必须设置position: relative）或浏览器窗口（即body元素）定位（left: 20px）之类。
b. 相对定位 position: relative
相对于元素以前的位置移动。
c. 固定定位 position: fixed
与absolute类似，但不会随浏览器滚动条的滚动而发生变化。这与background-attchment: fixed属性功能相似。
d. relative和absolute结合使用
父元素：position: relative 子元素：position: absolute 这样设置后，子元素就可以相对于父元素进行定位。
11. CSS代码缩写
1）盒模型代码简写 padding border margin
padding: 10px 20px 30px 40px; 上右下左（顺时针）
padding: 10px 20px; 上下（10px）左右（20px）
2）颜色值缩写
十六进制颜色，每两位相同，可缩写一半
#000000缩写为#000，#336699缩写为#369。
3）字体缩写
body {
font-style: italic;
font-weight: bold;
font-variant: small-caps; // 全大写并缩小英文字母字体
font-size: 12px;
line-height: 1.5em;
font-family: "宋体", sams-serif;
}
缩写为：
body {
font: italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
12. 水平居中设置
1）行内元素水平居中设置（文本、图片等）
通过给父元素设置text-align: center来实现。（text-align，对其元素中的文本、图片等行内元素）。
2）定宽块状元素居中设置
可以使定宽块状元素的左右margin相同，即设置width: 500px; margin: 200px（上下） auto;
3）不定宽块状元素居中设置
a. 加入table标签，包括<tbody>、<tr>、<td>，然后为这个table设置左右margin相同来居中。
<table> CSS: table {
<tbody> margin: 0 auto;
<tr> }
<td>
<div></div>
</td>
</tr>
</tbody>
</table>
b. 将元素装入块状元素div中，设置display: inline，然后在父元素中设置text-align: center实现居中。
这种方法相较于第一种，不用增加无语义标签，简化了标签嵌套的深度，但也存在问题，将块状元素display: inline改为行内元素，少了一些功能，如设定长度值。
c. 给父元素设置float，然后给父元素设置float: left; position: relative 和 left: 50%，子元素设置position: relative 和 left: -50%。
不增加无语义标签，不增加嵌套深度，但设置了position: relative，带来了一定的副作用。
13. 垂直居中设置
1）父元素高度确定的单行文本
设置文本父元素的height和line-height高度一致来实现。
2）父元素高度确定的多行文本
a. 使用时插入table标签（包括tbody、tr、td），同时设置vertical-align: middle
td标签默认设置了vertical-align为middle，所以不需要显式地设置了。
vertical-align这个样式只有在父元素为th或td的时候才会生效。
b. 在chrome、Firefox及IE8以上的浏览器下可以设置块级元素的display: table-cell，激活vertical-align属性。
vertical-align:middle可以对行内元素如<img>生效，在父元素中垂直居中。
对父元素设置display:table-cell和vertical-align:middle使父元素内的元素垂直居中。
14. 隐性改变display类型
1）当元素（不论之前是什么类型的元素，display:none除外）设置以下两个句子之一
position: absolute
float:left或float:right
元素会自动变为以display: inline-block的方式显示，当然就可以设置元素的width和height且默认不占满父元素。
1）内联式CSS样式，如<p style="color: red; font-size: 12px;">文本</p>
2）嵌入式CSS样式，把CSS样式代码写在<style type="text/css"></style>之间
3）外部式CSS样式，在<head>标签中使用<link>标签，将CSS样式文件链接到HTML文件内。<link href="base.css" rel="stylesheet" type="text/css" />。rel属性规定当前文档与被链接文档之间的关系。
2. 三种方法设置CSS样式优先级
内联式>嵌入式>外部式 （前提为嵌入式必须在外部式后面）
简单说就是就近原则，越靠后越有效，后面的效果会覆盖前面的。
3. 选择器
1）类选择器 .className {}
2）id选择器 #id {}
3）子选择器 .food>li {}；用于选择指定标签的第一代子元素。如果不用“>”符号，则类名为food的标签下的所有li元素都会被选择，而不止第一代。
4）包含选择器 .food li {} 作用于所有子后代元素
5）伪类选择器 a.hover {color: red;} 伪类选择器允许给HTML不存在的标签（标签的某种状态）设置样式。前例为我们给HTML中一个链接标签的鼠标滑过状态设置字体颜色。
4. 浏览器通过权值选择CSS样式
标签权值为1，类选择器权值为10，id选择器权值为100。继承的权值很低，有些文献称其为0.1。
例：p {} 权值为1
p span {} 权值为1+1=2
p span .warning {} 权值为1+1+10=12
5. CSS的层叠 后面的样式会覆盖前面的样式
6. CSS的重要性
p {color: red !important;} 可将一句样式（而不是整个选择器的样式）设置为最高权值，甚至高于用户自己设置的样式。
7. CSS格式化排版
1）文字排版
body {
font-family: "宋体"; /*为网页中的文字设置字体为宋体*/
font-size: 12px; /*字号*/
color: #666; /*颜色*/
font-weight: bold; /*文字粗体*/
font-style: italic; /*文字斜体*/
text-decoration（单词意思为装饰）: underline; /*文字下划线*/
text-decoration: line-through; /*文字删除线*/
}
2）段落排版
p {
text-indent: 2em; /*缩进，段前缩进文字的2倍大小*/
line-height: 1.5em; /*行高为文字的1.5倍*/
letter-spacing: 5px; /*中文字间距，英文字母与字母间距*/
word-spacing: 5px; /*英文单词间距*/
text-align: center/left/right; /*块状元素中的文本或图片居中居左或居右*/
}
8. 元素分类
1）块级元素 设置display: block
特点：每个块级元素都从新的一行开始，并且其后的元素也另起一行（即一个块级元素独占一行）；元素的高度、宽度、行高及顶、底边距都可设置；元素宽度默认和父容器一致（如果未设置）。
2）内联元素 设置display: inline
特点：和其他元素在同一行上；高度、宽度及顶、底边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
3）内联块状元素 设置display: inline-block
特点：和其他元素在同一行上；元素的高度、宽度、行高及顶、底边距都可设置。
9. 盒模型
1）边框
a. 边框三属性：粗细、样式、颜色 div {border: 1px solid red;}
b. border-style常见样式：dashed-虚线；dotted-点线；solid-实线。
c. 只为一个方向设置边框：border-bottom/top/left/right。
2）盒模型的宽度和高度
a. 宽度 = margin-left + border + padding-left + width + padding-right + border + margin-right；
b. 高度 = margin-top + border + padding-top + height + padding-bottom + border + margin-bottom；
3）盒模型-元素内容与边框之间的距离padding
a. div {padding: 20px 10px 15px 30px;} 设置顺序为上-右-下-左，顺时针；
b. div {padding: 10px;} 上下左右都为10px；
c. div {padding: 10px 20px;} 上下为10px，左右为20px。
4）盒模型-边框外的距离margin
与padding的使用方法相同。区别为，margin在边框外，padding在边框内。
10. CSS布局模型
1）流动模型（flow）
a. 默认的网页布局。
b. 块状元素在其所处的包含元素内自上而下按照顺序垂直延伸分布，宽度为100%。
c. 内联元素在其所处的包含元素内从左到右水平分布显示。
2）浮动模型（float）
a. 可以使两个块级元素并排显示。
b. float:left在左边显示，float:right在右边显示。
3）层模型 具有三种形式。
a. 绝对定位 position: absolute
相对于父包含块（父包含块必须设置position: relative）或浏览器窗口（即body元素）定位（left: 20px）之类。
b. 相对定位 position: relative
相对于元素以前的位置移动。
c. 固定定位 position: fixed
与absolute类似，但不会随浏览器滚动条的滚动而发生变化。这与background-attchment: fixed属性功能相似。
d. relative和absolute结合使用
父元素：position: relative 子元素：position: absolute 这样设置后，子元素就可以相对于父元素进行定位。
11. CSS代码缩写
1）盒模型代码简写 padding border margin
padding: 10px 20px 30px 40px; 上右下左（顺时针）
padding: 10px 20px; 上下（10px）左右（20px）
2）颜色值缩写
十六进制颜色，每两位相同，可缩写一半
#000000缩写为#000，#336699缩写为#369。
3）字体缩写
body {
font-style: italic;
font-weight: bold;
font-variant: small-caps; // 全大写并缩小英文字母字体
font-size: 12px;
line-height: 1.5em;
font-family: "宋体", sams-serif;
}
缩写为：
body {
font: italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
12. 水平居中设置
1）行内元素水平居中设置（文本、图片等）
通过给父元素设置text-align: center来实现。（text-align，对其元素中的文本、图片等行内元素）。
2）定宽块状元素居中设置
可以使定宽块状元素的左右margin相同，即设置width: 500px; margin: 200px（上下） auto;
3）不定宽块状元素居中设置
a. 加入table标签，包括<tbody>、<tr>、<td>，然后为这个table设置左右margin相同来居中。
<table> CSS: table {
<tbody> margin: 0 auto;
<tr> }
<td>
<div></div>
</td>
</tr>
</tbody>
</table>
b. 将元素装入块状元素div中，设置display: inline，然后在父元素中设置text-align: center实现居中。
这种方法相较于第一种，不用增加无语义标签，简化了标签嵌套的深度，但也存在问题，将块状元素display: inline改为行内元素，少了一些功能，如设定长度值。
c. 给父元素设置float，然后给父元素设置float: left; position: relative 和 left: 50%，子元素设置position: relative 和 left: -50%。
不增加无语义标签，不增加嵌套深度，但设置了position: relative，带来了一定的副作用。
13. 垂直居中设置
1）父元素高度确定的单行文本
设置文本父元素的height和line-height高度一致来实现。
2）父元素高度确定的多行文本
a. 使用时插入table标签（包括tbody、tr、td），同时设置vertical-align: middle
td标签默认设置了vertical-align为middle，所以不需要显式地设置了。
vertical-align这个样式只有在父元素为th或td的时候才会生效。
b. 在chrome、Firefox及IE8以上的浏览器下可以设置块级元素的display: table-cell，激活vertical-align属性。
vertical-align:middle可以对行内元素如<img>生效，在父元素中垂直居中。
对父元素设置display:table-cell和vertical-align:middle使父元素内的元素垂直居中。
14. 隐性改变display类型
1）当元素（不论之前是什么类型的元素，display:none除外）设置以下两个句子之一
position: absolute
float:left或float:right
元素会自动变为以display: inline-block的方式显示，当然就可以设置元素的width和height且默认不占满父元素。
433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
