css怎么理解啊??

2023-04-22 06:16:02html-css021

css怎么理解啊??,第1张

CSS之入门篇——推荐新手

关于CSS样式表

一.在学习css之前你应该掌握哪些基础知识

1.什么是网页，什么是超文本语言（html）。

2.会使用Dreamweaver等常用的网页编辑器。

Dreamweaver是现今最好的网站编辑工具之一，而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS，用它来给制作网页的CSS样式表会更简单、更方便。本教程教你如何利用Dreamweaver8在页面中加入CSS，你不用死记硬背的记代码标记，也不用去看很厚的CSS手册，你就可以轻松自如的在网页中运用CSS。不过首先你要对CSS有一定的了解。因此，本教程的前面4章为CSS理论知识，主要是对CSS的全面介绍，希望读者看后对CSS的语法、结构、应用有一个全面的了解；后面4章为DW实战，主要是教你如何利用Dreamweaver8灵活运用CSS在网页中。阅读此文前，你需要对HTML有一定的了解，并会使用Dreamweaver。

二.认识CSS

CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。

网页设计最初是用HTML标记来定义页面文档及格式，例如标题<h1>、段落<p>、表格<table>、链接<a>等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。W3C把DHTML(Dynamic HTML)分为三个部分来实现：脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。

注意：CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持，有些效果需要更高版本的浏览器支持。

三.怎样使用CSS

如果你使用的是Dreamweaver MX 2004以上的版本，在定义文字字体、颜色、大小等属性的时候，查看一下代码你会发现有这样的一部分在head区域：

<!--

.STYLE2 {

font-size: 16pt

font-family: "Courier New", Courier, monospace

font-weight: bold

color: #FF3300

}

-->

</style>

那么恭喜你，你已经使用了CSS设计网页。

那么除了这种调用CSS的方法外，还有别的吗？回答是“当然有了”，下面是系统介绍

标记加注法(in-line)：

如果只有一个HTML标记需要设定样式，则可在该标记内，加上属性

style=" "

以个别修订样式。

页面内嵌法：

外部调用法：

双表法调用样式表：

1. 基本语法

CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。

基本格式如下：

selector {property: value}

（选择符 {属性：值}）

选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：

body {color: black}

选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。

如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：

p {font-family: "sans serif"}

（定义段落字体为sans serif）

作者：嘉年水木封 2006-11-5 14:17 回复此发言删除

--------------------------------------------------------------------------------

2 CSS之入门篇——推荐新手

如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：

p {text-align: centercolor: red}

（段落居中排列；并且段落中的文字为红色）

为了使你定义的样式表方便阅读，你可以采用分行的书写格式：

{

text-align: center

color: black

font-family: arial

}

（段落排列居中，段落中文字为黑色，字体是arial）

2. 选择符组

你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：

h1, h2, h3, h4, h5, h6 { color: green }

（这个组里包括所有的标题元素，每个标题元素的文字都为绿色）

p, table{ font-size: 9pt }

（段落和表格里的文字尺寸为9号字）

效果完全等效于：

p { font-size: 9pt }

table { font-size: 9pt }

3. 类选择符

用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：

p.right {text-align: right}

p.center {text-align: center}

然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：

<p class="right">这个段落向右对齐的

</p>

这个段落是居中排列的

</p>

<p class="right">这个段落向右对齐的

</p>

这个段落是居中排列的

</p>

注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。

类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：

.center {text-align: center}

（定义.center的类选择符为文字居中排列）

这样的类可以被应用到任何元素上。下面我们使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符：

这个标题是居中排列的

</h1>

这个段落也是居中排列的

</p>

注意：这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。

4. ID选择符

在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。

ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代：

这个段落向右对齐

</p>

定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id="intro"的元素：

#intro

{

font-size:110%

font-weight:bold

color:#0000ff

background-color:transparent

}

（字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明）

下面这个例子，ID属性只匹配id="intro"的段落元素：

p#intro

{

font-size:110%

font-weight:bold

color:#0000ff

background-color:transparent

}

注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。

5. 包含选择符

可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：

table a

{

font-size: 12px

}

在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。

6. 样式表的层叠性

层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在DIV标记中嵌套P标记：

作者：嘉年水木封 2006-11-5 14:17 回复此发言删除

--------------------------------------------------------------------------------

3 CSS之入门篇——推荐新手

