css布局

css中有三种基本的定位机制，普通流，浮动和绝对定位。

1. display属性

   每个元素都有一个默认的display值，这与元素的类型有关。大多数元素的默认值是inline和block。即块级元素和行内元素。

   • block

     块级元素会新开始一行并尽可能撑满容器，它会占据一行。常见块级元素如 p 、form. ….

   • inline

     行内元素会在一条直线上排列，同一行排列。常见如a、span…

     关于行内元素和块级元素，会专门有一篇总结发出，敬请期待。

2. 绝对定位和相对定位

   相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

   需要注意的是，这里的已定位，不包含普通流。

3. 块级元素 - margin:auto

   设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

   #main {
     max-width: 600px;
     margin: 0 auto; 
   }
   

   max-width可以适应屏幕过小时的滚动条问题

4. box-sizing

   css盒子模型里，元素的边框和内边距是会撑开元素的。以前，要通过计算来处理元素撑开的问题，这种方式很不友好，后来css添加了一个新的属性：box-sizing。它有三个值，content-box，border-box，inherit。

   顾名思义，content-box，传统的盒模型方式，元素的宽度和高度设置即对内容的设置，内边距和边框宽度会撑大元素整体大小。border-box,为元素设定的宽度和高度决定了元素的边框盒。即边框和内边距设置都是在已设置宽度高度的元素内部进行，不会撑大元素整体大小。

   这种方式便于元素的大小控制，可以统一批量处理（IE8+）：

   * {
     -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
             box-sizing: border-box;
   }
   

5. 浮动

   现在我们的html结构如下：

    #main {
       width: 100%;
       border: 1px solid royalblue;
     }
   
   <div id="main">
        <p>sdasdassa</p>
        <img id="img1" src="img/qianxun.jpg">
   </div>
   

   因为我们没有作任何布局处理，它的默认效果是这样的：
   

   现在我们加上一条float：right属性，让图片浮动起来：
   
   发现图片超出了父级div框。这是由于 浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

   对于这种情况，我们可以通过给父级元素设置overflow:auto属性处理：

   #main {
       width: 100%;
       border: 1px solid royalblue;
       overflow: auto;
   }
   

   效果如下：

   
   这样会带来一个问题，当我们内部元素的高度高于外部容器时，会出现滚动条：

   
   即便我们计算控制好了元素高度，但是若果浏览器窗口收缩，元素区域所占高度这些问题是无法避免的，清除浮动，还可以用css的clear属性。可以通过在子元素末尾添加一个空元素，通过其达到清除浮动的目的。这样不太优雅的一点是添加了冗余代码，对此，我们可以用伪类的方式定义。

      .clearfloat:after{
          display:block;
          clear:both;
          content:"";
          visibility:hidden;
          height:0
      }
      <div id="main" class='clearfloat'>
   

   这样统一定义后，只需要在用到的场景添加.clearfloat类即可：

   

6. inline-block

   相较于float，我们还可以用到display属性的inline-block值。inline-block，顾名思义，行内块元素。详情请见另一篇文章。

7. 媒体查询

   响应式布局设计是一种让网站针对不同浏览器设备响应不同显示效果的策略。这样可以让网站在任何情况下都显示得很棒。

   看下面一则实例，我们在左侧加一列菜单，百分比设置其宽度为30%，右边图片宽度为50%。

   
   我们期望当窗口伸缩时，各元素块的长度依旧以百分比形式保存一个较美观的状态。可事实上，当我们把窗口收缩到很小时，左侧的区域会被压缩到很小，其内部的布局就会乱掉，而通过为其赋min-width属性的话，又会影响水平行其他元素布局，其它元素该怎么来怎么来，并不买其min-width的账。

   
   媒体查询正是可以帮助我们解决这种问题，通过监听窗口大小变化，对应作不同的css处理，让我们的布局更加美观：

   @media screen and (min-width: 600px) {
       nav {
           width: 30%;
           float: left;
       }
       #img1 {
           width: 50%;
           float: right;
       }
   }
   
   @media screen and (max-width: 599px) {
       nav li{
           display: inline;
       }
       #img1 {
           width: 100%;
           float: right;
       }
   }
   

   这样，当窗口伸缩到很小时，效果如下：