《无懈可击的Web设计》主要讨论的是HTML和CSS在各种终端以及浏览器显示兼容的问题。对CSS学习基本没有帮助。

1. 使用关键字和百分比来设定页面文字的大小，以允许用户控制。
1.1 使用“绝对大小” 的关键字
font-size: xx-small/x-small/small/medium/large/x-large/xx-large
W3C 建议浏览器厂商将每个关键字之间的比例因子设为 1.5，并推荐让这个比例保持恒定，不管文字实际上被显示为多大。即，large 表示的大小会是 medium 的 1.5倍大，相应的，small 所表示的大小则是 medium 的 1.5 倍小。
1.2 使用百分比值来获取和基准值不同的尺寸
以值small为基准，我们将使用百分比值来双向地改变文字大小。使用百分比值可以容易的观察到某个对象的文字大小是多少。
body {
font-size: small;
}
.h1{
font-size: 150%
}
1.3 谨慎使用嵌套百分比值
当声明新的百分比值时，要先看看是不是已经设定了任何父对象的百分比。就作者个人而言，在构建页面的时候嵌套很少超过两层。

2. 提供能够适应任意大小的文字或者任意数量的内容的站点导航栏。
2.1 一个简单的无序列表正是我们想要的，可以用它来构建一组完美的选项卡
2.2 准备两张渐变色图片用于选项卡横向平铺
2.3 使用CSS将导航列表从默认的竖排，变成水平排列
#nav li{
float: left;
}
2.4 通过<ul>与列表项目同样设置为浮动的，同时显示背景色
2.5 为选项卡定形
#nav a {
float: left; /*块级对象总是独占一行，使其再次同处于一行*/
display: block; /*使整个选项卡都可以被点击*/
padding: 4px 8px; /*使整个选项卡都是可点击，而不是仅仅只有文字连接才可以点击*/
}
2.6 将2.2中准备的图片设置为背景，平铺于每个选项卡上
#nav a {
background: #F9E9A9 url(xxx.gif) repeat-x top left; /*图片垂直方向上没有达到的区域（包括透明部分）则显示背景色*/
}
2.7 使用1像素图片在选项卡底部增加一个实线边框，当选项卡被选中时，底边便消失，使选项卡与其下的白色页面融为一体
2.8 悬停渐变声明
#nav a:hover, body#intro #t-intro a {
}
2.9 为选中状态，添加子选择符
#tabs a:hover, body#intro #t-intro a

3. 不要把高度值定死，让横向延伸的页面组件能够在纵向自由扩张。
3.1 建立两个容器型对象，每行有一个。对于第一行，将行两端的两行文字信息看做一个列表里的两个项，而对于第二行，我们就只需看作是一段普通文字。
3.2 给需要被加上样式的各个对象都指定唯一的标识——设定其id属性。
3.3 设置CSS样式，使用“反向浮动”（opposing floats）方法来将两个列表项定位在行的左右两端
#upper_div{
list-style: none; /*禁止在列表项前显示默认的项目符号*/
}
#left_li{
float: left; /*定义到左边*/
}
#right_li{
float: right; /*定义到右边*/
}
#lower_div{
clear: both; /*使得该div上面的行中所加的浮动规则对它不造成影响*/
text-align: center; /*使文字居中*/
}
3.4 恢复定义的背景色：让<ul>和它的两个列表<li>一起浮动，同时赋予一个width属性。一个被浮动的框式组件必须要具有明确的宽度值。如果这里不指定，那么这一行的宽度将会仅仅和其内容所需要的宽度值一样（如即取决于列表项里的文字内容）
#upper_div{
float: left;
width: 100%;
}
3.5 添加小图标：在div CSS中使用background属性添加
#right_li{
background: url(sample.gif) no-repeat 0 50% /*对齐值"0 50%"使该背景在水平方向靠左，垂直方向离行的上边50%行高的距离（即垂直居中）*/
}

4. 使用浮动对象来实现栏式效果。
4.1 考虑使用“反向浮动”方法来排列项目使其各自位于容器的两端，而不用顾及他们在HTML代码中的位置。
4.2 要对清除浮动对象的影响有所了解：要在不同数量的内容和文字大小下进行测试，以确保理想中的布局不会被破坏。

5. 创建具有向后兼容性的框式的组件。
5.1 宽度固定的圆角矩形框一般很容易创建，使用简洁的HTML和两张背景图片即可。
5.2 宽度不固定的圆角矩形框需要一些额外的HTML代码，以便在所有四个圆角处引入背景图片。

6. 确保页面内容在图片或 CSS 缺失的情况下仍然易读。
6.1 通过<table cellspacing="0">（或者border-collapse属性）来消除表格单元格间距，把所有其他边框、背景和间距移到样式表中。
6.2 使用<caption>对象指示一个表的大标题。注意Safari和IE/Mac浏览器对<caption>有不同的呈现方式。
6.3 我们可以给<td>对象中的带链接的部分指定display:block;这个属性，这样就避免使用<br/>对象来实现换行。

7. 把外观从数据表格中剥离出来，再用 CSS 重新定义。

8. 能自由扩大缩小的页面布局。
8.1 使用float属性来构建多栏布局，浮动影响要能够在整页宽的页脚上被清除。
8.2 从列宽中减去gutter的百分比宽度值，或者增加一个额外的<div>来在列宽以外单独设置padding的值。
8.3 给布局设置min-width和max-width，来防止布局尺寸过大或过小。