div { color: redfont-size:9pt}

……

<div>

<p>

这个段落的文字为红色9号字

</p>

</div>

（P元素里的内容会继承DIV定义的属性）

注意：有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档BODY一样的上边界值。

另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色：

div { color: redfont-size:9pt}

p {color: blue}

……

<div>

<p>

这个段落的文字为蓝色9号字

</p>

</div>

我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。

不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如：

p { color: #FF0000!important }

.blue { color: #0000FF}

#id1 { color: #FFFF00}

我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。

7. 注释

你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以"/*" 开头，以"*/" 结尾，如下：

/* 定义段落样式表 */

{

text-align: center/* 文本居中排列 */

color: black/* 文字为黑色 */

font-family: arial /* 字体为arial */

}

/* 定义段落样式表 */

{

text-align: center/* 文本居中排列 */

color: black/* 文字为黑色 */

font-family: arial /* 字体为arial */

}

前面我们了解了CSS的语法，但要想在浏览器中显示出效果，就要让浏览器识别并调用。当浏览器读取样式表时，要依照文本格式来读，这里介绍四种在页面中插入样式表的方法：[u]链入外部样式表[/u]、[u]内部样式表[/u]、[u]导入外表样式表[/u]和[u]内嵌样式[/u]。

1. 链入外部样式表

链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内，如下：

<head>

……

……

</head>

上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。media是选择媒体类型，这些媒体包括：屏幕，纸张，语音合成设备，盲文阅读设备等。

一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。

样式表文件可以用任何文本编辑器（例如：记事本）打开并编辑，一般样式表文件扩展名为.css。内容是定义的样式表，不包含HTML标记，mystyle.css这个文件的内容如下：

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

/*定义水平线的颜色为土黄；段落左边的空白边距为20象素；页面的背景图片为images目录下的back40.gif文件*/

2. 内部样式表

内部样式表是把样式表放到页面的<head>区里，这些定义的样式就应用到页面中了，样式表是用<style>标记插入的，从下例中可以看出<style>标记的用法：

<head>

……

作者：嘉年水木封 2006-11-5 14:17 回复此发言删除

--------------------------------------------------------------------

4 CSS之入门篇——推荐新手

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

</style>

……

</head>

注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而不让它显示：

<head>

……

<!--

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

-->

</style>

……

</head>

3. 导入外部样式表

导入外部样式表是指在内部样式表的<style>里导入一个外部样式表，导入时用@import，看下面这个实例：

<head>

……

<!--

@import “mystyle.css”

其他样式表的声明

-->

</style>

……

</head>

例中@import “mystyle.css”表示导入mystyle.css样式表，注意使用时外部样式表的路径。方法和链入样式表的方法很相似，但导入外部样式表输入方式更有优势。实质上它相当于存在内部样式表中的。

注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。

4. 内嵌样式

内嵌样式是混合在HTML标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，如下例：

这是一个段落

</p>

在style参数后面的引号里的内容相当于在样式表大括号里的内容。

注意：style参数可以应用于任意BODY内的元素（包括BODY本身），除了BASEFONT、PARAM和SCRIPT。

5. 多重样式表的叠加

上一章里我们已经提到样式表的层叠顺序，这里我们讨论插入样式表的这几种方法的叠加，如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。例如，我们首先链入一个外部样式表，其中定义了h3选择符的color 、text-alig和font-size属性：

{

color: red

text-align: left

font-size: 8pt

}

/*标题3的文字颜色为红色；向左对齐；文字尺寸为8号字*/

然后在内部样式表里也定义了h3选择符的text-align和font-size属性：

{

text-align: right

font-size: 20pt

}

/*标题3文字向右对齐；尺寸为20号字*/

那么这个页面叠加后的样式就是：

color: red

text-align: right

font-size: 20pt

/*文字颜色为红色；向右对齐；尺寸为20号字*/

字体颜色从外部样式表里保留下来，而对齐方式和字体尺寸都有定义时，按照后定义的优先而依照内部样式表。

注意：依照后定义的优先，所以优先级最高的是[s]内嵌样式[/s]，[s]内部样式表[/s]高于[s]导入外部样式表[/s]，[s]链入的外部样式表[/s]和[s]内部样式表[/s]之间是最后定义的优先级高。

主要都围绕知识点的理解与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代码改写默认的样式效果，从而实现统一