定位
作用：通过定位元素位置
使用情景：
-当页面出现盒子压盒子的效果时，推荐使用定位。
-例如：循环播放的图片下面的指示点使用了绝对定闪。
特点：体现元素之间的层级关系
定位分类：静态定位、绝对定位、相对定位、固定定位
1.静态定位
语法：
position: static;
left: ;
top:;
ritht:;
bottom:;
-静态定位不能移动元素位置
-静态定位的元素就是标准流
2.绝对定位
position: absolute;
位置移动的特点：
-如果子元素设置了绝对定位，如果该元素的父元素设置了静态定位或没有定位，那么当前子元素以body左上角为参照移动定位。
-如果子元素设置了绝对定位，如果该子元素的父元素设置了除静态定位以外的其他定位，那么子元素以当前父元素的左上角为定位参照。
本身的特点：
绝对定位的元素脱标不占位置
绝对定位可以实现模式转换
3.相对定位
position: relative;
特点：
-相对定位元素占位置
-相对自己原来的位置为参照去移动
-相对定位不能进行模式转换
-一般情况下要设置 "子绝父相"
3.固定定位
position: fixed;
特点：
-固定定位元素始终以body或浏览器或视频区域为参照
-固定元素脱标，不占位置
-固定元素可以实现模式转换
4.层级关系
当给元素设置了定位后，元素便具有了层级
只有定位的元素才有层级关系
通过z-index改变层级关系
特点：默认情况下，当给一个元素设置了定位（除静态定位），该元素默认的层级z-index为auto
当z-index值相同情况下，最后的定位元素要高于前面的元素，既后面的元素会压住前面元素
当z-index值相同情况下，z-index值越大，层级越高。
当元素的父元素也有层级，则以父元素的层级大小为准。
5.绝对定位的元素居中
盒子居中：margin 0 auto; //只能让标准流盒子居中
绝对元素盒子居中的方法：
left: 50% 父元素宽一半
margin-left: - 自己元素宽度的一半;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta lang="en">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box{
width: 400px;
height: 400px;
border: 1px solid red;
margin: 0 auto;
position: relative;
}
.one{
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
position: absolute;
left: 50%;
margin-left: -50px; /*此外-代表向元素自己相反方向走*/
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
</div>
</body>
</html>
6.标签包含规范
-段落中不能包含标题h
-段落中不能包含div标签
-行内元素最好不要包含块级元素
7.网页布局
优先考虑使用标准流
再考虑使用浮动
最后再考虑使用定位
元素模式转换必须使用display
8.vertical-align属性
垂直方向的对齐
默认行内块元素有一个vertical-align属性 vertical-align:baseline 默认基线对齐
网友评论