css进阶读书笔记

说明：努力在十一左右，最迟双11之前掌握所有css知识要点

一、摘自《写给大家看的CSS书（第2版）》（虽然书比较旧，09年版的，但对于我这种刚入门的小菜鸟

来说，能学到的还是挺多的）

1.css中层叠样式概括：

（1）包含ID的选择符覆盖包含累的选择符，包含类的选择符覆盖只包含标签的选择符

（2）如果层叠中的不同位置为同一个标签的同一个属性多次定义了值，那么，内联样式覆盖嵌入样式，

嵌入样式覆盖样式表中的样式。但是，当选择符更有针对性时，无论样式处于什么位置，都是优

先适用的——也就是说，（1）优先于（2）

（3）无论针对性如何，定义的样式都覆盖继承的样式。

2.盒子模型的结论：

（1）特定尺寸的盒子（宽度已定）会随着内边距、边框及外边距的添加而扩展，进而占据更多的水平空间。

实际上，通过width属性设置的是盒子内容的宽度，而不是盒子本身的宽度。

（2）无尺寸限制的元素（未设置宽度）会扩展到与它的包含元素同宽。因此，为无尺寸限制的元素添加水

平外边距、边框、和内边距，会导致元素内容的宽度变化。

3.绝对定位元素的定位环境是body，所以绝对定位的元素会随着页面滚动而移动——它需要保持与body元素

的相对关系，而body元素会随着页面滚动而移动。

4.当外部div采取了相对定位之后，绝对定位的后代元素就会按照自己top和left属性的设置，相对于外部div进行定位。

即相对定位的元素必须是绝对定位的祖先元素，才有资格成为定位环境。

5.当把一个元素的display属性设置为none时，该元素以及嵌套在其中的任何元素，都不会显示在页面中。而且，这个

元素原先占据的任何空间都会被移除，就像相关的标记不存在一样。而visibility属性恰好相对，后者只有visible和

hidden两个值。如果一个元素的visibility属性设置为hidden，会隐藏该元素，但在这个元素占据的空间仍然会得到保留。

6.尽量不要为那些构成主分栏的div直接添加视觉样式，要按照需要为它们各自的“内部”div添加样式。

7.当使用Strict类型的DOCTYPE时，不能单独把行内元素放到页面中——这是XML中不可改变的规则，该规则要求必须

把行内元素包含在适当的块级元素中。

8.实际上，在为行内元素应用内边距和边框时，它们不会像我们期望那样影响包含元素。行内元素垂直内边距不会像块

级元素那样，沿着文本层次向上传递到包含元素。因而包含元素也不会调整自身大小来容纳被行内元素占用的更大区域。

简单的补救方法就是把行内元素转换为块级元素（display:block;）。

二、摘自《精通CSS+DIV网页样式与布局》（08年版，哎，校图书馆借的，比上本还要旧，但还能看，挺不错的）

1.word-spacing与letter-spacing的区别：都用来添加它们对应元素的空白，但letter-spacing增加字母之间的空白，而

word-spacing增加单词之间的空白。注意：word-spacing对中文无效。

2.<ul> 和<li>中的list-style-type属性值没用明显区别，但用时尽量只用一种方式。

3.在很多浏览器下，ID选择器也可以用于多个标记，但这样做是错误的。因为每个标记定义的id不只是CSS可以调用，

JAVASCRIPT等其它脚本语言同样也可以调用。如果一个HTML中有两个相同的id的标记，那么将会导致Javascript在

查找id时出错，eg：函数getElementByID().

4.ID选择器不支持像class选择器那样的多风格同时使用，类似“id=“one two””是完全错误的语法。

5.很多设计者喜欢使用各种各样的字体来给页面添彩，但这些字体在大多数用户的机器上都没用安装。最直接的方式就是

将是用了生僻字体的部分，用图形软件制作成小的图片，再加载到页面中。

6.再设置一个段落文字的颜色时，通常可以利用<span>标记，将需要的部分进行单独标注，然后再设置<span>标记的颜色属性

<span>仅仅是一个行内元素，在它的前后不会换行。<span>没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适

时，就可以使用<span>元素。而<div>是一个块级元素，它包围的元素会自动换行。通常情况下，对于页面中大的区块使用<div>

标记，而<span>标记仅仅用于需要单独设置样式风格的小元素，例如一个单词、一幅图片和一个超链接等。

7.在CSS段落文字的垂直对齐方式是通过vertical-align属性来具体实现的。对于文字本身而言，该属性对于块级元素并不起作用，

例如<p>和<div>标记。但对于表格而言，这个属性则显得十分重要

8.图片水平对齐的方式与文字水平对齐的方式基本相同，分为左、中、右3种。不同的是图片的水平对齐通常不能直接通过设置

图片的text-align属性，而是通过设置其父元素的该属性来实现的。

9.各个浏览器之间显示的差异通常都是因为各浏览器对部分CSS属性的默认值不同导致的，通常的解决办法就是指定该值，而

不让浏览器使用默认值。

10.通过“display:block:”语句，可以将超链接设置成块元素，当鼠标进入该块的任何部分时都会被激活，而不是仅在文字上方时才被激活

11.在进行整个网页排版时，最下端的“脚注”部分通常需要设置clear属性，从而消除正文部分各种排版方法对它的影响。

12.内联元素是无法设置宽度和高度的，width和height只是针对块状元素。

13.如果用定位来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不

受父级元素的padding的属性影响，当然你也可以用relative，计算的时候不要忘记计算padding的值。

三、摘自《CSS权威指南》（第三版）：

1.CSS要求@import指令出现在样式表中的其他规则之前。如果一个@import出现在其他规则（如body，color，red）之后，兼容用户代理会将其忽略。

2.为了实现CSS中的向后可访问性，建议将声明包含在一个注释标记中。注释标记的开始标记（<!--）紧接着出现在style开始标记之后，注释标记

（-->）出现在style结束之前。这样一来，较老的浏览器不仅会将style标记完全忽略，还会忽略声明，因为HTML注释不会显示出来。与此同时，能理解

CSS的浏览器仍能正常地读取样式表。