3.2.2 CSS的高级用法_Web技术应用基础-QQ阅读男生都市网

上QQ阅读APP看书，第一时间看更新

3.2.2　CSS的高级用法

CSS的高级用法包括CSS与HTML的属性对比，以及CSS中相关属性的细分，鉴于本书的重点是介绍Web的基本知识，因此只介绍最基本的CSS用法。另外，由于现在的W3C标准提倡使用HTML作为语义，使用CSS进行页面渲染，因此在CSS与HTML属性对比中，是希望读者能够了解两者的区别，在代码书写中，尽量将HTML的自带样式转化为CSS的标准样式。

1．CSS高度

这里的CSS高度是指通过CSS来控制设置对象的高度。使用CSS属性单词height。单位可以使用px、em等，常使用px（像素）为单位。实例如下：

以上高度设置的都是采用的数字加单位的写法，如height：500px；的用法，其他用法一致，默认单位为px，并且提倡使用px作为默认单位。另外，在有些HTML的语法中，也提供了height="100"的方式作为样式，这种方式已经默认被淘汰，如以下代码的用法，最后转化为上述CSS的标准样式：

以上代码分别设置了高度为100px和50px的两行表格。接下来讲解CSS高度的使用方法及技巧。

（1）CSS自适应高度

CSS中的高度的特点是：高度随着内容的增加而增加，也就是说，CSS的height属性如果不设置，会被CSS盒子中内容撑高，也就是所谓的高度自适应。这种自适应的写法需要根据页面的需求来使用，无需在页面中使用height：auto；的方式来标注。

（2）固定高度及隐藏超出固定高度的内容

为了保证CSS盒子中的高度固定，同时让盒子中多余的内容不显示出来，此时提供一个解决办法，即设置高度为固定高度，同时隐藏溢出内容。

如设置一个高度为50px，宽度为50px，并禁止内容超出此高度、宽度，为了观看效果，同时设置对象为1px黑色边框演示：

上述代码显示的效果如图3.13所示。

在显示过程中，看出设置固定高度宽度并设置1px的黑色边框，并且实现内容未超出设置高度、宽度。禁止溢出设置CSS高度、CSS宽度的CSS属性单词及值为overflow：hidden；。

（3）设置最小高度

图3.13　页面效果显示

有时特别是在文章页面里因为文章内容多少参差不齐，所以我们可以使用最小高度设置让左右结构的布局对齐，感觉饱和一点，但是又不能设置固定高度，因为内容可能多可能少，当内容多时自然设置固定高度就不会显示完整内容。

最小高度的运用方法如下：

这样就可以解决此问题，说明这里不能再使用overflow：hidden；因为CSS overflow设置隐藏超出内容溢出，这样会导致有些内容无法完全显示。

2．CSS宽度

（1）宽度基础知识

CSS宽度是指通过CSS样式设置对应DIV宽度，以下了解传统HTML宽度、宽度自适应、固定宽度等宽度知识。

●　传统HTML宽度属性单词：width，如width="300"；。

●　CSS宽度属性单词：width，如width：300px；。

●　最大宽度单词：max-width，如max-width：300px；。

（2）HTML初始宽度与DIV+CSS宽度对照

①传统HTML中宽度width="300"，即设置对应元素宽度为300px（像素）。而宽度值后无需跟单位，默认情况下以像素（px）为单位。

如＜td width="300"＞我的宽度为300px＜/td＞，即设置了对应表格td的宽度为300px。

②DIV CSS中宽度设置“width：300px；”，即设置对应CSS样式为300px，这里需要跟单位。如#header{width：300px；}，即定义header CSS选择器样式为300px宽度。

而在标签中则运用“＜div id="header"＞我的宽度为300px宽度＜/div＞”。

（3）CSS宽度说明

①CSS宽度自适应。我们常常看到一个网页宽度随浏览器宽度改变而自动改变，如www.baidu.com一样，宽度是自适应宽度。这是运用了百分比实现自适应宽度。

如果网页总宽度为80％即width：80％；，将使此宽度知道自适应宽度为浏览器80％。前提是设置最外层没有宽度限制的条件下。

DIV CSS自适应宽度例子：

