CSS定位使用详解
发布于 2015-04-24 00:55:40 | 185 次阅读 | 评论: 0 | 来源: 网友投递
CSS层叠样式表
CSS（层叠样式表） 即 级联样式表 。
它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
1：CSS定位
position：
- absolute 绝对布局 不占位置 而且margin左右设为auto没用
- realtive 相对布局 占位置 margin左右设为auto有用
- fixed 不占位置 但是会固定在浏览器的一个位置 而且margin左右设为auto没用 前三个都可以使用偏移量
- static 其他属性z-index 偏移量会没用
<style type="text/css">
#div1{
height: 100px;
width: 500px;
background-color: blue;
position: fixed;
border-radius: 20px;
z-index: 2;
}
#div2{
height: 100px;
width: 500px;
left: 50px;
top: 50px;
background-color: red;
position: fixed;
border-radius: 20px;
z-index: 0;
}
#div3{
height: 100px;
width: 500px;
left: 100px;
top: 80px;
background-color: yellow;
position: fixed;
border-radius: 20px;
z-index: 1;
}
</style>
CSS
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script>
for(var i = 0;i < 100 ;i++ ){
document.write(i + "<br />");}
</script>
HTML
效果：
2：CSS浮动
<div id="continer">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
LIPENGLIPENGLIPENG
</div>
HTNL
<style type="text/css">
#div1{
height: 100px;
width: 50px;
background-color: blue;
border-radius: 20px;
float: left;
}
#div2{
height: 100px;
width: 100px;
background-color: red;
border-radius: 20px;
float: left;
}
#div3{
height: 100px;
width: 100px;
background-color: yellow;
border-radius: 20px;
float: left;
}
#continer{
height: 300px;
width: 240px;
background-color:gray;
border-radius: 20px;
float: left;
}
</style>
CSS
效果：
3：浮动的应用
<style type="text/css">
#div1{
height: auto;
width: 500px;
margin: 100px auto;
}
li {
list-style: none;
}
ul{
width: 25px;
float: left;
}
</style>
<div id="div1">
<ul>
<li><img src="img/1.jpg" title="1"></li>
<li><img src="img/2.jpg" title="2"></li>
<li><img src="img/3.jpg"></li>
</ul>
<ul>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/6.jpg"></li>
</ul>
<ul>
<li><img src="img/7.jpg"></li>
<li><img src="img/8.jpg"></li>
<li><img src="img/9.jpg"></li>
</ul>
</div>
HTML
推荐阅读
最新资讯