CSS基础

1.样式表的层叠与选择器的特殊性。

    在样式表中，同一元素可能有两个或者更多的规则。CSS通过一个成为“层叠”的过程处理这种冲突。层叠采用如下重要度次序：

•     标有!important的用户样式。
•     标有!important的作者样式。
•     作者样式。
•     用户样式。
•     浏览器/用户代理应用的样式。

      然后根据选择器的特殊性决定规则的次序：具有更特殊的选择器的规则优于具有一般选择器的规则。如果两个规则的特殊性相同，那么后定义的规则优先。

     选择器的特殊性分为四个等级：a b c d

• 如果样式是行内样式，那么a=1
• b等于ID选择器的总数
• c等于类，伪类和属性选择器的数量
• d等于类型选择器和伪元素选择器的数量 

 特殊性示例：

                                   选择器                                     特殊性                   以10为基数的特殊性

                                    style=""                                     1,0,0,0                        1000

                           #wrapper #content{}                0,2,0,0                        200
                           #content .dateposted{}            0,1,1,0                       110

                           div#content{}                             0,1,0,1                       101
                           #content{}                                  0,1,0,0                       100
                           p.comment .dateposted          0,0,2,1                        21
                           p.comment                                0,0,1,1                        11
                           div p{}                                        0,0,0,2                         2
                          p{}                                               0,0,0,1                         1

代码示例：

css文件：

#content #subcontent1 h2{
     color:red;
}
 
#content #subcontent1>h2{
     color:green;
}
 
body #content div[id="subcontent1"] h2{
     color:orange;
}
 
#subcontent1 div.subcontent2 h2{
     color:yellow;
} 
 
subcontent1 div.subcontent2 h2.first{
    color:blue;
}

html文件：

	<div id="content">
		<div id="subcontent1">
			<h2>Test</h2>
			<div class="subcontent2">
				<h2>Hello!</h2>
			</div>
		</div>
	</div>	

结果：

chrome中：

Test

Hello!

IE中：

Test

Hello!

在chrome中，若将css中前2个样式调换位置，即

#content #subcontent1>h2{
     color:green;
}

#content #subcontent1 h2{
     color:red;
}

则结果为：

Test

Hello!

而对特殊选择器“*”和“+”测试，IE和Chrome的表现又不同。此不赘述。

那当样式表中同一元素既有!important声明又有选择器的特殊性时，谁的优先级高呢？!important一旦使用，它就覆盖了其他规则，而不需要管选择器的特殊性。

2.盒子模型。

在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，只会增大元素框的总尺寸。当外边据为负值时，可应用于多种技术中，如“投影”、“三栏布局”等。

关于外边距的合并：

HTML文件

    <div id="content1">
	<div id="content2"></div>
        <div id="content3"></div>
    </div>	

css文件：

#content1{
	height:100px;
	width:100px;
	margin:20px;
	background:red;
}

#content2{
	margin:20px;
	height:20px;
	width:20px;
	background:green;
}

#content3{
	margin:20px;
	height:20px;
	width:20px;
	background:blue;
}

结果：

每个content都添加“padding:1px”后：

若添加“border:1px”后：

chrome效果:

IE效果：

所以大多我们可以通过添加一点内边距或与元素背景颜色相同的小边框来修复外边距的叠加。

注：只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框和绝对定位框之间的外边距不会叠加。

3.浮动与清除。

float:将元素从常规文档流中移出，直至该元素碰到其他元素的边框为止。如果浮动元素后面还有文档流的文本，那么文本将会围绕着浮动元素存在。

clear:对元素进行清理实际上是为前面的浮动元素留出了垂直空间。具体表现为将该元素的margin-top重设（CSS1、CSS2）或者是增大清楚空间而margin-top不变（CSS2.1）。

浮动的特点：如果没有足够的水平空间，浮动元素将下移动，如果浮动元素高度不同，那么当它们向下移动时可能会被其他浮动元素“卡住”：

如图：

关于浮动与清除的一些方法：

HTML文件：

    <div id="maincontent">
        <div id="content1"></div>
        <div id="content2"></div>
    </div>	

CSS文件：

#content1{
	margin:20px;
	height:60px;
	width:60px;
	float:left;
	background:red;
}

#content2{
	margin:20px;
	width:50px;
	height:50px;
	float:left;
	background:green;
}

#maincontent{
	border:1px gray solid;
	width:200px;
}

结果如下：

如何让maincontent包围住content1和content2呢？

有如下一些方法：

（a）让maincontent浮动——float:left;

（b）添加空白块

html中添加<br id="clear">：

        <div id="content2"></div>
        <br style="clear:both"/>

（c）maincontent中添加overflow:hidden。（值为hidden或者auto的overflow属性会自动清理包含的任何浮动元素。）

（d）after伪元素的应用：

CSS中添加如下样式：

#maincontent:after{ 
     content: "."; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden; 
}

.clear{
    zoom:1;			/*IE triggers hasLayout，高版本IE不需要了*/
}

最终结果如下:

其他方法略去，推荐c、d的方法。

4.关于布局：

布局可分为固定宽度、流式、弹性布局。各布局主要是单位的不同。一般使用px和em、%作为单位。

ps：弹性布局中，最好以%指定内部宽度（被包含框），而以em指定容器宽度（包含框），这样修改布局时，不需要所有宽度都修改。

两栏布局很简单，在此不赘述。

如下：

HTML文件：

    <div class="content">
        <div class="secondary">Secondary</div>
        <div class="primary">Primary</div>
    </div>	

CSS文件：

.content .primary{
	width:450px;
	height:200px;
	border:1px solid red;
	float:right;
	margin:30px 10px;
	display:inline;
	text-align:center;
}

.content .secondary{
	width:100px;
	height:200px;
	border:1px solid green;
	float:left;
	margin:30px 10px;
	display:inline;
	text-align:center;
}

.content{
	width:600px;
	height:300px;
	border:1px dashed gray;
	float:left;
}

三栏布局：在primary中将之分为2部分。如下：

三栏布局还可以用负外边距解决最右边框（即pri_secondary框）的问题。此不赘述。

5.其他想说的几点：

a.更多的应用html5和css3。

b.圆角框（1.几张图像的覆盖 2.border-radius 3.border-image）、投影（1.负外边距 2.相对定位--left:-5px;等 3.box-shadow）、不透明度（rgba）及美化连接（突出显示不同的连接类型）。

参考书籍：CSS Mastery