CSS样式代码：

html中body div代码：

该例代码即设置内容居中，为了方便测试加上1px黑色边框。可以测试观察其内容是随浏览器拉大，而宽度变宽是自适应宽度80％，而左右两边始终有留有10％的宽度，因为设置此box宽度为80％。上述代码的显示效果如图3.14所示。

图3.14　自适应宽度的CSS效果

②CSS宽度固定。固定即设置宽度为固定值即可，如很多时候需要对网页的宽度样式设置为固定，这时只需要设置宽度为width：300px，即设置对应固定宽度为300像素。

③最小固定宽度。CSS样式属性单词：min-width。它兼容支持：min-width除IE6不支持为，IE7以上浏览器、火狐、谷歌都支持。常常用于设置宽度最小值，如设置对应DIV的样式最小宽度值限制。例如：

即设置最小宽度为300px，但目前的项目开发中一般很少设置最小宽度。如果要使用最小宽度即，一般使用浮动（float）来替代或最小宽度。

④最大固定宽度。CSS属性单词：max-width。它兼容支持目前流行的大部分浏览器。最大固定宽度是对对应的样式DIV设置最大宽度限制，即内容不超过此设置最大宽度。最大宽度限制例子：

即设置了最大宽度限制为300px。

3．CSS边框

（1）CSS边框基础知识

CSS边框（CSS border）即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。html原始边框与DIV+CSS边框对照

HTML表格控制边框示例：

说明：控制表格边框宽度为1px，颜色为黑色，默认为实线样式边框。

DIV CSS边框示例：

说明：设置对象边框颜色为黑色、边框为实线、宽度为1px边框。

特别提示：目前的实际项目开发中，已经极少使用HTML的边框控制，转而使用CSS代码对边框进行控制。本书的对比效果主要是让读者理解如何将HTML的边框样式转化为CSS的边框样式效果。

（2）边框样式

设置上边框：border-top。

设置下边框：border-bottom。

设置左边框：border-left。

设置右边框：border-right。

（3）边框显示样式示例：

边框样式一般都是边框的线性，其参数值解释为：

●　none：无边框。

●　hidden：隐藏边框。

●　dotted：点画线。

●　dashed：虚线。

●　solid：实线边框。

●　double：双线边框。两条单线与其间隔的和等于指定的border-width值。

●　groove：根据border-color的值画3D凹槽。

●　ridge：根据border-color的值画菱形边框。

●　inset：根据border-color的值画3D凹边。

●　outset：根据border-color的值画3D凸边。

说明：上述有些特性可能在IE较低版本中运行效果不佳，但是现在的HTML 5和CSS 3已经完全兼容最新版的浏览器。如果出现不兼容的情况，可以下载最新版的chrome浏览器测试。本书提供的不兼容情况是针对低版本浏览器可能出现的情况，但是读者在学习过程中可以先不考虑这些特殊应用，因为新技术必定会淘汰旧技术的。

例子：

设置上边框为1px实线黑色边框的例子。

或简写为如下代码，简写的顺序为颜色、线性、边框宽度，如：

可以根据以上实例举一反三，可以设置左、右、下的边框CSS样式。

（4）DIV CSS边框技巧

如果设置对象上、下、左、右边框相同样式，可以简写，无须分别写出上、下、左、右的属性及对应值。例如，设置上下左右边框为1px宽度、实线、黑色边框的CSS代码如下：

（5）三边有边框，一边没有边框

如左右下有边框并且样式为黑色1px宽度实线边框，而上边没有边框，CSS代码如下：

注意：border：1px solid #000；和border-top：none；前后顺序不能调换。因为CSS具有层叠性，后面书写的样式会将前面的样式层叠，上述代码就是将上边框层叠的经典显示案例，读者可以试着注释或者调换顺序测试。

4．CSS背景

（1）CSS背景基础知识

在上一小节中，已经简单说明CSS背景的基本用法，这里重点详细说明其具体用法。CSS背景在这里是指通过CSS对对象设置背景属性，如通过CSS设置背景的各种样式。CSS中的背景有如下设置：

background-color：设置颜色作为对象背景颜色。

background-image：设置图片作为背景图片。

