10.CSS定位
2017-07-17 本文已影响0人
Lv_0
-
显示形式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display</title>
<style>
body{
background-color: grey;
}
.HInline{
background-color: red;
display: inline;
}
.PBlock{
background-color: orange;
display: block;
}
.DNone{
background-color: yellow;
display: none;
}
</style>
</head>
<body>
<h3 class="HInline">标题</h3>
<p class="PBlock">段落</p>
<div class="DNone">
<span class="SNone">None</span>
</div>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.display定义了元素的展示形式,优先级高于元素本身的展现形式;
2.元素均以框承载,以框呈现,一切皆为框;
3.block:即展示为块元素,前后自带换行;
4.inline:即展示为行内元素,行内元素只在本行内进行排列;
5.none:即无边框,内容不会显示,也不占用文档空间.
示例图片
-
显示图层
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display</title>
<style>
body{
background-color: purple;
}
.Init,.Init2{
background-color: red;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
}
.fixed,.fixed2{
background-color: orange;
width: 100px;
height: 100px;
position: fixed;
top: 80px;
}
</style>
</head>
<body>
<div class="Init" style="left: 80px;"></div>
<div class="fixed"style="left: 40px;"></div>
<div class="Init2" style="left: 280px;z-index: 1;"></div>
<div class="fixed2" style="left: 240px;"></div>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.z-index属性定义了元素的图层顺序,默认值为0;
2.z-index作用于非祖,子元素,对祖辈和子辈元素的图层更改无效;
3.z-index属性值可以是正值,也可以是负值,按照其值大小决定图层顺序;
4.z-index属性值越大,则其展示图层越靠前.
示例图片
-
相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display</title>
<style>
.Init{
background-color: red;
width: 100px;
height: 100px;
}
.relative{
background-color: orange;
width: 100px;
height: 100px;
position: relative;
left: 50px;
top: 10px;
}
</style>
</head>
<body>
<div class="Init">
<div class="relative"></div>
</div>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.相对定位,是针对此元素的中心的初始位置进行偏移得到的位置;
2.相对定位,是相对自己而言.
运行图片
-
绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display</title>
<style>
body{
background-color: purple;
}
.Init{
background-color: red;
width: 100px;
height: 100px;
margin: 80px;
}
.absolute,.absolute2{
width: 100px;
height: 100px;
position: absolute;
left: 20px;
top: 50px;
}
.Init2{
background-color: green;
width: 100px;
height: 100px;
position: fixed;
left: 300px;
top: 80px;
}
</style>
</head>
<body>
<div class="Init">
<span class="absolute" style="background-color: yellow;"></span>
</div>
<div class="Init2">
<span class="absolute2" style="background-color: orange;"></span>
</div>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.绝对定位,若其上层元素已定位,则相对其上层元素;
2.若未定位,则以此往上寻找祖先元素,直至遇到已定位的元素;
3.若均未定位,则相对窗口进行定位;
4.绝对定位与文档流无关,故无论最初定义的是何种形式,最终以块的形式展现;
5.绝对定位是相对上层元素而言.
示例图片
-
固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display</title>
<style>
body{
background-color: purple;
}
.Init{
background-color: red;
width: 100px;
height: 100px;
position: absolute;
left: 80px;
top: 50px;
}
.fixed{
background-color: orange;
width: 100px;
height: 100px;
position: fixed;
left: 40px;
top: 80px;
}
</style>
</head>
<body>
<div class="Init">
<span class="fixed"></span>
</div>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.固定定位,是元素的左上点相对于窗口的左上点的位置;
2.固定定位与文档流无关,故无论最初定义的是何种形式,最终以块的形式展现;
3.固定定位是相对窗口而言.
示例图片
-
浮动定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display</title>
<style type="text/css">
.One{
background-color: red;
width: 100px;
height: 100px;
float: right;/*case1:元素1向右浮动,取消其普通流空间*/
}
.Two{
background-color: orange;
width: 100px;
height: 100px;
float: right;/*case2:元素2向右浮动,取消其普通流空间*/
clear: right;/*case3:元素2清理浮动块,即其右侧不能有浮动块*/
}
.Three{
background: yellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="One"></div>
<div class="Two"></div>
<div class="Three"></div>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.图1为无case1-case3的情况,即正常展示;
2.图2为有case1,无case2-case3的情况:
块1向右浮动,并取消其在文档流中的空间,即不占用空间,块2,块3依次向上顺移(块1的空间被腾出)
3.图3为有case1-case2,无case3的情况:
块1向右浮动,直至遇到父边框,并取消空间
块2,块3向上顺移,占取空出的空间
块2向右浮动,直至遇到浮动边框块1,并取消块2的空间
块3向上顺移,占取空出的空间
4.图4为有case1-case3的情况:
块2清除右侧浮动块,即其右侧不能有浮动块,因当前块2右侧存在块1,故块2自动向下顺移
块2虽然下移,但块1和块2仍不占用空间,故块3位置不变
图1
图2
图3
图4
