Css（cascading style sheet）层叠样式表：修饰网页信息的显示样式。
渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级（graceful degradation）：一开始就构建完整的功能，然后在针对低版本浏览器进行兼容。
1、css 基本语法及引入方式
基本语法：选择符{属性：属性值；}
引入方式：
（1）、内联样式：<标签 style=“属性:属性值;属性:属性值;”></标签>。
（2）、内部样式：通过在 head 标签中添加<style type=“text/css”>css语句</style>
（3）、外部样式：
通过 <link rel=“stylesheet” type=“text/css” href=“目标文件路径及文件名全称”/>
通过<style type=“text/csss”>@import url(目标文件路径及文件名全称);</style>
link和import导入外部样式的区别：
差别1：老祖宗的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。
差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。
差别3：兼容性的差别。：@import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
样式表的优先级：内联样式表的优先级别最高，内部样式表和外部样式表的优先级跟书写的顺序有关。
样式的优先级：!important（有兼容）比内联样式优先级高；优先级就近原则，样式定义最近者为准；以最后载入的样式为准;
2、css 选择器及权重计算方法
常用的选择符有十种左右：类型选择符，id选择符，class选择符，通配符，群组选择符，包含选择符，伪类选择符，伪对象选择符、字选择符、通配符。
css中用四位数字表示权重，权重的表达方式如：0，0，0，0
子选择符的权重为0000、继承样式的权重为0000、类型选择符的权重为0001
class选择符的权重为0010、属性选择符的权重为0010、伪类选择符的权重为0010
伪元素选择符的权重为0010、id选择符的权重为0100、内联样式的权重为1000
包含选择符的权重：为包含选择符的权中之和、群组选择符的权重为它们各自本身的权重
正常顺序为：a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
3、css 样式重置 reset
由于个版本浏览器具有差异化，为了便于样式统一，采用 css reset。会对搜索引擎优化造成小影响。
normalize.css保护了元素有价值的默认值，修复了常见的bug，未使用大段的继承链、模块化的、拥有详细的文档。
normalize.css支持包括手机浏览器在内的超多浏览器，同时对HTML元素，排版，列表，嵌入的内容，表单和表格都进行了一般化。尽管这个项目进行了一般化的原则，但我们还是在合适的地方使用了更实用的默认值。
4、css 盒模型
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。
盒子的实际大小（标准盒模型）：
宽 =左右margin+左右border+左右padding+width
高 =上下margin+上下border+上下padding+height
盒子的实际大小（IE盒模型）：
宽 =左右margin+width
高 =上下margin+height
5、css 定位浮动
position：static /absolute/relative/fixed
float：right/left;
绝对定位和相对定位的区别
1、参照物不同绝对定位的参照物是包含块，相对定位的参照物是元素本身位置；
2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序,无论是否进行移动，元素仍然占据原来的空间。
6、css 背景
插入图片：属于网页内容，也就是结构。
背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。
背景图的固定
语法：选择符{background-attachment:scroll(滚动)/fixed(固定);}
背景属性的缩写语法：background:属性值1 属性值2 属性值3；
背景缩写：background: url（背景图片的路径及全称） no-repeat center top；
7、元素类型的转换
盒子模型可通过display属性来改变默认的显示类型
1）display属性与属性值 (18个属性值)
属性值：block/inline/inline-block/none/list-item/table-header-group/table-footer-group
作用：该属性设置或检索对象元素应该生成的盒模型的类型。
说明：各属性值的作用
1)block块状显示：类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。
2)inline内联显示：在元素后面删除换行符，多个元素可以在一行内并列显示。
3)inline-block行内块元素显示：元素的内容以块状显示，与行内的其他元素显示在同一行。（只有这一个元素类型支持vertical-align属性）img,input。
4)none 此元素不会被显示。
5)list-item:将元素转换成列表。li的默认类型。
说明：
1、大部分块元素display属性值默认为block，其中列表的默认值为list-item。
2、大部分内联元素的display属性值默认为inline,其中img,input，默认为inline-block。
3、设置了float属性后，元素自动转换块元素，体积与内容同宽；
8、css 文本，字体
为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下，1em=16px,0.75em=12px;
倾斜：font-style：italic(倾斜度小)/oblique（倾斜度大）/normal（取消倾斜，常规显示）;
说明：italic和oblique都表示倾斜，不过oblique的幅度要大一点，但一般浏览器对它们的区分不是很明显。
水平对齐方式{text-align:left/right/center/justify（两端对齐中文不起作用）;}
垂直对齐方式{vertical-align:top/bottom/middle;}
文本字体：{font-family:字体1，字体2，字体3；}
当字体是中文字体时，需加双引号；"微软雅黑"，"宋体"
当英文字体中有空格时，需加双引号如（“Times New Roman”）
当英文字体只有一个单词组成是不加双引号；如：（Arial）；
Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.
font属性的简写：
说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)
顺序: font-weight | font-size / line-height | font-family
(1)简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。
(2) 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight 他们会使用缺省值。
文本修饰：text-decoration:none/underline/overline/line-through/blink.(高版本浏览器不支持blink属性)
首行缩进：{text-indent:value;}
说明：
1）text-indent可以取负值；
2）text-indent属性只对第一行起作用。
字间距{letter-spacing:value;}控制英文字母和汉字的字距。（英文字母和字母）
词间距{word-spacing:value;}控制英文单词词距。（通用于英文词和词之间的间距）
文本流控制{layout-flow:horizontal/vertical-ideographic;}（只支持IE浏览器）
说明：
1）horizontal:自左向右
2）vertical-ideographic:自上而下
关于溢出:
1)溢出属性（容器的）
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
visible:默认值，内容不会被修剪，会成现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
inherit：规定应该从父元素继承overflow属性的值。
2)空余空间
white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit
该属性用来设置如何处理元素内的空白；
normal：默认值，空白会被浏览器忽略，
pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；
nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止；
pre-wrap：保留空白符序列，但是正常的进行换行；
pre-line:合并空白符序列，但是保留换行符；
inherit：规定应该从父元素继承White-space属性的值；(ie浏览器都不支持此属性值)
3)文本溢出:text-overflow:clip/ellipsis
取值：
clip：不显示省略号（...），而是简单的裁切;
ellipsis：当对象内文本溢出时，显示省略标记；
说明：
text-overflow属性仅是...，当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
1、容器宽度：width：value；
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：text-overflow：ellipsis;
9、 css 列表，表单，表格
ul 无序列表、ol 有序列表、dl 自定义列表
定义列表符号样式：
list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；
使用图片作为列表符号：
list-style-image：url(所使用图片的路径及全称)；
定义列表符号的位置：
list-style-position:outside(外边)/inside(里边)；
list-style:none;去掉列表符号
表单
1)表单字段集
<fieldset></fieldset>
功能：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。
fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。
2)字段级标题
<legend></legend>
功能：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素。
3)提示信息标签
<label for="绑定控件id名"></label>
功能：label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。
表格高级
1、表格的作用：显示数据;
（一）关于表格的CSS属性
1、单元格间距(该属性必须给table添加)
border-spacing:value;
2、合并相邻单元格边框
border-collapse:separate(边框分开)/collapse(边框合并)；
3、无内容单元格显示、隐藏
empty-cells:show/hide;
4、表格布局算法(加快运行的速度)
table-layout:auto/fixed(固定宽高，不会随内容多少改变单元格宽高)
5、表格标题
<caption>标题内容</caption>
caption:表格标题
表格标题位置：caption-side:top/right/bottom/left
说明：left,right位置只有火狐识别，top,bottom IE6以上版本支持，ie6以下版本不支持其它属性值，只识别top;
6、表格布局元素
1、表格基本组成
table（表格） tr（行） td（列）
th:表格列标题（放在tr里）
重要属性：
1）colspan="value" 合并列
2）rowspan="value" 合并行
3）valign="top/bottom/middle/baseline" 垂直对齐方式
４）rules="groups/rows/cols/all/none" 添加组分隔线
说明：
rows:位于行之间的线条
cols:位于列之间的线条
all：位于行和列之间的线条
none:没有线条
groups:位于行组和列组之间的线条
2、数据行分组
<thead></thead> 表头
<tbody></tbody> 表体
<tfoot></tfoot> 表尾
说明：一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody。
3、数据列分组
<colgroup span="value"></colgroup>
<col span="value" />
说明：
1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。
3）可以通过给table添加rules="groups"属性来给分组列添加组分割线。
注意：虽然col和colgroup具有相同的功能，但是，我们只能使用colgroup元素来决定表格内容部分分割线（rules）应该处于的位置，而col没有这个功能。
10、css3新增透明属性
语法 ：background:rgba(value,value,value,value);
说明：前三个值是RGB的颜色值，最后一个是透明的数值。
CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
11、css unicode
> >
< <
 ；
©；
&；
12、Flash和marquee(滚动字幕)
1、插入flash
1）语法：
<object width="value" height="value">
<param name="movie" value="flash路径及全称" />
<embed width="value" height="value" src="flash路径及全称"></embed>
</object>
说明：flash源文件格式.fla,
导出影片为.swf,
创建播放器格式为.exe.
gif格式：.gif
2）将flash背景设置为透明
<param name="wmode" value="transparent" />
给<embed>标记添加属性：wmode="transparent"
13、伪对象选择符：
1）:after与content属性一起使用，定义在对象后的内容。
如：div:after{content:url(logo.jpg);}
div:after{content:"文本内容";}
2）:before与content属性一起使用，定义在对象前的内容。
如：div:before{content:"在其前放内容";}
3）、：first-letter定义对象内第一个字符的样式。
说明：(该伪元素只能用于块级元素。)
4）、：first-line:定义对象内第一行的样式。
说明：
*(该伪元素只能用于块级元素。)
*ie6以下版本浏览器不支持伪对象选择符。
*visibility:hidden/visible;隐藏/可见
*visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失。