background-repeat：设置背景平铺重复方向。

background-attachment：设置背景图像是随对象内容滚动还是固定的。

background-position：设置对象的背景图像位置。

HTML是指对应效果的table背景设置，HTML背景用Bgcolor设置背景颜色时，与CSS背景颜色对应background-color；用Background设置图片作为背景时，与CSS背景图片对应background-image。说明：HTML的设置背景方式已不推荐使用。

（2）背景颜色

如果是给table设置背景颜色，可以使用bgcolor="颜色值"设置对象背景颜色。

如果是CSS背景颜色，可使用background-color：颜色值；或background：颜色值设置对象背景颜色，如background-color：：red；设置了红色背景。

（3）CSS图片背景

这里说的是以图片作为背景图片时，CSS可以使用background或background-image直接引用图片地址来设置图片作为对象背景。

使用background：url（./img/logo.gif）；设置图片作为背景与使用background-image：url（./img/logo.gif）；设置图片作为背景具有相同效果。这样设置图片作为背景有个缺陷，就是图片会上下左右的重复。可以按照如下方法进行设置：

说明：

url（logo.gif）：应用外部图片地址路径。

no-repeat：是否让图片重复显示，这里是不重复。repeat-x是X方向重复；repeat-y是Y方向重复。

10px：距左10px，可以使用center属性居中处理。

5px：距顶5px，可以使用top属性，距顶部距离为0；可以使用bottom属性，距底部距离为0。

fixed：设置是否固定或随内容滚动；fixed为固定，scroll为随内容滚动。该属性一般可以省略，默认值为scroll。

（4）DIV CSS背景居中

CSS背景分为左右居中和上下居中，具体可以根据margin和padding的来设置上下和左右居中，图3.14的自适应效果就是一个典型的左右居中的案例，上下居中需要计算屏幕的高度，根据高度来设置居中效果，可以应用margin-top来设置。背景图像上下居中，可以使用计算上下高度然后平分设置，如上下高度距离为500px，那就设置图片居顶部多少PX可以让图片实现上下居中，如图片的高度为100px，那么设置当前div的margin-top：200px；即可实现上下居中。

使用图片作为背景在一个网页布局中常常会遇到，希望大家能在实际中掌握其知识。一般设置对象图片作为背景属性。实例：background：#666 url（图片地址）no-repeat center top；

设置图片作为背景时，如果设置图片在X坐标方向重复，再设置图片在对象位置的左或右位置时将无效，可设置在对象上或下位置开始显示，简言之，repeat-x属性使得图片左右设置失效。

设置图片作为背景时，如果设置图片在Y坐标方向重复，再设置图片在对象位置的上或下位置时将无效，可设置图片在对象左或右位置开始显示，同样，repaet-y属性使得图片上下设置失效。

如果设置背景完全重复显示，则设置图片在对象上下左右位置时，开始显示多个重复图片，即为图片上下左右全部重复。

5．CSS float用法

通过CSS定义float（浮动）让DIV样式层块向左或向右（靠）浮动。float语法：

参数说明：

none：对象不浮动。

left：对象浮在左边。

right：对象浮在右边。

举例：我们让文字和图片在一个固定宽度DIV层内，让蓝色背景文字内容居右，小图片居左。

①首先设置一个最外层宽度为300px、高度为200px的CSS命名为box的CSS选择器，代码如下：

②设置box内的文字内容部分CSS样式命名为myCSS，并设置背景为浅蓝色，宽度为120px，居右浮动，代码如下：

③设置图片居左浮动DIV+CSS样式，代码如下：

④body内的DIV布局，代码如下：

说明：这里img标签是链接外部图片，图片名为demo.gif，上述代码显示的效果为文字和图片，正好处于一行中，且文字居右，图片居左。

6．CSS字体

CSS字体的功能有很多，这里给出一个简单的示例说明：

一般常用以上代码定义一个网页的文字的CSS样式，这段代码意思是字体的大小是12px，line-height为1.5倍字体尺寸，字体是按照Arial，Helvetica，sans-serif的优先级顺序显示，如果本机中没有Arial，则会显示后面的字体，以此类推。

7．CSS加粗

