《精通CSS:高级Web标准解决方案》读书笔记

《精通CSS:高级Web标准解决方案（第二版）》的个人学习读书笔记
边学边更新ing

C1 基础知识

• 1.1.1.3 为元素命名
  为元素命名时，应该根据它们是什么，而非它们的外观如何。使用统一的命名约定，如可以使用全小写，以-分隔单词的写法。

• 1.1.1.5 div和span
  应该在没有现有元素可以实现区域分割的情况下使用div

C2 为样式找到应用目标

C3 可视化结构模型

• 三大CSS概念：浮动、定位、盒模型

• 3.1盒模型概述
  ie早期，非标准盒模型。其width不是内容的宽度，而是内容、内边距和边框的宽度综合。该问题最好的解决方案是回避，即不给元素添加指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素或子元素。

• 3.2定位概述
  三种定位机制：普通流、浮动和绝对定位。

C4 背景图像效果

• 使用百分数对背景进行定位，是使用图像上的一个对应点。如指定垂直和水平位置都是20%，是在将图像上距离左上角20%的点定位到父元素上距离左上角20%的位置。

C5 对链接应用样式

ccontent

C6 对列表应用样式和创建导航条

content

C7 对表单和数据表格应用样式

content

C8 布局

content

C9 bug和修复

捕捉bug：隔离问题；创建基本测试案例。
layout会影响ie的兼容性。使用IE条件注释、hack和过滤器、星号HTML hack、子选择器hack。
9.5 常见的bug及修复方法

1. 双外边距浮动bug —— 将元素的display属性设置为inline
2. 3像素文本偏移bug —— 表现为：文本与一个浮动元素相邻时，在IE5.x和IE6上会表现为之间产生一个3像素间距—— 解决：给包含文本的元素设置任意高度，通过使元素拥有布局来消除表面的文字偏移，再设置其一侧margin为0，给浮动元素设置对应侧margin为负值。如果浮动元素是图像，对其margin直接设置。
3. IE6的重复字符bug——从HTML代码中删除注释
4. IE6的藏猫猫bug——表现为：在某些条件下文本看起来消失了，只有在重新加载页面时才再度出现。出现bug的跳线：一个浮动元素后跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或图像的父元素中。如果清理元素碰到了浮动元素，那么中间的非浮动元素看起来消失了，隐藏到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现。——解决方案：最简单是去掉父元素的背景颜色或图像；避免清理元素与浮动元素接触，如给容器元素应用特定尺寸/指定行高/设置浮动元素和容器元素的position属性为relative也会减轻。
5. 相对容器中的绝对定位——需要迫使相对定位的容器拥有布局。一种方法是在容器上显示地设置width和height，但是很多情况下不知道容器的宽高。还可以使用条件注释过滤IE5和6，为容器布局提供一个任意高度。

C10 实例研究：Roma Italia

content

C11 实例研究：Climb the Mountains

content

我的附录 章节的学习进展

在这里标注是否精读、是否完成该章节的阅读学习

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11