粗细font-weight
设置文字是否加粗显示 。 有两种类型 ：单词类型、数字类型
单词类型 | 属性值 | 说明
| normal | 默认值，定义批准的字体
| bold | 定义粗体字符 ，b strong标签 的默认值
| bolder | 定义更粗的字体
| ligher | 定义更细的字体
数字类型 100-900之间的整百数字。数字越大文字显示越粗。 400==normal 700==bold
字体风格font-style
设置字体是否斜体显示。
| 属性值 | 说明
|normal | 设置正规的字体 ， 大多是标签的默认值
| italic | 设置斜体的文字 ，主要针对英文，要求英文以字体中的斜体样式显示
| oblique | 设置斜体的文字 ， 只是将文字倾斜显示 ， 与字体无关
**行高 line-height **
设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的。
| px 像素值 | 设置的行高的具体像素值
| 百分比数值 | 设置的本身字号像素值的百分比
字体综合font
1.字号 、 字体
2.字号 /行高 、字体重点是字号和行高之间使用 /
3.加粗和斜 体两个值之间可以互 换位置 、 字号、行高、字体不能更改位置。
水平对齐text-align
设置文本水平方向的对齐
| 属性名 | 作用 |
| left | 居中对齐，大部分标签的默认值
| center | 居中对齐
|right| 居右对齐
文本修饰 text-decoration
设置文本整体是否有线条的修饰效果
| 属性名 | 作用 |
| none| 没有修饰， 大部分标签的默认值
| overline | 上划线
| line-through | 中划线，删除线<del>标签的默认值
| underline | 下划线，<a>标签的默认值
**缩进 text-indent **
设置段落首行是否进行缩进
| px 单位 | 表示首行缩进多少像素
| em单位 | 首行缩进几个中文字符的位置
| 百分比 | 表示缩进文字所在标签的父级标签width 属性值的百分比
书写元素内容区域 width+height
盒子可以实体化的区域 width + height + padding + border
盒子实际占位的位置width + height + padding + border + margin
宽度width 高度height
设置可以添加元素内容的区域的宽度
| auto | 默认值，浏览器可计算出实际的宽度
| px | 像素值定义的宽度
| % | 定义参考父元素宽度width 的百分比宽度
内边距padding 、 外边距margin
内边距padding：设置的是元素的边框内部到宽高区域之间的距离。
外边距margin： 设置的是盒子与盒子之间的距离。
四值法 上右下左 padding : 10px 20px 30px 40px
三值法 上 左右 下
二值法 上下 左右
单值法 四个值相同
边框border
设置的是内边距外面的边界区域 作为盒子的实体化的最外层
border ：“宽度 线 颜色 “
border-style | 属性值 | 说明
| none | 定义无边框
| solid | 定义实线
| dashed | 定义虚线 在大多数浏览器中呈现为实线
| dotted | 定义点状边框，在大多数浏览器中呈现为实线
| double | 定义为双线，双线的边框的宽度等于 border-width的值
| groove | 定义3D凹槽边框，其效果取决于border-color 的值
| ridge| 定义3D垄装边框，其效果区域于border-color 的值
| inset| 定义3D内容凹陷效果，其效果取决于border-color 的值
| outset | 定义3D内容凸出效果，其效果取决于border-coloe 的值
清除默认样式
1.大部分容器标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除。
2.<ul>和<li>两种列表有默认的列表前缀，清除list-style属性
3.<a>标签的默认样式，顺带设置页面中常用的a的公共样式：color和text-decorstion
4.清除默认加粗效果:设置font-weight
父子盒模型
父元素的width >= 所有子元素width + padding + border + margin
margin塌陷现象
margin塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的 真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到 了边距值大的值内部
同级元素塌陷： 大的margin吃掉小的
标准文档流：指得是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排版方式。前面内容发生了变化，后面的内容位置也会随着发生变化
微观现象
1.空白折叠现象。
2.文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。
3.自动换行，元素内一行内容写满元素的width时会自动进行换行。[图片上传失败...(image-5327c1-1604048626452)]
元素等级
块级元素：大部分容器级标签包括p标签都是块级元素，比如div,h1-h6,p,pre,ul,ol,li,form,table,label
行内元素：大部分的文本及标签比如 a,span，i（斜体）,em（强调）,sub(下标)，sup（上标） 等。
行内块元素： (img，button,input，textarea,select), img等
显示模式display
display 属性更改的显示模式并没有改变标准流本质性质
| 属性值 |作用
|block|表示元素要以块级元素模式加载，具备块级特点
|inline|表示元素要以行内元素模式加载，具备行内特点
|inline-block| 表示标签及行内块模式加载，具备行内块特点
|none| 表示标签及内容直接隐藏，让出原有标准流的位置
脱离标准流
标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位
浮动定义
1.浮动 (float)：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示
float : right / left
浮动的问题二：父元素没有高度，会影响后面元素的标准流位置，如果福哦的那个的子元素足够高，有可能影响到后面浮动的贴边。
[图片上传失败...(image-7923f-1604048626452)]
清除浮动方法
清除浮动一：给标准流的父元素强制给一个合适的高度height
解决：浮动元素影响后面元素标准流位置和贴边。
问题：父元素不能高度自适应，后面父元素之间如果有margin效果不正确。
清除浮动五：溢出隐藏
overflow：hidden
总结 如果父元素高度是固定的，建议使用height属性解决
如果父元素告诉需要自适应，建议使用overflow属性解决浮动问题
要想让每个伪类的状态正常加载，书写顺序必须是：访问前link、访问后visited、 鼠标移上hover、鼠标点击active。
-背景颜色 background-color
-背景图片 background-image 属性 url(图片路径)
-背景重复 background-repeat
| repeat | 重复，默认属性值，表示会使用背景重复加载填满整个盒子背景区域
| no-repeat| 不重复，不论背景图是否大于盒子范围，都只加载依次图片
| repeat-x | 水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复
| repeat-y | 垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复
-背景定位 background-position 主要用于设置 不重复 的图片在背景区域的加载开始位置
单词表示法 水平方向可选单词：left、center、right
垂直方向可选单词：top、center、bottom
像素表示法 水平 垂直 border以内的
百分比表示法 100%代表的数值
水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。
垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。
-背景附着 background-attachment
| scroll | 滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走
| fixed| 固定的，背景图的定位的参考点从盒子border，以内的左上顶点变为了浏览器窗口的左 上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口 的某个位置，不会随着页面滚动而滚走
background 属性可以将五个单一属性的值进行合写。 属性值：可以有 1-5 个属性值，值之间用空格进行分隔，背景定位的两个属性值算作 一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。
-背景缩放background-size 设置<img>的尺寸
| px值| 1-2个像素值，只设置1个值，垂直方向等比例拉伸；设置2个值，按照设置值 加载
| 百分比 | 同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性
| cover| 自动调整缩放比例，把背景图像扩展至足够大，以使背景图像完全覆盖背景区 域。如有溢出部分则会被隐藏。
| contain | 自动调整缩放比例，把图像图像扩展至最大尺寸，保证图片始终完整显示在背 景区域
-相对定位 relative
相对定位的元素不能脱离标签的原始状态(标准流、浮动),不会让出原来占有的位置
-绝对定位 absolute 脱离标准文档流
子绝父相 、 子绝父绝 、 子绝父固
-固定定位 fixed 脱离标准文档流
-压盖顺序 z-index
HTML5
[图片上传失败...(image-974217-1604048626452)]
<audio>音频标签 ogg mpeg wav
| 属性 | 值 |描述
| autoplay| autoplay| 如果出现该属性，则音频在就绪后马上播放
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮
| loop |loop | 如果出现该属性，则每当音频结束时重新开始播放。
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
| src | url|要播放的音频的 URL。
<video>视频标签 ogg mp4 webm
[图片上传失败...(image-361a85-1604048626452)]
| 属性 | 值 |描述
|autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
| controls | controls | 向用户显示播放控件
| loop | loop|放完是否继续播放该视频，循环播放
| preload | auto |（预先加载视频）
none（不应加载视频） 规定是否预加载视频(如果有了autoplay 就忽略该属性）
| src | url | 视频url地址
|width |pixels(像素) |设置播放器宽度
| height | pixels(像素) |设置播放器高度
| poster| Imgurl | 加载等待的画面图片
|muted |muted| 静音播放
属性值 描述
type="email" 限制用户输入必须为Email类型
type="url" 限制用户输入必须为URL类型
type="date" 限制用户输入必须为日期类型
type="time" 限制用户输入必须为时间类型
type="month" 限制用户输入必须为月类型
type="week" 限制用户输入必须为周类型
type="number" 限制用户输入必须为数字类型
type="range"滑动条
type="tel" 手机号码
type="search" 搜索框
type="color" 生成一个颜色选择表单
<datalist>标签
• <datalist>标签规定了 <input>元素可能的选项列表。
• <datalist>元素包含了一组<option>元素，这些元素表示预定义可选值，在<input>元素输入
过程中，会自动响应<option>元素的值。
• 绑定的<input>标签必须设置 list 属性，属性值等于<datalist>标签的 id 属性值。
新增表单属性
属性 值 描述
required required 表单拥有该属性表示其内容不能为空，必填
placeholder提示文本表单的提示信息，存在默认值将不显示
autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单，一般页面中放1个
autocomplete off / on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填 写的选项。
默认已经打开，如 autocomplete=”on “
关闭 autocomplete =”off”
-需要放在表单内同时加上name属性
-同时成功提交
multiple multiple 可以多选文件提交
CSS3
子级选择器
子级选择器用于选取带有特定父元素的元素 书写语法element1>element2
[图片上传失败...(image-bb266d-1604048626452)]
兄弟选择器
--相邻兄弟选择器 用于选择 紧接 在另一个元素后的兄弟元素，而且二者有相同的父元素。
| element1+element2 | 匹同一个父元素中紧跟在element1后面的一个element2元素
--其他兄弟选择器 匹配同一个父元素中在element1后面的 所有 element2元素
| elemenet~element2 | 匹配同一个父元素中elemenet1后面的所有element2元素
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个 这个是元素的第几个在元素下选取
属性选择器
E[att] 选择具有att属性的E元素
E[att="val"] 选择具有att属性且属性值等于val的E元素
E[att^="val"] 匹配具有att属性、且值以val开头的E元素
E[att$="val"] 匹配具有att属性、且值以val结尾的E元素
E[att*="val"] 匹配具有att属性、且值中含有val的E元素
box-sizing属性
content-box 标准模式 盒子总体大小为 width(height) + padding + border
border-box 怪异模式盒子总体大小为 width 和 height
[图片上传失败...(image-cdef05-1604048626452)]
文字阴影text-shadow
|属性值 |简介
|h-shadow |必需。水平阴影的位置。允许负值。
|v-shadow |必需。垂直阴影的位置。允许负值。
| blur |可选。模糊的距离。
|color |可选。阴影的颜色。
--transition-property过渡的属性
• none 表示没有属性过渡
• all 表示所有变化的属性都过渡
• 属性名 使用具体的属性名，多个属性名中间逗号分隔
--时间
以秒为单位 0s必须加单位
--transition-timing-function 时间曲线
对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可 以取代大量之前只能靠Flash才可以实现的效果。
位移translate()
translate(x,y)x,y分别为水平和垂直方向位移的距离，可以为px值或百分比， 区分正负
translate(x) 只有一个数值，表示水平方向的位移
translate(y) 只有一个数值，表示垂直方向的位移
缩放 scale()
值 说明
scale(x, y)x,y分别为改变元素的宽度和高度的倍数
scale(n) 只有一个值，表示宽度和高度同时缩放n倍
scaleX(n) 改变元素的宽度
scaleY(n) 改变元素的高度
旋转 rotate(deg)
deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转
倾斜 skew()
transform: skew(数字deg,数字deg)
两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个 数值不写默认为0
transform-origin 属性
设置调整元素的水平和垂直方向原点的位置
x 定义 X 轴的原点在何处。可能的值：left 、center、right、像素值、百分比
y 定义 Y 轴的原点在何处。可能的值：top、center、bottom、像素值、百分比
[图片上传失败...(image-ac107d-1604048626452)]
透视属性 perspective
作用：设置在 z 轴的视线焦点的观察位置，从而实现 3D 查看效果。
属性值：像素值，数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸。 注意：透视属性需要设置给 3D 变化元素的父级
3D 旋转
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
[图片上传失败...(image-e781c5-1604048626452)]
3D 位移
translateX(x)设置 X 轴的位移值。
translateY(y)设置 Y 轴的位移值。
translateZ(z)定义3D位移，设置Z轴的位移值。
属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应 轴的负方向移动。
transform-style属性
用于设置被嵌套的子元素在父元素的 3D 空间中显示，子元素会保留自己的 3D 转换坐标轴。
属性值：
flat：所有子元素在 2D 平面呈现
preserve-3d：保留 3D 空间
浏览器兼容
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。
主要都围绕知识点的理解与css兼容性问题上，请参考下面的2.1 link和@import都可以为页面引入CSS文件，其区别是？
将样式定义在单独的.css的文件里，link和@import都可以在html页面引入css文件。有link和@import两种方式，导入方式如下：
link方式：<link rel=”stylesheet” type=”text/css” href=”aa.css”>
@import方式：<style type=”text/css”>@import “aa.css”</style>
link和@import两种导入css文件的区别：
祖先的差别。Link属于XHTML标签，而@import完全是CSS提供的一种方式。Link标签除了可以加载CSS外，还可以做很多其他的事情，比如定义RCC，定义rel连接属性等；@import就只能加载css了。
加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢时更为明显。
兼容性的差别。由于@import是CSS2.1提出的所有老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
使用DOM控制样式时的差别。当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。
@Import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表。
2.2 如何理解CSS样式表的层叠性？
CSS使用层叠的原则来考虑继承、层叠次序和优先级等重要特征，从而判断相互冲突的规则中哪个规则应该起作用。
继承性是指，许多CSS的样式规则不但影响选择器所定义的元素，而且会被这些元素的后代继承。
层叠性是指，当一个web页面使用多个样式表，多个样式表中的样式可层叠为一个。在多个样式表之间所定义的样式没有冲突的时候，浏览器会显示所有的样式。
优先级是指，当发生样式定义冲突时，浏览器首先会按照不同样式规则的优先级来应用样式。CSS样式的优先级如下所示（其中数字3拥有最高的优先权）：
1.浏览器缺省设置；
2.外部样式表（.css文件）或者内部样式表（位于<head>元素内部）；
3.内联样式（作为某个元素的style属性的值）。
同等优先级下，以最后定义的样式为准，important比内联高。
2.3 哪些属性可以继承？
Css中可以继承的属性如下：
文本相关属性：font-family、font-size、font-style、font-variant、font-weight、font 、letter-spacing、line-height、text-align、 text-indent、 text-transform 、word-spacing 、color；
列表相关属性：list-style-image、list-style-position、list-style-type、list-style；
表格相关属性：border-collapse、border-spacing、caption-side、table-layoute；
其他属性：Cursor、visibility；
2.4 CSS选择器中，元素选择器和类选择器的区别是什么？
元素选择器是常见的CSS选择器，即文档的元素就是最基本的选择器。选择器通常是某个HTML元素，比如<p>、<h1>、<em>、<a>等，甚至可以是<html>元素本身。
类选择器用于将样式规则与附带class属性的元素匹配，其中该class属性的值为类选择器中指定的值。使用类选择器时，首先要定义样式类，其语法为：
.className{ }；
所有能够附带class属性的元素都可以使用此样式声明。只需要将class属性的值设置为”className”，则可以将类选择器的样式与元素关联。
在实际使用时，如果需要为某种元素定义样式，则往往使用元素选择器；如果要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
2.5 简要描述CSS中的定位机制
CSS中，除了默认的流定位方式以外，还有如下几种定位机制：浮动定位、相对定位、绝对定位和固定定位。
浮动定位是将元素排除在普通流之外，并且将它放置在包含框的左边或者右边，但是依旧位于包含框之内。
相对定位将元素相对于它在普通流中的位置进行定位。
绝对定位是指将元素的内容从普通流中完全移除，并且可以使用偏移属性来固定该元素的位置。
固定定位是指将元素的内容固定在页面的某个位置。
2.6 display属性和 visibility属性的区别？
可以使用display属性定义建立布局是元素生成的显示框类型。
1.如果将display属性设置为block，可以让行内元素表现得像块级元素一样；
2.如果将display属性设置为inline，可以让块级元素表现得像内联元素一样；
3.可以通过把display属性设置为none，让生成的元素根本没有框。这样的话，该框及其所有内容就不在显示，不占用文档中的空间。
在DIV设计中，室友display:none属性后，HTML元素（对象）的宽度。高度等各种
属性都将”丢失”；而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
2.7 简述对CSS的盒子模型的理解？
CSS盒子模型也叫做框模型，具备内容（content）、填充（padding）、边框（border）、边距（margin）这些属性。在CSS中，每个元素都被视为一个框，而每个框都有三个属性：
border：元素的边框（可能不可见），用于将框的边缘与其他框分开；
margin：外边距，表示框的边缘与相邻框之间的距离，也称为页边空白；
padding：内边距，表示框内容和边框之间的空间。
盒子模型的结构如图所示：
由上图可以看出，width和height指的是内容区域的宽度和高度。增加内边距、外边距和边框不会影响到内容区域的尺寸，但会增加元素框的总尺寸。
因此，如果在一个具有边框的元素中放置文本，往往需要设置一些内边距，以便文本的边缘不要接触边框，这样更便于阅读。而外边距则可以在多个元素框之间创建空白，避免这些框都挤在一起。因此，在设计页面时，经常会使用padding属性和margin属性来设置页面的布局。但是，必须注意的是，一旦用了padding属性或者margin属性设置了元素的边距以后，会增加元素在页面布局中所占的面积。
2.8 简述CSS3中的伪类选择器？
CSS3提供了大量伪类选择器，浏览器对于有些伪类选择器的支持还不太好。目前，常用的伪类选择器有：
目标伪类：即 :target，突出显示活动的HTML锚，用于选取当前活动的目标元素；
元素状态伪类：比如 :enabled、:disabled、:checked；
结构伪类： 比如 :first-child、:last-child、:empty、:only-child；
否定伪类：即 :not(selector)，匹配非指定元素/选择器的每个元素。
2.9 为什么建议设置背景图像的同时还设置背景颜色？
一般建议在使用背景图片的同时提供background-color属性，并且将其设置为和图像主要颜色类似的颜色。这样，如果正在加载页面，或者因为各种原因无法显示背景图像时，页面可以使用这种颜色作为背景色。
2.10 如何居中div？如何居中一个浮动元素？
给div设置一个宽度，然后设置元素的左右外边距为auto，比如，margin:0 auto。则可以实现div居中显示。
对于浮动元素，设置其左右外边距为关键字auto是无效的。此时，如果需要设置其居中显示，可以：1.精确计算其左外边距并进行设置，实现居中显示。
2.使用一个居中显示的div元素包含次浮动元素,
代码如：<div style=”margin:0 auto”><div style=”float:left”></div></div>
2.11 在设置文本的字体时，为什么建议设置替换字体？
可以使用font-family属性来指定文本的字体，代码如下所示：font-family:name/inherit
此时，name为首选字体的名称。如果字体名称有多个单词，即中间有空格，则需要将字体名称用一对单引号或者双引号包围起来。
但是，如果用户机器上并没有安装name所指定的字体，则会显示默认字体。因此，如果可以指定一种替代字体，替代字体可以和指定字体不完全相同，相似且不会影响页面的布局，就可以解决问题了。
我们可以为font-family属性指定多种字体，且多种字体之间用逗号隔开，这样可以为页面指定一个字体列表。如果用户机器没有第一种字体，则浏览器会查找字体列表中的下一种字体替代默认字体显示。如果找遍了字体列表还是没有可以使用的字体，浏览器才会使用默认字体显示页面。代码如下所示：
h1{font-family:Georgia,serif}
此时，如果用户机器上没有安装Georgia，但安装了Times字体（serif字体系列中的一种字体），浏览器就可能对<h1>元素使用Times。尽管Times与Georgia并不完全匹配，但至少足够接近。
因此，我们建议在所有font-family规则中都提供一个通用字体系列。这样就提供了一条后路，在用户机器无法提供与规则匹配的特定字体时，就可以选择一个通用字体作为替换。
2.12 内联元素可以实现浮动吗？
在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。因此，对于内联元素，如果设置为浮动，会产生和块级框相同的效果。
2.13 什么情况下需要额外设置表格的显示规则？
默认情况下（不额外设置表格的显示规则时），表格按照自动表格布局进行显示，即浏览器在显示表之前查看每一个单元格，然后基于所有格的设置计算表单大小，而列的宽度是由列段元个中没有折行的最宽的内容设定的。此时，单元格的大小会适应内容的大小。
自动表格布局的算法在表格复杂时会比较慢，这是由于它需要在确定最终的布局之前访问表格中多有的内容。在不能提前确定每一列的大小时，这种方式会非常适用。
如果额外设置表格的显示规则，即设置table-layout属性的值为fixed，则称为固定表格布局。在固定表格布局中，水平布局仅取决于表格宽度，列宽度，表格边框宽度，单元格间距，而与单元格的内容无关。浏览器将使用某列指定的宽度来计算布局，并使用该宽度计算该列中所有其他单元格的宽度。
固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。因为如果指定使用固定表格布局，浏览器在接收到第一行后就可以显示表格。如果表格庞大且已经指定了大小，则会加速表的显示。
2.14 简要描述CSS中content属性的作用
content属性与:before及:after伪元素配合使用，来插入生成内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器为页面元素插入编号。比如，查看如下代码：
body {counter-reset:chapter}
h1:before { content:”第”counter(chapter)”章”}
h1 { counter-increment:chapter}
使用content属性，并结合:before选择器和计数器counter，可以在每个<h1>元素前插入新的内容。
2.15 CSS Sprite是什么，谈谈这个技术的优缺点
CSS Sprite是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的”background-image”，”background-repeat”，”background-position”的组合进行背景定位。
其优点在于：①减少网页的http请求，提高性能，这也是CSS Sprite最大的优点，
也是其被广泛传播和应用的主要原因；
②减少图片的字节，多张图片合并成1张图片的字节小于多张图片的字节总和；
③较少了命名困扰，只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
④更换风格方便。只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便；
但是CSS Sprite也存在一些不可忽视的缺点：
①图片合成比较麻烦；
②背景设置时，需要得到每一个背景单元的精确位置；
③维护合成图片时，最好只是向下加图片，而不是更改已有图片。
2.16 对CSS3有了解吗？列举几个CSS3的新特性并简要描述
CSS3作为CSS技术的升级版本，着力于模块化发展，将规范分解为一些小的模块，如选择器、盒子模型、列表模块、背景和边框等；并加入了很多新的模块和属性，比如赋值选择器、文字阴影、边框圆角、边框阴影、渐变、过渡、多栏布局、2D/3D转换、动画等。
其中，CSS3提供了一些复杂选择器，用于实现页面复杂情况下的元素选择，如属性选择器，一些伪类和伪元素选择器；渐变用于为元素设置渐变效果的背景；转换可以实现元素的变换，比如位移、缩放、旋转等；过渡可以实现简单的动画效果；动画属性则可以实现复杂的动画，可以实现逐帧制作动画。
2.17 过渡与动画的区别是什么？
过渡属性transition可以在一定的事件内实现元素的状态过渡为最终状态，用于模拟一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果；
动画属性animation可以制作类似Flash动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。
2.18 什么是CSS reset？
CSS reset，又叫做CSS重写或者CSS重置，用于改写HTML标签的默认样式。
有些HTML标签在浏览器里有默认的样式，例如p标签有上下边距，li标签有列表标识符号等。这些默认样式在不同浏览器之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。着必然会带来浏览器兼容问题。
因此，在CSS代码中，可以使用CSS代码去掉这些默认样式，即重新定义标签样式，从而覆盖浏览器的CSS默认属性，即CSS reset。
需要注意的是，在进行样式重写时，不建议使用 * 选择器进行重写，这样会降低效率，影响性能。
2.19 如何清除浮动元素所带来的影响？
浮动定位是指将元素排除在普通流之外，并且将它放置在包含框的左边或者右边，但是依旧位于包含框之内。也就是说，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以元素浮动之后，其原有位置不再保留，其他元素的位置会受到影响。
如果需要清除左侧或者右侧浮动元素带来的影响，则可以使用clear属性来设置。另外，包含框呃逆的子元素浮动后，如果包含框没有设置具体的高度，则其高度会发生变化，此时，可以使用overflow属性来清除子元素浮动后带来的影响。
2.20 谈谈你对浏览器兼容性问题的理解
浏览器的类型及版本的不同会造成CSS效果不尽相同，因此需要实现浏览器兼容，也可以针对不同的浏览器编写不同的CSS。
目前，各主流浏览器的新版本，对应W3C的标准支持很好，因此，首先保证代码符合W3C的标准，这是解决浏览器兼容问题的前提。
其次，对于某些支持受限的属性，针对不同的浏览器添加相应的前缀，比如-webkit-、-o-、-moz-。
第三，对于IE的低版本，可以编写带有特定前缀的代码，实现版本识别。比如：
.bb{
background-color:#f1ee18/*所有识别*/
.background-color:#f1ee18\9/*IE6 7 8识别*/
+background-color:#f1ee18/*IE6 7识别*/
_background-color:#f1ee18/*IE6识别*/
}
另外，对于特定的兼容性问题，特殊解决。常见的特殊问题有：
1.使用CSS reset：对于有些HTML标签，浏览器默认的margin和padding不同，可以使用CSS代码改写默认的样式效果，从而实现统一
2.IE低版本中，不能使用auto关键字实现块级元素居中显示，可以改用设置父元素的text-align；
3.子元素设置上外边距时，父元素需要设置边框或者外边距；
4.外边距合并问题。
一网站调用CSS代码的方法：方法一：XML/HTML代码<style type="text/css"> <!--@import url("css/main.css") @import url("css/font.css") @import url("css/layout.css") --> </style> 方法二：XML/HTML代码<link href="css/tianyi.css" rel="stylesheet" type="text/css" /> 那么这两各方法有什么区别和优缺点呢？本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。差别1：link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。/*大致就这几种差别了，其它的都一样，从上面的分析来看，还是使用link标签比较好。标准网页制作加载CSS文件时，还应该选定要加载的媒体（media），比如screen，print，或者全部all等。 */差别5：@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：CSS代码main.css———————-@import “sub1.css” @import “sub2.css” sub1.css———————-p {color:red} sub2.css———————-.myclass {color:blue}这样更利于修改和扩展． 注：这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码，他们总会把css或js直接写在html里，而不用外部文件。