CSS加粗指的是通过DIV CSS控制对象的加粗。使用CSS属性单词font-weight。对象值从100到900，font-weight常用的值为bold。

font-weight参数：

normal：正常的字体。相当于number为400。声明此值将取消之前任何设置。

bold：粗体。相当于number为700。也相当于b对象的作用。

bolder：特粗体。

lighter：细体。

number：100|200|300|400|500|600|700|800|900。

HTML直接对对象加粗的标签有＜b＞＜/b＞或＜strong＞＜/strong＞，两者效果相同。

①在HTML中对对象直接加粗：可以用＜b＞或＜strong＞对其加粗（已淘汰）。

②使用CSS加粗对象：可以使用font-weight：bold实现加粗，相当于Font-weight：700；。

8．CSS下画线基础

在DIV CSS网页中常常使用CSS代码来对对象文字内容加上下画线。使用CSS属性单词：

说明：

none：无装饰。

blink：闪烁。

underline：下画线。

line-through：贯穿线。

overline：上画线。

应用：超链接取消下画线可以使用text-decoration：none；的方式设置。

9．CSS注释

CSS注解又被称作CSS注释，是在CSS文件代码间加入注释，解释说明意思，通常情况下CSS注解是不会被浏览器解释或被浏览器忽略的。

CSS注解可以帮助我们对自己写的CSS文件进行说明，如说明某段CSS代码的功能、样式等，增加可读性的同时，也方便以后对代码进行维护。同时，在团队开发网页时，合理适当的注解有利于团队快速阅读，方便团队的协作开发，以便顺利快速开发DIV+CSS网站。

CSS注解是以“/*”开始，以“*/”结束，注解说明内容放到“/*”“*/”中间，且CSS注释只能使用这种方式。

Div+CSS注释示例如下：

10．padding用法

在CSS中，margin是设置盒子的外边距的，而盒子内边距的设置一般是使用padding。padding和margin类似，包含上、右、下、左四个属性，同样，也可以分解为以下四种样式分开书写：

padding-top：距盒子顶部的距离。

padding-right：距盒子右边的距离。

padding-bottom：距盒子下边的距离。

padding-left：距盒子左边的距离。

如padding-top：100px；，则是内容距离顶部100px，同时盒子的高度增加100px。除了使用px的单位，还可以使用百分比（％）的设置，如padding-left：10％；，则以盒子的宽度的10％作为长度，距离左边这个10％的长度。

如果是上下左右都需要设置padding的值时可以用简写来实现，以优化CSS。

如简写方式有：

①padding：10px；：意思就是内容距盒子上下左右的距离是10px（10像素），效果等同于以下的写法。

②padding：5px 10px；：意思是内容距盒子上下为5px，左右为10px，等价于以下写法。

③padding：5px 6px 7px；：意思内容距离上边距为5px，左右边距为6px，下边距为7px，等价于以下写法。

④padding：5px 6px 7px 8px；：意思是内容距离上、右、下、左的边距为5px、6px、7px、8px，等价于以下写法：

其中padding：5px 6px 7px 8px；的转法为顺时针，为上、右、下、左的顺时针转，用法和margin类似。

11．CSS外边距

CSS的外边距主要是对margin的设置，既然margin和padding都是设置边距的，那么它们肯定有所区分，具体的区别体现在以下几个方面：

①margin主要是外边距的设置，即盒子与盒子间的距离，作用在两个盒子之间；padding主要是内边距的设置，主要是盒子内容与盒子边距的距离，作用在盒子内部。

②如果对盒子设置背景颜色，则margin无背景颜色，而padding由于在盒子内部，因此会有对应的背景颜色。

③设置margin不会增大盒子的大小，而padding的设置会增加盒子本身的大小，如padding：100px；，则会给盒子的高度和宽度都增加200px的距离。

虽然margin的设置和padding类似，但是这里还是需要给大家做一个详细的说明，margin的具体用法如下：

margin-top：距离顶部盒子的距离。

margin-right：距离右边盒子的距离。

margin-bottom：距离底部盒子的距离。

margin-left：距离左边盒子的距离。

