HTML 定位二

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