前端攻城狮---css样式之定位
为什么要学习定位呢？因为很重要。。。(ps:这不是废话嘛)这样子把，假如说我们需要在一个盒子里居中显示一个小盒子，那么就是需要定位来坐，定位用的频率还是非常高的。
定位
css定位分为三种：绝对定位 相对定位 固定定位。各位看官不要急，听我一一道来。
相对定位：position:relative
相对定位相对谁？相对的是改控件原来的位置
top 正数向下
left 正数向右
right 正数向左
bottom 正数向上
但是呢以上四个参数可不是随便选的，top/bottom,left/right 都只能二选一，不然top和bottom同时设置只有top有效，left和right同时设置只有left有效。
还有一点设置了相对定位的元素不脱标，就是说还是按照标准流的要求。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.txt {
font-size: 20px;
}
.btn {
position: relative;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div>
请输入用户名:
<input type="text" class="txt"/>
<input type="button" value="登录" class="btn"/>
<input type"button" value="haha"/>
</div>
</body>
</html>绝对定位position:absolute
同样的那么绝对定位相对于谁呢？绝对定位相对于离自己最近的且设置了相对定位的父标签，那么有人会问如果没有父标签设置相对定位呢？那要怎么办？那么就相对body
接下来说说绝对定位的一些特性把
- 假如没有父标签，或者是有父标签但是没有设置相对定位的话，那么top bottom left right显示的效果是什么样的？
先上代码把
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
body{
height: 3000px;
}
.div1{
top: 100px;
position: absolute;
background-color: blue;
}
.div2{
bottom: 100px;
position: absolute;
background-color: green;
}
.div3{
left: 100px;
position: absolute;
background-color: yellow;
}
.div4{
right: 100px;
position: absolute;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>以上就是效果图，
１．top的定位参考点是以页面的上方，搭配left/right就是页面的左上角/右上角
２．bottom的定位参考点是浏览器首屏的下方，，搭配left/right就是浏览器首屏的左下角/右下角
什么叫浏览器的首屏？就是第一次打开浏览器时，你所看到浏览器显示的大小。然后呢绝对定位就相对于你所看到的浏览器显示的界面去定位。这么说把如果你把浏览器拉小，那么显示的效果也不一样。
下面放上一张把浏览器压缩后的显示的效果
看到了吗？就是相对于浏览器第一次显示时候的界面。
- 加入有父标签且父亲标签设置了相对定位
这种情况常用的术语叫做子绝父相，就像刚开头说的想要居中显示，就需要给父盒子设置相对定位，子盒子设置绝对定位。下面我们来一个例子，便于理解子绝父相的概念
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.wrap{
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
.child{
position: absolute;
width: 100px;
height: 100px;
background-color: skyblue;
top:50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="child"></div>
</div>
</body>
</html>我们可以看到最终的效果就是居中了！居中了！居中了！
我们来看看究竟是什么语句让其居中？
top:50%; margin-top: -50px; 首先是top的50%,这百分号是什么意思？其实就是父标签的百分比，如top:50%,就是说top父亲高度的百分之50，如此子孩子的顶部已经位置父亲的垂直居中了，但是孩子却没有居中，所以需要再减去孩子自身高度的一般，这样子在竖直上，才是真正意义上的居中。水平居中同理left: 50%; margin-left: -50px;
在来个例子，轮播图，在使用轮播图时，就需要用到绝对定位，直接上例把
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.banner{
width: 300px;
height: 150px;
border: 1px solid black;
position: relative;
margin: 0 auto;
}
.img{
width: 300px;
height: 150px;
background-color: skyblue;
}
.left{
background-color: white;
width: 50px;
height: 30px;
position: absolute;
top: 50%;
margin-top: -15px;
left: 0;
line-height: 30px;
text-align: center;
}
.right{
background-color: white;
width: 50px;
height: 30px;
position: absolute;
top: 50%;
margin-top: -15px;
right: 0;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="banner">
<div class="img"></div>
<span class="left"><</span>
<span class="right">></span>
</div>
</body>
</html>固定定位position:fixed;
可是会使元素脱标，参考的点是浏览器的四个角
定位的已经讲完，接下来会来讲html5，如有表达错的请谅解和提出错的点，望能共同进步。
上一篇： 荐 【python】作业1参考答案
下一篇： Java学习笔记（一）