margin的简写也是遵循上、右、下、左的写法，如margin：1px 2px 3px 4px；，则表示盒子距离其他盒子的上、右、下、左的距离为1px、2px、3px、4px，即等价于以下写法：

margin的其他用法和padding一样，也是遵循省略的语句格式，推荐使用简写的方式。在CSS的用法中，上下两个盒子的margin-bottom和margin-top具有“从大原则”，即为盒子的上下间距遵从数值大盒子的原则，如：

那么上述两个盒子为上下结构，且盒子与盒子的上下间距为100px，而不是两个盒子的加法值，这种效应称为盒子margin的“从大原则”。

12．CSS文本

①文本字段换行，HTML中使用＜br /＞和＜p＞；css没有换行的概念，它将元素分为行内元素（display：inline；）和行间元素（display：block；），其中行内元素不换行，而行间元素换行，同时浮动会使元素产生贴靠现象，丧失换行的特性。

②文本上下文字间隔，使用CSS属性单词line-height，作用是定义对象行高，后面跟具体的数值和单位。如div {line-height：22px；}，即定义行高为22px。行高在使用过程中，当行高与盒子高度相等时，则会有文字居中的效果：

③CSS文本缩进，使用CSS单词text-indent，作用是设置对象中的文本的缩进，后面也跟具体数值和单位。如div {text-indent：25px；}，即定义对象内开头的文字往后缩进25px。一般在中文字体中，首行缩进两字符的定义方式为：

④文本文字间间隔，使用单词letter-spacing，作用是设置对象内文本字与字之间的间距距离，后跟具体数值和单位。示例为div {letter-spacing：5px；}，即定义字与字之间的距离为5px，该属性一般应用较少。

13．CSS颜色

这里要介绍的是网页设置颜色包含的内容以及网页颜色规定规范，包括如下内容：

①常用颜色地方包含：字体颜色、超链接颜色、网页背景颜色、边框颜色。

②颜色规范与颜色规定：网页使用RGB模式颜色。

网页中颜色的运用是网页必不可少的一个元素。使用颜色的目的在于有区别、有动感（特别是超链接中运用）、美观之用，同时颜色也是各种网页的样式表现元素之一。

传统的HTML颜色与CSS颜色对比：

（1）文字颜色控制一样

传统HTML和CSS文字颜色相同，使用“color：”+“RGB颜色取值”即可，如颜色为黑色字即对应设置CSS属性选择器内添加“color：#000；”即可。

（2）网页背景颜色设置区别

传统设置背景颜色使用“bgcolor=颜色取值”（已淘汰），而CSS中则使用“background-color：”+颜色取值。例如，设置背景为黑色，传统HTML设置，即在标签内加入“bgcolor="#000"”即可实现颜色为黑色背景。如果在W3C中即在对应CSS选择器中始终用“background-color：#000”实现。

（3）设置边框颜色区别

一般使用“bordercolor=取值”（已淘汰），CSS中使用“border-color：”+颜色取值。例如，在传统HTML直接在table标签加入“bordercolor="#000"”即可；在CSS中设置为“border-color：#000；”即可让边框颜色为黑色，同时设置宽度和样式（虚线、实线）。

RGB颜色的定义给出了5种方法：

①#rrggbb，如＃00cc00。

②#rgb，如#abc，这种颜色和#aabbcc的颜色值是一样的。

③rgb（x，x，x）的x是一个包容性的0～255之间的整数，如rgb（0，204，0）。

④rgb（y％，y％，y％），其中y是一个包容性的数量介于0.0～100.0，如rgb（0％，80％，0％）。

⑤rgba（r，g，b，a），其中r，g，b取值范围为0～255，a表示不透明度，从透明到不透明的取值范围为0～1，如：rgba（0，0，0，0.3），表示一个透明效果的颜色。

说明：在正常使用颜色的定义时，推荐使用#rrggbb的方式；如需要使用透明效果，则采用rgba（r，g，b，a）的定义方式。

14．用CSS控制超链接文字样式

这里主要讲文字类型的超链接，超链接的样式包括通过CSS来控制设置超链接有无下画线、超链接文字颜色等样式。

超链接通俗地讲是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

超链接的代码如下：

解析：

