《CSS那些事儿》读书笔记

• 此书出版于2009年，所以有些知识...你懂得。
• 有些我熟悉的知识点，就没有记录下来了，所以想了解更多的细节，还是去看下此书吧。
• 暗灰色标记部分，是我自己的理解，有不对或要补充的地方，还请大家多多指教。
• 代码演示我统一放到了jsfiddle上，国内访问速度稍慢些，大家耐心点。或是大家知道国内有类似的在线调试网站，麻烦和我分享下，在此先谢了。
• 该笔记中只给出了部分代码演示链接，如果想看该书的完整示例代码，可到百度云：http://pan.baidu.com/s/1o64sPR0下载，我已经共享好了。
• 该笔记较长，大家耐心点哦。

• 修饰页面文本、图片等页面元素，避免使用不必要的HTML元素。
• 更有效地控制页面结构、页面布局。
• 提高开发和维护效率。

• 颜色的缩写：#RRGGBB –– 缩写成 #RGB。
• 单位值的省略：当数值为0时，可省略单位。
• 内外边距的简写：根据上右下左的顺时针方向，有4种简写方式。
• 边框的简写：border: -width || -style || -color。
• 背景的简写：background: -color || -image || -repeat || -attachment || -position
• 字体的简写：font: -style || -variant || -weight ||-size||/line-height||-family
• 列表的简写：list-style: -image || -position || -type

• 标签选择符：E(html标签)
• ID选择符：#className
• 类选择符：.className
• 通配符选择符：*
• 包含选择符：又称派生或后代选择符，作用于元素的后代元素。
• 子选择符：又称子对象选择符，作用于元素的子元素，用“>”连接选择符(IE7+)。
• 相邻选择符：作用于元素的相邻的下一个元素(线性结构中的直接后驱)，用”+“连接选择符(IE7+)。
• 属性选择符：E[attr]、E[attr=“value”]、E[attr~=“value”]、E[attr|=“value”]、E[attr^=“value”]
• 选择符的组合关系：针对性使用类选择符或ID选择符、选择符群组、选择符组合。

• html：表示在html中是使用的样式。
• 作者：表示CSS文件的编写者。
• 用户：指浏览器网页的用户所设置的样式。
• 浏览器：指浏览器默认样式。

• 标有!important关键字声明的属性。
• html中的CSS样式属性。
• 作者编辑的CSS文件样式属性。
• 用户设置的样式。
• 浏览器默认的样式。

• 标签选择符、伪类及伪对象：优先级积分为1。
• 类选择符、属性选择符：优先级积分为10。
• ID选择符：优先级积分为100。
• style属性：优先级积分为1000。
• 其他选择符，如通配符选择符等：优先级积分为0。

• 两列定宽结构：要点：float、width指定、 :after清除浮动。效果：http://jsfiddle.net/XianfaLang/tWvph/前提：两列的盒模型宽度相加不能大于父元素的宽度，否则会出现错位现象。
• 两列自适应结构：要点：float、width百分比、 :after清除浮动。效果：http://jsfiddle.net/XianfaLang/MyfXs/
• 单列定宽-单列自适应结构：要点：相对定位、负边距效果：http://jsfiddle.net/XianfaLang/U3J3X/问题：当sideBox的内容很多时，使用绝对定位导致无法撑开父元素的高度，而且会覆盖其他元素的内容。解决方案是使用Javascript重新判断父元素的高度来解决，个人觉得应该有CSS方案来解决这个问题，而不是用javascript来解决。这不，第5章就给出了一种解决方案：http://jsfiddle.net/XianfaLang/5w8MD/
• 两列等高：4.1. 背景模拟：利用背景图片的平铺，在视觉效果上产生等高的感觉。4.2. 负边距实现(推荐)： 原理：利用左右两个方向的外边距弥补在页面中布局出现错位的现象。 要点：两容器设置margin-bottom:-9999px; padding-bottom:9999px，父元素设置overflow:hidden; 效果：http://jsfiddle.net/XianfaLang/Q5nph/ 问题：如果页面使用<a>做页面跳转，将会隐藏部分文字信息。如果将背景图片放到mainBox或者sideBox底部，将看不到背景图片。4.3. 边框模拟： 要点：border-right:280px solid #AAAAAA; 绝对定位 效果：http://jsfiddle.net/XianfaLang/tLmTc/4.4. JS方式： 要点：使用javascript设置两列高度相同。 效果：http://jsfiddle.net/XianfaLang/C9XcZ/

