属性和值选择器
下面的例子为 title="W3School" 的所有元素设置样式：
[title=W3School]
{
border:5px solid blue;
}
属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：如"this is en message"
[title~=hello] { color:red; }
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：如"this-is-en-message"
[lang|=en] { color:red; }
CSS 选择器参考手册
选择器 描述| [attribute] | 用于选取带有指定属性的元素。 |
| [attribute=value] | 用于选取带有指定属性和值的元素。 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
background-color
background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
background-image 也不能继承。事实上，所有背景属性都不能继承。
text-indent
注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
浮动的理解
相对于默认的static来说，浮动float好像是在单独的层进行的，因为他不占据static块的文档流位置。
但是，浮动不是单独的层，因为浮动float在浮动到达的位置确定后，会占据该位置，其他数据不能挤占该位置。
简而言之，浮动float不占据static文档流的摆放位置，但占据显示位置。
正是上面的特性，可以达到word的“文字环绕”效果
显示的先后顺序影响其显示时可决定的效果
http://www.w3school.com.cn/tiy/t.asp?f=csse_class-clear
<html>
<head>
<style type="text/css">
img
{
float:left;
clear:right;
}
</style>
</head>
<body>
<img src="/i/eg_smile.gif" />
<img src="/i/eg_smile.gif" />
</body>
</html>
结果是两个img仍然没有分成两行。为什么第一个img的clear：right 没有起作用？
这主要代码是顺序执行的，当执行到第1个img要清除右浮动的时候，第2个img并没有被加载，所以它的清除效果也就无效了，于是第2个div依然会紧跟着第1个img。
这个效果和运行机制，是需要理解的！
清除浮动方法小结
浮动副作用：
1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
清除浮动：
方法1：clear:both清除浮动
空标签清浮动的方法是：在html页面中加入一个空标签，用空标签来清除浮动。此标签可以是div或p等任何标签，<hr>标签需要另外加上{border:0;}。
HTML: <div class="clear"> </div>
CSS: .clear {clear:both;height:0;overflow:hidden;}
clear:both;是清除所有浮动；height:0;overflow:hidden;是用来改变IE6下标签有默认的10px的行高低于10px时将以10px的高度显示的bug。
但是空标签清浮动会增加多余的的标签代码。
方法2：overflow清除浮动：父级div定义 overflow:hidden
为什么加入overflow:hidden即可清除浮动呢？那是因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。Css overflow:hidden清除浮动方法DIVCSS5推荐使用。
在需要清除浮动的父标签中加入overflow属性即可，但是在IE6下不认识此属性则加入zoom:1;或height:1%;CSS样式改为：
<style type="text/css">
.out {overflow:auto;zoom:1;}
</style>
并不是所有的overflow属性都可起来一样的效果，比如overflow:visible属性就只能对IE6/7、遨游起作用，而对FF、chrome、opera、IE8均无清浮动的作用。对于父标签定义高度且定义的高度小于子标签则IE6/7、遨游则以下拉框形式显示；而FF、chrome、opera、IE8则将子标签超出部分隐藏。
visibility和display
visibility:invisible表示隐藏，但仍占据其位置
display:none 不显示切不占据位置，跟没有此元素一样
相对定位和绝对定位
相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
XXX
XXX