/* 让盒子居中，不受屏幕像素大小限制 前提需要设置宽度 width ;不要简单使用left 移动多少px ;屏幕大小不同 左移位置都不同*/ /* margin:0 auto; 是用于文档流居中，对于脱标的盒子没办法居中 */
１.1 文档流(标准流)
元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行
行内元素独占一行
１.2 浮动
Float:left | right
特点:
不占据原来的位置，会脱标。
可以让块元素在一行上显示。
可以将行内元素转成行内块。（不推荐使用）
１.3 清除浮动
Clear:both;
１.4 额外标签法
在最后一个浮动元素后边添加新标签。
１.5 Overflow:hidden;
在父元素上使用overflow:hidden;
１.6 伪元素清除浮动
2 定位
Position: left | right | top | bottom
2.1 静态定位
Position:static; 标准流。
2.2 绝对定位(看脸型)
Position:absolute;
特点：
◆自身从浏览器出发。
◆绝对定位之后，元素不占位置，会脱标。
◆嵌套的盒子，父元素没有给自身绝对定位，子元素绝对定位，子元素从浏览器出发设置自身位置。
◆嵌套的盒子，父元素绝对定位，子元素绝对定位，子元素从父元素出发设置自身位置。
◆行内元素转成行内块。（不推荐使用）
2.3 相对定位（自恋型）
Position:relative;
◆位置从自身出发。
◆设置相对定位之后，还占据原来的位置。
◆子绝父相，子元素绝对定位，父元素相对定位。
◆嵌套的盒子，父元素相对定位，子元素绝对定位，子元素从父元素出发设置自身位置。
◆不能将行内元素转成行内块。
2.4 固定定位
Position:fixed;
特点:
◆位置从浏览器出发。
◆不占据原来的位置，会脱标
◆可以将行内元素转换为行内块。（不推荐使用）
2.5 定位的盒子居中显示
★:margin:0 auto; 只能让标准流的盒子居中对齐。
★定位的盒子居中：先左右走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)
<style type="text/css">
body{
margin:0;
padding:0;
}
.box{
height:500px;
background:#aaa;
position:relative;
}
.nav{
width:960px;
height:60px;
background:#666;
position:absolute;
bottom:0;
margin:0 auto;
left: 50%;
margin-left:-480px;
/* 让盒子居中，不受屏幕像素大小限制 前提需要设置宽度 width ;不要简单使用left 移动多少px ;屏幕大小不同 左移位置都不同*/
/* margin:0 auto; 是用于文档流居中，对于脱标的盒子没办法居中 */
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>13.html</title>
<style type="text/css">
body,ul,li{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
.banner{
height:472px;
width:1259px;
margin:0 auto;
position:relative;
}
.search{
width:960px;
height:60px;
background:#333;
position:absolute;
bottom:0;
left:50%;
margin-left:-480px;
}
.search ul li{
float:left;
}
.search ul li a{
display:inline-block;
width:160px;
height:60px;
line-height:60px;
text-align:center;
color:#fff;
text-decoration: none;
}
.search ul li a:hover{
background:#fff;
color:#000;
}
.search ul li a.one:hover{
background:#333;
color:#fff;
}
.login{
position:absolute;
left:149px;
bottom:58px;
}
.sj{
position:absolute;
left:220px;
bottom:49px;
z-index:10;
}
</style>
</head>
<body>
<div class="banner">
<div class="pic"><img src="03/sf.png" alt="" /></div>
<div class="search">
<ul>
<li><a href="#" class="one">运单查询</a></li>
<li><a href="#">运费查询</a></li>
<li><a href="#">时效查询</a></li>
<li><a href="#">服务网点查询</a></li>
<li><a href="#">收送范围查询</a></li>
<li><a href="#">客户专区</a></li>
</ul>
</div>
<div class="sj"><img src="03/4.png" alt="" /></div>
<div class="login"><img src="03/3.png" alt="" /></div>
</div>
</body>
</html>
来源：https://www.cnblogs.com/yimian/p/6678115.html