css中的定位、浮动、盒子模型

一、

　　1、块标签display:block:默认占一行，可以设置宽和高，默认宽高为零

　　2、行内块标签display：inline-block：不占一行，可设宽高

　　3、行内标签display：inline：不占一行，不可设宽高，宽高根据内容来

二、层：Z-Index，数字越大越在上层，position一起用

三、定位

　　position定位：1、fixed：相对于窗口定位，自身位置消失，默认位置左上角，绝对定位

　　　　　　　　  2、relative：相对于自身定位，自身位置不消失，相对定位

　　　　　　　　  3、absolute：相对于最近的有position样式的父标签定位，自身位置消失，默认位置不变

四、盒子模型：1、padding：内边距

　　　　　　　2、border：边框

　　　　　　　3、margin：外边距

五、浮动     float：left/right 注意外层标签，并且给定区域

例子

    <div class="dh">
        <div class="dh_div">
        <ul>
            <li> <a href="#">首页</a></li>
            <li> <a href="#">新闻网</a></li>
            <li> <a href="#">学校概况</a></li>
            <li> <a href="#">机构设置</a></li>
            <li> <a href="#">师资队伍</a></li>
            <li> <a href="#">科学研究</a></li>
            <li> <a href="#">人才培养</a></li>
            <li> <a href="#">招生就业</a></li>
            <li> <a href="#">大学文化</a></li>
            <li> <a href="#">国际交流</a></li>
            <li> <a href="#">校友联谊</a></li>
        </ul>
        </div>
    </div>

css样式（例子）

.dh {
    width: 100%;
    height: 52px;
}
.dh_div {
    width: 80%;
    height: 52px;
    ;
    margin: 0 auto;
    border-top: 1px solid #ccc;
    line-height: 52px
}
.dh_div ul {
    list-style-type: none
}
.dh_div ul li {
    float: left;
    margin-right: 38px;
}
.dh_div ul li a {
    text-decoration: none;
    color: #8888A5
}
.dh_div1 ul li:first-child {
    margin-left: 30px
}