CSS-学习笔记三

绝对定位：
1. 脱离了文档流，没有浮动效果
2. 默认情况下，设置了绝对定位的块，它的Top,left是相对于浏览器的
3. 当给设置了绝对定位的块的父元素设置定位的时候（绝对、相对、固定），
    那么改元素的top和left相对的是父元素的。

相对定位：
1. 没有脱离文档流，浮动有影响
2. 设置相对定位的块，不管它的父元素是否定位，那么它的top,left始终是相对它的父元素
3. 只有设置了定位的块，才有top,left属性
4. div默认: position:static 存在于文档流，浮动有影响

固定定位：
1.脱离文档流，不会出现滚动条

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="CSS/Demo.css" rel="stylesheet" />
</head>
<body>

    <!--四种定位：static, fixed, absolute,relative-->
    <div id="d1">
        <div id="d2"></div>
        <div id="d3"></div>
    </div>

    <div id="d4">
        <div id="d5"></div>
        <div id="d6"></div>
    </div>

    <div id="d7"></div>

    <div id="d8">
        <div id="d9">居中</div>
    </div>

    <div id="d10"></div>
    <div id="d11"></div>
    <div id="d12"></div>

    <div id="d13">
        内容太多超过边框内容太多,多出的地方隐藏。内容太多超过边框内容太多,多出的地方隐藏。内容太多超过边框内容太多,多出的地方隐藏。内容太多超过边框内容太多,多出的地方隐藏。
    </div>  

    <div id="dcon">
        <h2 id="dtitle"><a href="javascript:;">武汉房产/腾讯看房</a></h2>
        <div id="dtop">
            <div id="dpic"><img src="Picture/2.jpg" /></div>
            <div id="dcom">
                <a href="javascript:;">最牛钉子户坚守十几年  曾拒2000万补偿</a>
            </div>
        </div>
        <div id="dlist">
            <ul>
                <li><a href="javascript:;">房产中介市场存隐忧：黑中介骗了租客骗房东</a></li>
                <li><a href="javascript:;">房产中介市场存隐忧：黑中介骗了租客骗房东</a></li>
                <li><a href="javascript:;">房产中介市场存隐忧：黑中介骗了租客骗房东</a></li>
                <li><a href="javascript:;">房产中介市场存隐忧：黑中介骗了租客骗房东</a></li>
                <li><a href="javascript:;">房产中介市场存隐忧：黑中介骗了租客骗房东</a></li>
            </ul>
        </div>
    </div>

</body>
</html>

*{
    padding :0px;
    margin :0px;
    font-family :"微软雅黑";
    list-style-type:none ;
}

a{
    text-decoration :none;
}
/*绝对定位：
1. 脱离了文档流，没有浮动效果
2. 默认情况下，设置了绝对定位的块，它的Top,left是相对于浏览器的
3. 当给设置了绝对定位的块的父元素设置定位的时候（绝对、相对、固定），
    那么改元素的top和left相对的是父元素的。
*/
#d1{
    width :300px;
    height :300px;
    border :solid 1px red;
    margin-top :100px;
    margin-left :100px;
    /*position :absolute ;*/
}

#d2{
    width :100px;
    height :100px;
    border :solid 1px blue;
    position :absolute ;
    top:200px;  /*只有在设置了定位后才有效果，否则无效果*/
    left:200px;
}

#d3{
    width :100px;
    height :100px;
    border :solid 1px black;
    top:200px;/*无效果*/
    left:200px;
}

/*相对定位：
    1. 没有脱离文档流，浮动有影响
    2. 设置相对定位的块，不管它的父元素是否定位，那么它的top,left始终是相对它的父元素
    3. 只有设置了定位的块，才有top,left属性
    4. div默认: position:static  存在于文档流，浮动有影响
*/
#d4{
    width :300px;
    height :300px;
    border :solid 1px red;
    margin-top :100px;
    margin-left :100px;
    /*position :absolute  ;*/
}

#d5{
    width :100px;
    height :100px;
    border :solid 1px blue;
    position :relative ;
    /*position :absolute ;*/
    float: left; /*浮动有影响*/
    /*top: 200px;
    left: 200px;*/
}

#d6 {
    width: 100px;
    height: 100px;
    border: solid 1px black;
    position: relative;
    float: left; /*浮动有影响*/
    top: 200px;
    left: 200px;
}

/*固定定位：
1.脱离文档流，不会出现滚动条*/
#d7{
    width :100px;
    height :100px;
    border :solid 1px red;
    position :fixed;
    bottom  :200px;
    right :100px;
}

/*居中放置*/
#d8{
    width :300px;
    height :300px;
    border :solid 1px red;
    position :absolute;
    left :%;
    top:%;
    margin-top :-150px;
    margin-left :-150px;

}

#d9{
    width :100px;
    height :100px;
    border :solid 1px red;
    position :relative  ;
    left :%;
    margin-left :-50px;
    top:%;
    margin-top :-50px;
}

/*层级由z-index控制，越大就约在上面*/
#d10{
    width :100px;
    height :100px;
    border :solid 2px red;
    background-color:yellow;
    position :absolute ;
    top:900px;
    left:100px;
    z-index :;
}

#d11{
    width :100px;
    height :100px;
    border :solid 2px red;
    background-color:orange;
    position :absolute ;
    top:920px;
    left:120px;
    z-index :;
}

#d12{
    width :100px;
    height :100px;
    border :solid 2px red;
    background-color:forestgreen;
    position :absolute ;
    top:910px;
    left:110px;
}

#d13{
    width :100px;
    height :100px;
    border:solid 1px red;
    /*overflow :hidden ;隐藏超出的部分*/
    overflow :auto ;/*超出的部分自动带有滚动条*/
    /*overflow :scroll ;/*不管超出没超出都有滚动条*/*/
}

#dcon{
    width :350px;
    height :280px;
    border:solid 1px #D2E1F1;
     position :absolute ;
     top:1100px;
     left :100px;
}

#dtitle{
    height :32px;
    background-color :#F6FAFD;
    font-size :16px;
    line-height :32px;
    padding-left :10px;
    width :%;   /*这里有问题，还是会多出来一节*/

}

#dtitle a{
        color :#0873C0;
}

#dtop{
    height :76px;
    width :%;
    margin :10px 0px;
    }

#dcom{
    width :170px;
    margin-top :18px;
}

#dpic,#dcom{
    float :left ;
}

#dpic{
    margin :0px 10px;
}

#dcom a{
    color:#3B639F;
    font-weight :;
}

#dlist{
    margin-left :10px;
}
#dlist li{
    line-height :26px;
    background-image :url("../Picture/3.png");
    background-repeat:no-repeat ;
    padding-left :20px;
    background-position :0px 6px;

}
 #dlist li a{
     font-size :14px;
     color :#172C45;
 }
 #dlist li a:hover{
     color :#f00;
 }