CSS读书笔记（1）---选择器和两列布局

（1）CSS选择器优先权选择。

优先权从大到小的选择如下：

• 标有!important关键字声明的属性
• HTML中的CSS样式属性 <div style="color:red"></div>
• 作者编写的CSS文件 <link href='xx.css'>
• 用户浏览网页在浏览器中设置的样式
• 浏览器默认的样式

对于ID选择器.类选择器等，其优先级从大到小分别是：

　　

• 直接在标签中写入样式<div style="color:red"></div> 优先积分1000
• ID选择器    优先积分100
• 类选择器    优先积分 10
• 标签选择器 div{color:blue;}  优先积分1

举个例子，对于

<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容器中实现两列布局几个要点：

• 通过float实现mainBox和sideBox左右两列的效果
• container、sideBox/mainBox不设置高度
• 如果container设置了margin属性。底部的footer不会和container分开，通过在footer中清除浮动也没效果。通过在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真神奇！