CSS布局

两栏布局？

left浮动，设置宽度，右边用margin-left留给left位置其自适应

  <div class="left"></div>
  <div class="right"></div>

    body{
      margin:0; 
      padding:0;
    }
    .left{
      float:left;
      width:200px;
      height:300px; 
      background:blue;
    }
    .right{ 
      margin-left:200px;           
      height:300px; 
      background:red;
  }

三栏布局？

左div左浮动，右div右浮动，中间自适应margin出左右的占位。
简洁高效

<div class="left">left</div>

<div class="right">right</div>

<div class="main">main</div>

body{   
       margin:0;
       padding:0;
}
.left{
       float:left;
       width:200px;
       height:400px;    
       background:red;
}
.right{ 
       float:right;
       width:300px; 
       height:400px;
       background:blue;
}
.main{  
       margin:0 300px 0 200px;  
       height:400px;
       background:yellow;
}

水平居中？

一、行内元素：
text-align:center;

二、确定了宽度的块级元素：

<1> margin和width实现水平居中：
margin-left:auto; margin-right:auto;

<2> 绝对定位和margin-left:-(宽度值/2)实现水平居中

固定宽度块级元素水平居中，通过使用绝对定位，以及设置元素margin-left为其宽度的一般

.content{
      width:200px;
      position:absolute;
      left:50%;
      margin-left:50%;//该元素宽度的一半 就是100px。
      background-color:red;
}

垂直居中？

image.png

运行结果如下：

image.png