CSS--文档流和定位
Posted 肖帆咪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS--文档流和定位相关的知识，希望对你有一定的参考价值。
文档流
文档中标签在排列时所占的位置，在每行中按从左至右的顺序排放标签，即为文档流。
改变排放顺序的两种办法
1·浮动float
2·css定位
浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
float:none,left,right
*/
/*
浮动带来的问题:浮动后的标签没有撑开标签
会影响后面的网页布局
俗称:高度塌陷
解决方法:
1.给父标签设置具体的高度
2.清除浮动,会默认将父标签撑开与浮动标签相应的高度
在浮动标签后新建一个空白的标签,清除以上左浮动标签
style="clear: left;"
*/
.nvg_Dao{
background-color: #8A2BE2;
float: left;
width: 90px;
padding: 20px;
}
#nvg{
width: 1000px;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="nvg">
<div class="nvg_Dao">导航1</div>
<div class="nvg_Dao">导航2</div>
<div class="nvg_Dao">导航3</div>
<div class="nvg_Dao">导航4</div>
<div class="nvg_Dao">导航5</div>
<div class="nvg_Dao">导航6</div>
<div class="nvg_Dao">导航7</div>
<div style="clear: left;"></div>
</div>
</body>
</html>
定位
1.相对定位
position:relative激活相对定位
left right top bottom 设置标签的偏移量
特点:
没有设置位移量,标签没有任何变化
相对定位是相对于自己原来的位置进行定位
开启相对定位会使标签提升一个层次,但不会改变标签的性质
没有脱离文档流,位置还占用
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#circle1{
background-color: #00FFFF;
width: 300px;
height: 300px;
/*
开启相对定位,距原来的位置顶部50px,距左边50px
*/
position: relative;
top:50px;
left: 50px;
}
#circle2{
background-color: #FF0000;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="circle1">
方块1
</div>
<div id="circle2">
方块2
</div>
</body>
2.绝对定位
position:absolute开启绝对定位
left right top bottom四个属性来设置标签的偏移量
特点:
1.不占空间
2.会脱离文档流,浮动起来,可能会与其他标签重叠
3.绝对定位是以离他最近的祖先标签进行定位(开启子标签的绝对定位都会开启父标签的 相对定位)
4.如果所有祖先标签都没有开启定位,那么它会以浏览器窗口进行定位
5.绝对定位会改变标签的性质,行级标签会变成块级标签
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
/*
默认情况下,在两个标签都开启绝对定位后
写在后面的标签会在前面标签的上层
z-index;number
定义标签的层数,数值越高,标签会在最上层
*/
#circle1{
width: 300px;
height: 300px;
background-color: #00FFFF;
position: absolute;
z-index: 2;
}
#circle2{
width: 300px;
height: 300px;
background-color: #FF8C00;
position: absolute;
}
</style>
</head>
<body>
<div id="circle1">
方块1
</div>
<div id="circle2">
方块2
</div>
</body>
固定定位
position:fixed
left right top bottom四个属性来设置标签的偏移量
使标签悬浮起来,固定不动
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.Page{
width: 1500px;
height: 3000px;
background-color: aqua;
}
.Page2{
width: 1000px;
height: 200px;
background-color: #FF0000;
text-align: center;font-size: 30px;
}
</style>
</head>
<body>
<!-- 超链接跳转到指定的锚点 -->
<a name="top"></a>
<div style="position: fixed; top: 0px; height: 50px;" class="Page2">
网页导航
</div>
<div class="Page">网页</div>
<a href="#top" style="position: fixed; right: 20px; bottom: 20px;">返回顶部</a>
</body>
总结
float:none,left,right 浮动
style="clear: left;" 清除浮动
position:relative 开启相对定位
position:absolute 开启绝对定位
position:fixed 固定定位
z-index:number 定义标签的层数,数值越高,标签会在最上层
以上是关于CSS--文档流和定位的主要内容，如果未能解决你的问题，请参考以下文章