css布局笔记（一）

布局方式

• 一列布局
  通常固定宽高，用margin：0 auto；居中显示
• 两列布局
  说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。设置左左浮动，或设置左右浮动（这是需要确定父级元素的宽度）。如何父级元素没有设置高度，则需要设置overflow:hidden来清除浮动产生的影响 。对于自己相邻元素清除浮动产生的影响用：clear：both;。
• 三列布局
  两列定宽中间自适应：首先设置父级元素的宽度，可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动，设置margin，调整间距。同样注意清除浮动的影响！或者为父级元素设置relative属性，再为子元素设置absolute属性，再分别定位，调间距。
• 混合布局
  在一列布局的基础上，保留top和foot部分，将中间的main部分改造成两列或三列布局，小的模块可以再逐级同理划分。

对齐方式

• 水平居中

  • 行内元素的水平居中
    如果被设置元素为文本、图片等行内元素时，在父元素中设置text-align:center实现行内水平居中，将子元素的display设置为inline-block，是子元素变成行内元素
  • 块状元素的水平居中（定宽）
    当被设置为定宽块级元素时，设置左右margin值为auto来实现居中。
  • 块级元素的水平居中（不定宽）
    可以直接给不定宽的块级元素设置text-align：center来实现，也可以给父元素设置text-align：center来实现居中效果。
    当不定宽块级元素的宽度不要占一行时，可以设置display为inlin或inline-block来实现。

• 垂直居中
  父元素是盒子容器且高度已设定

  • 子元素是行内元素，高度由其内容撑开
    设定父元素的line-height为其高度来设置垂直居中
  • 子元素是块级元素但是子元素高度没有设定
    无法用margin，padding来设置，通过给父元素设置display：table-cell；verticle-align：middle来解决。
  • 子元素是块级元素且高度已设定
    计算子元素的margin-top或margin-bottom，计算方法为（父元素高度-子元素高度）/2。

• 水平垂直居中

  • 水平对齐+行高
    text-align+line-height实现单行文本水平垂直居中
  • 水平+垂直对齐
    • text-align+verticle-align
      在父元素设置text-align和verticle-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素。
    • 若子元素是图像，可不使用table-cell，而是其用行高代替高度，且字体大小设置为0。子元素本设置为verticle-align：middle。

      <style>
        .parent{
         text-align: center;
        line-height: 100px;
        font-size: 0;
        }
        .child{
        vertical-align: middle;
        }
      </style>
      
      <div class="parent" style="background-color: gray; width:200px; ">
        <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
      </div>  
      

• 相对+绝对定位
  使用absolute，利用绝对定位元素的盒模型特性，在偏移值为确定值的基础上，设置margin：auto

  <style>
  .parent{
    position: relative;
   }
  .child{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    width: 80px;
    margin: auto;
   }
   </style>
   
   <div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
   <div class="child" style="background-color: lightblue;">测试文字</div>
   </div>
  

  参考：http://www.cnblogs.com/chaixiaozhi/p/8486647.html