标签：并且 sid style deb main content span code htm
（1）CSS选择器优先权选择。
优先权从大到小的选择如下：
对于ID选择器.类选择器等，其优先级从大到小分别是：
举个例子，对于
<div> <p class="hi">hello world</p> </div>
在CSS中如果有 div.hi{color:red;};其优先级是1+10=11.
（2）页面布局——两列自适应高度和两列等高布局
先布置页面结构
<div id="header"> 头部信息 </div> <div id="container"> <div class="mainBox"> <p> 主要内容区域</p> <p> 主要内容区域</p> <p> 主要内容区域</p> <p> 主要内容区域</p> <p> 主要内容区域</p> <p> 主要内容区域</p> <p> 主要内容区域</p> <p> 主要内容区域</p> </div> <div class="sideBox"> 侧边栏 <p> 主要内容区域</p> <p> 主要内容区域</p> <p> 主要内容区域</p> </div> </div> <div id="footer"> 底部信息 </div>
container容器中实现两列布局几个要点：
*{
margin:0;
padding:0;
}/* 设置页面中所有元素的内外补丁为0*/
#header,#footer{
height:30px;
background-color:#ccc;
}
#container{
margin:10px 0;
}/*页面主要内容区域*/
.mainBox{
float:left;
width:70%;/*利用百分比定义左右两列占container盒子的宽度*/
color:#fff;
background-color:#333;
}
.sideBox{
float:right;
width:30%;
background-color:#666;
}
#container:after{
display:block;
visibility:hidden;
font-size:0;
line-height:0;
clear:both;
content:"";
}/*在container后加入不可见的块级元素 使container和footer分开*/
#footer{
clear:both;
}/*兼容低版本IE 防止底部浮动到container右边*/
两个等高布局可以在两列自适应布局的基础上改进。主要有4种方法：背景模拟、负边距、边框模拟、javascript方式。
负边距方式：主要是在左右浮动的mainBox和sideBox加入非常大的（比如9999px）padding-bottom和很大的负值的margin-bottom，然后在其父元素中加入overflow:hidden；
#container{
width:960px;
margin:10px 0;
overflow:hidden;
}/*页面主要内容区域*/
.mainBox,.sideBox{
margin-bottom:-9999px;
padding-bottom:9999px;
}
Javascript方式:这个方式简单明了；不需要设置内容区域的高度，利用clientHeight获取区域的高度，对比左右区域高度，然后把高度大的高度赋值给另一个区域。
<script>
var mh=document.getElementById("mainBox");//这里需要对相应区域设置ID，也可以通过getElementByClassName();
var sh=document.getElementById("sideBox");
if(mh.clientHeight<sh.clientHeight){
mh.style.height=sh.clientHeight+"px";
}else{
sh.style.height=mh.clientHeight+"px";
}
</script>
JavaScript真神奇！
标签：并且 sid style deb main content span code htm
原文地址：http://www.cnblogs.com/mynotebook/p/6024080.html
