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">1</div>
<div id="d3">2</div>
</div>
<div id="d4">
<div id="d5">3</div>
<div id="d6">4</div>
</div>
<div id="d7">5</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 :50%; top:50%; margin-top :-150px; margin-left :-150px; } #d9{ width :100px; height :100px; border :solid 1px red; position :relative ; left :50%; margin-left :-50px; top:50%; 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 :3; } #d11{ width :100px; height :100px; border :solid 2px red; background-color:orange; position :absolute ; top:920px; left:120px; z-index :2; } #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 :100%; /*这里有问题，还是会多出来一节*/ } #dtitle a{ color :#0873C0; } #dtop{ height :76px; width :100%; margin :10px 0px; } #dcom{ width :170px; margin-top :18px; } #dpic,#dcom{ float :left ; } #dpic{ margin :0px 10px; } #dcom a{ color:#3B639F; font-weight :900; } #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; }
