<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" />
<meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例页面</title>
<style type="text/css">
/*后代选择符*/
#div1 p{
color:red;
}
/*子选择符*/
#div1>p{
font-size:150%;
}
</style>
</head>
<body>
<div id="div1">
<p id="p1">我是div1的儿子1
<p id="p1_1">我是div1的孙子</p>
</p>
<p id="p2">我是div1的儿子2</p>
</div>
</body>
</html>
示例中，"p1"和"p2"包含在“div1”内，那么"p1"和"p2"就是“div1”的儿子，是后代，而“p1_1”包含在“p1”中，那么“p1_1”是“p1”的儿子，是后代。而“p1_1”也包含在“div1”中，则“p1_1”是“div1”的孙子，也是后代。使用“#div1 p{color:red;}”（后代选择器）会将div1下面的所有段落的字体颜色都设置为了红色。无论是孩子还是孙子，都要听话。“只要是我的后代，就得听我的话！”——这就是“后代选择符”。
而“子选择符”则不会那么霸道，它只管它的“儿子”，不会去管“孙子”、“重孙子”、“重重孙子”……
2.重构之美－迎接网站标准化设计的来临
2.1、使用ID将#开头的表现样式赋予DIV，UL，LI，P，SPAN等元素。
2.2、使用margin: 0 auto;语句将DIV等元素页内或嵌套居中。
2.3、使用body{margin: 0; padding: 0;}样式将页面在3大浏览器中贴边。
2.4、使用margin、padding、border进行间距的控制。（非常有用）
2.5、背景图片可平铺-repeat，可精确定位-position。
2.6、通过设置a:与a:hover的样式实现链接翻转的各种样式效果，背景，边框，字体等等。
2.7、理解display: block;的用法。（不愧为一种布局元素，在布局上作用很大，我一直在使用，但直到第三天才有所领悟。不仅仅是做多行多列的导航，不夸张的说，整个页面就是用它来布局的。）
2.8、position: relative; 与 position: absolute; 的区别，理解float的使用。
2.9、通过!important 调节IE浏览器的兼容性。
2.10、了解样式可继承，并由此可以减少很多重复的样式代码，优化样式表。
通过一些讨论，关于div等IE 15px高度BUG问题，感谢No3和cloudchen各给出了一个很好的解决办法：
1、设置line-height，例：XX{line-height: 1px; }
2、设置overflow，例：XX{overflow: hidden; height: 1px}
个人感觉，line-height很直观简单，overflow稍需理解。
2.11. div/ul/li 三个元素，并且不是很清楚具体的含义。反正当成类似 table/tr/td 的关系来用。
2.12.所谓DIV+CSS并非是将div标记一用到底，应充分使用其他标记，比如UL、LI、P、SPAN等。
2.13.可以通过整合的方法缩减代码。比如background: url() (color) (position) (repeat);等。不过我建议，初学者在最初最好还是老老实实写全代码，这样既便于理解也便于以后在需要分开写时能知道如何写。
2.14. 利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important。
3.《精通CSS-高级Web标准解决方案》笔记
3.1. div可以用来对块级元素进行分组，span可以用来对行内元素进行分组或标识。
3.2. 三个CSS最重要的概念：浮动（float），定位（position），框模型（box model）。
3.3. 框模型：这个框由内容，填充（padding），边框（border），空白边（margin）组成
3.4.空白边叠加：
当两个垂直空白边相遇时，他们将形成一个空白边，这个空白边的高度等于两个发生叠加的空白边的高度中的较大者。
只有普通文档流中块框的垂直空白边才会发生空白边叠加，行内框，浮动框或绝对定位框之间的空白边不会叠加。
3.5. 块框，行内框
p h1 div等元素称为块级元素（block-level element），意思是这些元素显示为一块内容，即“块框”，与之相反，span strong等元素称为行内元素（inline），因为他们的内容显示在行中， 即“行内框”。
可以使用display属性改变生成的框的类型，display=“block”可以让行内元素表现的像块级元素一样，display=“none”可以让生成的元素根本没有框，这样这个框及其所有内容就不再显示，不占用文档中的空间。
3.6.CSS中有三种基本的定位机制：普通流（normal flow 默认），浮动和绝对定位。
3.7. InnerHTML：可以一种非常简单的方式来创建一段HTML代码，而createElement（）和appendChild（）适合文档遵循一种有规律的结构来创建。
4.伪类选择符和伪对象选择符
很简单且常见的情况，给超链接设置“鼠标移上不同字体颜色发生变化”的样式。这里的“:link”、“:visited”、“:active”和“:hover”就是“伪类”。之所以说是“伪”，是因为，这些东西一定要依附在某种标签上（示例中是<a>标签），它们并不能单独的存在，当它们单独存在的时候将没有任何意义。
在IE6中，只支持超链接<a>标签的伪类，而在IE7中，则支持几乎所有“可见标签元素”的伪类。也就是说，就算是一个div，你也可以设置div:hover的样式。可以预测的未来是：一些简单的样式方面的变化，将不再需要js去控制，用css就可以实现简单的“动态”效果
讲完了“伪类”，下面来讲讲“伪对象”。首先“伪对象”也是“伪”，自然也必须依附其他元素，而不能单独存在。而“对象”则意味着“有实体”的东西。最常用的“伪对象”就是“:first-letter”（子对象的第一个字）和“:first-line”（子对象的第一行）。下面的示例将有助你理解“:first-letter”和“:first-line”伪对象。
5.收藏夹小图标
如果你将本站加入收藏夹，可以看到在收藏夹网址之前的IE图标变成了本站特别的图标。要实现这样效果很简单，首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。然后将下面的代码嵌入head区：
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
6.MARGIN是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距，如果都一样，可以缩写成"MARGIN: 10px;"。如果边距为零，要写成"MARGIN: 0px;"。注意：当值是零时，除了RGB颜色值0%必须跟百分号，其他情况后面可以不跟单位"px"。MARGIN是透明元素，不能定义颜色。
PADDING是指层的边框到层的内容之间的空白。和margin一样，分别指定上右下左边框到内容的距离。如果都一样，可以缩写成"PADDING:0px"。单独指定左边可以写成"PADDING-LEFT: 0px;"。PADDING是透明元素，不能定义颜色。
7.表格交替行颜色：div tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
8.div内的内容过多时，自动出现滚动条
<style>
#test{
width:50px;
height: 170px;
margin: 3px 5px 5px 5px;
padding: 0 20px 0 0;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
</head>
<body>
<div id="test">div内的内容过多时，自动出现滚动条</div>
</body>
</html>
9. block 和 inline 的区别
第一处讲到block和inline概念的地方是在 HTML 的规范中。确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素):所有允许被 BODY 元素包含的元素，要么是块级的；要么是内联的；要么既可以算作块级的，也可以算作内联的。但是绝对不存在一个能被BODY包含，但即非块级，又非内联的元素。
网页上内容的布局，都是靠controlling box来实现的。在CSS2.1的规范里，Controlling box 分三类——block box, inline box, 和至今都没怎么被广泛支持的run-in box。这就是规范中第二处提到block 和inline 的地方。网页上的内容，不论是不是有标签包围，或者设定了何种显示方式，最终都会被计算成一个 controlling box，并应用布局规则。
在普通布局中，block box 是从上至下，一个隔一个的布局的；inline box 则是从左至右（也可能因为设置了direction而从右到左，或者从上到下）首尾相接，不间断的布局的。
inline box 不响应垂直margin, width, height, max/min width/height 等属性声明；block box 则可以响应这些属性.
display: block VS display: inline最后一个有提到block 和inline 的地方就是这里了。和其他两个地方不同，block 和inline 并不是display 这个属性的唯一取值，在通常情况下，display: block 能让元素生成一个block box, 而display: inline 会生成inline box。