• 了解width:auto与float的关系：http://jsfiddle.net/XianfaLang/nMyh4/
• 两列定宽中间自适应结构：要点：浮动、负边距、mainBox的width为100%。效果：http://jsfiddle.net/XianfaLang/dsfKU/
• 左侧定宽-右侧和中间自适应结构：要点：浮动、margin百分比、负边距。效果：http://jsfiddle.net/XianfaLang/nB57t/
• 三列宽度自适应结构：同左侧定宽-右侧和中间自适应结构类似，把宽度改为百分比即可。
• 三列等高：原理同两列等高类似，也有4种实现方式。这里只列举两种：负边距实现：http://jsfiddle.net/XianfaLang/hRq2q/边框模拟：http://jsfiddle.net/XianfaLang/EBww5/

• text-indent属性可将文字往旁边“推”，如：p { text-indent: 2em; } /* 设置段落缩进2em */ 联想到负边距有“吸”功效。
• 隐藏文字方法：a. 使用text-indent／line-height 将文字“推”到容器之外。b. visibility: hidden; 设置元素不可见，但占空间位置。c. display: none; 设置元素不可见，不占空间位置。

• 是目前保证最不失真的格式，它汲取了GIF和JPG二者的优点，存储形式丰富。
• 即能把图像文件压缩到极限以利于网络传输，又能保留所有与图像品质有关的信息。
• 显示速度快。
• 支持透明图像的制作。

• 图片是否严重失真。
• 哪种格式的图片是最小的。
• 图片是否有透明效果，如果有，那是否有alpha透明效果。

• 任何背景图片都是先设置水平方向的定位，再设置垂直方向的定位。
• 只有一个数值时，该数值将作用于水平方向的定位，而垂直方向的定位将以默认的50%为基准。
• 属性值为百分比时，将以图片的中心点为基准计算其相对位置，而使用px像素值时将以图片的左上角为基准。
• 可以使用负值。

• 固定容器的宽度和高度。
• 超出容器的宽度和高度部分的背景图片需要隐藏。
• 背景图片在合并时，需要考虑每张图片的用途。

• 无序列表：<ul><li>...</li></ul>
• 有序列表：<ol><li>...</li><ol>
• 自定义列表：<dl> <dt>标题</dt> <dd>内容</dd> </dl>

• 二级菜单导航(横排)：要点：整体宽度、一级列表宽高和浮动、二级列表绝对定位。效果：http://jsfiddle.net/XianfaLang/4CPdG/
• 图文列表信息：要点：整体宽度、浮动。效果：http://jsfiddle.net/XianfaLang/KM7Ua/

• 理解每个例子中所讲解的步骤及实现的方法。
• 分析每个方法的可用性及是否有其他更好的实现方法。
• 总结在每次实践中所得到的经验。

• 页面中使用CSS滤镜的次数会不会过多。
• 使用CSS滤镜是不是会占用较多的CPU。
• 能否使用图片直接代替由CSS滤镜产生的效果。
• 使用CSS滤镜后，会不会影响到页面中的内容操作。

• 解决页面错位现象。
• 解决子元素浮动导致父元素无法自适应子元素高度的问题。

.clearFix:after {    clear: both; /* 清除伪类层以上的浮动 */    display: block;   /* 使生成的元素以块级元素显示,占满剩余空间; */    visibility: hidden; /* 设置伪类层内容为块级元素且不可见 */       height: 0;    line-height: 0; /* 设置伪类层中的高度和行高为0 */    content: " "; /* 将伪类层中的内容清空 */}.clearFix {    zoom