您的位置：首页 > Web前端 > CSS

CSS-学习笔记三

2017-01-03 14:44 204 查看

绝对定位：
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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航