①href后跟被链接地址目标网站地址，这里是http://www.baidu.com/。

②target的属性：

_blank：在新窗口中打开链接。

_parent：在父窗体中打开链接。

_self：在当前窗体打开链接，此为默认值。

_top：在当前窗体打开链接，并替换当前的整个窗体（框架页）。

③title后跟链接目标说明，也就是对超链接被链接网址的情况进行简要说明。

CSS可控制超链接样式-css链接样式如下：

a：active：是级链接的初始状态。

a：hover：是把鼠标指针放上去时的状况。

a：link：是鼠标点击时的状况。

a：visited：是访问过后的情况。

在设置超链接样式时，遵循link、visited、hover、active的顺序设置准则，如果不按照这种顺序设置，则超链接的控制不生效。

（1）通常对全站超链接样式化方法

（2）通过链接内设置类控制超链接样式方法

对应CSS代码：

通过这样的设置可以控制链接内的CSS类名为“myCSS”超链接的样式，也就是它具有专一性，仅对“myCSS”的超链接生效。

（3）通过对应超链接外的父级的CSS类的CSS样式来控制超链接的样式

对应CSS代码：

上述代码仅对样式为myCSS盒子内部的超链接生效。

15．DIV CSS优化

（1）CSS代码简写

①border（CSS边框）简写：

也可简写为：

②padding（CSS padding）简写：

也可简写为：

另外，当padding的上、右、下、左的值一致时：

可简写为：

③margin简写：

也可简写为：

同样的，当margin的上、右、下、左的值一致时：

也可简写为：

④background简写：

也可简写为：

多行的background语句可以简写为一行，如：

也可简写为：

⑤font简写：

也可简写为：

（2）CSS重用优化

这里主要介绍使用CSS代码的共用属性提取来达到节约代码、维护方便，CSS实例如下：

它们都有相同的高度、宽度、浮动、文字大小，只有内容居左居右不同，就可以提取他们相同的属性。优化后：

16．CSS id与CSS class

（1）CSS id

在同一个页面中，只允许有唯一的id，且id不允许重名，id的主要作用是给JavaScript进行取值、定位以及其他的JS操作的，可以说id是预留给JavaScript使用的，class是个CSS专门使用的。但是，有些情况，如页面中的某一个div盒子部分正好需要使用id，那么这个时候，就可以使用CSS id选择器进行处理。也就说：id是一次性使用的产品，它在页面中仅能使用一次，不具备多次使用的功能。CSS id选择器的用法和使用如下文所示。

id选择器以“#”来定义，命名CSS选择器。举例如下：

对应html中div引用：

一个DIV标签的定义只能使用一个id，如：

或

两个都是不正确的，并且CSS样式属性也不能生效。

（2）CSS class

与CSS id特性不同的是，clsss类可以在一个网页内无限次引用。class选择器定义以“.”来定义。定义css class选择器的例子：

对应HTML中DIV+CSS引用：

以上即是“myCSS1”“myCSS2”类的正确使用方法。

扩展知识：能否使用数字命名CSS属性选择器

以下为错误的CSS类使用方法：

一个div标签内可以同时运用id和class：

17．CSS后代选择器

CSS后代选择器也可称为CSS的父级和子级，这里的C父级和子级是相对而言的，如一个DIV“A”被另外一个DIV“B”包裹着，这样我们就可以让B是A的父级，或者称为A是B的后代。示例：

Div代码：

以上DIV+CSS代码中的两种样式都可以渲染内容a或内容b的样式，在这里可认为a父级（上一级）是myCSS。从严格意义上来讲，CSS的父级和子级可看成是CSS的父级和子孙集，因为当上述代码中的DIV中间再增加一层盒子时，代码也会生效。也就是说，如果盒子的级别为.myCSS .myStyle .a的层次，那么上述内容a的样式也会对其生效。另外一方面，盒子写成父级和子级的形式，通过.myCSS .a即可知道a的父级是myCSS。清楚DIV盒子之间父级子级的关系，目的也是便于维护和查找代码。

18．CSS儿子选择器

