/* 让盒子居中，不受屏幕像素大小限制 前提需要设置宽度 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>