在有些地方，将CSS儿子选择器定义为CSS指针，在本书中，统一定义为CSS儿子选择器。从严格意义上来说，CSS儿子选择器可以看作是CSS后代选择器的一个变种，或者说是后代选择器的一种严格定义形式。如一个盒子的效果样式为.div1.div2.div3，那么可以认为这种盒子是一种指针的形式体现，即页面的渲染是从.div1盒子开始向下寻找遇到.div2和.div3才能生效，中间如果出现了.div1 .div4 .div2 .div3的形式也算有效。也就是说，CSS儿子选择器是从上一级开始，一级级查找渲染，直到符合条件的匹配即可生效。

但是CSS儿子选择器可以看成是只允许上下级的关系，不允许渲染到子孙级别，如.div1 ＞.div2 ＞ .div3，那么页面的渲染只允许盒子的结构为.div1、.div2、.div3的层次，如果中间出现.div4，那么盒子不会生效。

另外，有些地方将CSS儿子选择器定义为CSS指针的原因是因为在写法上是在中间加一个“＞”，这个和C++中指针的调用有点类似，所以称为CSS指针。CSS儿子选择器是一种严格的盒子表示方式，从上一级一直指向下一级。

关于CSS父级和子级的说明：在实际应用中，CSS儿子选择器的方式因为定义和页面渲染过于严格，所以应用较少；一般都是推荐使用CSS后代选择器的表示形式。

19．CSS图片

在网页编写中，常常会遇到以下情况：

①img图片多了边框，特别是链接后的图片带边框。

②图片超出撑破DIV。

下面我们通过以下的四种方式来解决上述的两个问题。

（1）有边框的图片

解决方法：

我们只须在初始化IMG标签使用以下CSS语句即可去除边框：

（2）图片超出撑破DIV

解决办法：

使用CSS控制改对象IMG标签宽度即可，假如该对象为myCSS设置宽度为500px，那我们就只需设置myCSS img{max-width：500px；}。

总结：

①一个网页中难免有图片，这时我们需要初始化img标签，即img{padding：0；border：0；}。

②避免图片过宽撑破网页，建议在上传图片时将图片剪切来比设置宽度小，同时还可以对该对象加入overflow：hidden属性，即隐藏超出内容包括图片。

（3）使用CSS让大图片不超过网页宽度

接下来，介绍网站在开发DIV+CSS时会遇到一个问题，在发布一个大图片时因为图片过宽会撑破自己设置的DIV宽度的问题。

图片撑破布局原因：

①由于浏览器版本低。

②没有设置div布局的宽度。

解决图片超出宽度或撑破div css布局方法

①在页面中发布图片时将图片进行编辑缩放。

②通过对对应DIV的CSS来设置显示的图片最宽宽度（推荐）。

③通过CSS对图片设定宽度。

（4）通过CSS来解决图片撑破DIV布局案例

通过CSS来控制代码如下（myCSS是对应父级类名）：

这种图片第一次加载时图片不能显示。直接通过对对应的DIV内的内容图片宽度设置代码如下：

宽度自定，但是不推荐此方法，因为设置后此DIV布局内的图片将全部宽度为500px，那样将造成图片小的，被放大显示模糊。

这里本书推荐使用使用max-width来设置，设置方法如下：

20．px/em的区别

任意浏览器的默认字体高度为16px，所有未经调整的浏览器都符合1em=16px。那么12px=0.75em，10px=0.625em。为了简化font-size的换算，需要在CSS的body选择器中声明font-size=62.5％，这就使em值变为16px*62.5％=10px，这样12px=1.2em，10px=1em，也就是说只需要将原来的px数值除以10，然后换上em作为单位即可。

em单位有如下特点：

①em的值并不是固定的。

②em会继承父级元素的字体大小。

我们在写CSS时如果要用em为单位，需要注意以下3点：

①body选择器中声明font-size=62.5％。

②将原来的px数值除以10，然后换上em作为单位。

③重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

以上简单介绍了px、em、pt的单位，读者在使用候，记住以下两点即可：

①在所有的页面中，尽可能使用px。

②在中文缩进中，推荐使用em，如段前空两个字符，可以使用text-indent：2em；语句。

21．CSS display属性的用法

在一般的CSS布局制作时，常常会用到display的对应值：block、none和inline。