走进CSS布局

div+css布局中常用的布局方式有两种：浮动和定位。

浮动

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

常用值：

• left：使元素浮动在其所在容器的左侧。
• right：使元素浮动在其所在容器的右侧。
• none：使元素不惊醒浮动。

浮动可以让多个div在一行显示，“float”只有左右浮动和none。让元素默认转换为“内联块级元素”。

清除浮动的方式：

1. 额外标签法：在浮动的左后一个元素后，新加一个标签，然后清除浮动。选择器{clear: both;}
2. 给浮动的元素的父元素添加css样式。overflow: hidden;
3. 伪元素清除浮动。

选择器::after{
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}

定位

CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom和 left属性则决定了该元素的最终位置。

常用值：

• static：指定元素使用正常的布局行为。
• relative：元素位置暂时不变，添加边偏移时才移动（相对“自己”的旧位置）。
• absolute：完全脱离文档流，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。

静态定位：用处是使元素取消定位。
相对定位：1. 边偏移时，元素位置移动，但是原位置还在。2. 边偏移时，元素总是以“自己”的左上角为主。
绝对定位：1. 不占位置，完全脱离文档流。2. 以当前屏幕的左上角为准。3. 当父级元素有定位时，以就近的父级元素的左上角为主。

左右布局

• 通过浮动实现
  float+margin:将红色盒子浮动，脱离文档流，此时黄色盒子有一部分在红色盒子下方覆盖，通过margin-left实现黄色盒子将被红色盒子覆盖部分脱离出来（如下图）。
  注：文字没有覆盖是由于文字的特殊性。
  

html代码：

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

css代码：

.left{
  width: 30%;
  height: 50px;
  background-color: red;
  float: left;
}
.right{
  margin-left: 32%;
  height: 50px;
  background-color: yellow;
}

效果图：

• 通过定位实现
  通过给父级元素相对定位，再给子元素相对定位的方法实现左右布局。
  html代码：

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

css代码：

.big{
  position: relative;
}
.left{
  width: 30%;
  height: 50px;
  background-color: red;
  position: absolute;
}
.right{
  width: 69%;
  height: 50px;
  background-color: yellow;
  position: absolute;
  left: 31%;
}

左中右布局

• 通过浮动实现
  同左右布局原理；

html代码：

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

css代码：

.left{
  width: 20%;
  height: 50px;
  background-color: red;
  float: left;
}
.right{
  width: 20%;
  height: 50px;
  background-color: yellow;
  float: right;
}
.middle{
  height: 50px;
  background-color: pink;
  margin-left: 21%;
  margin-right: 21%;
}

效果图：

• 通过定位实现

html代码：

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

css代码：

.big{
  position: relative;
}
.left{
  width: 20%;
  height: 50px;
  background-color: red;
  position: absolute;
  left: 0;
}
.right{
  width: 20%;
  height: 50px;
  background-color: yellow;
  position: absolute;
  right: 0;
}
.middle{
  width: 58%;
  height: 50px;
  background-color: pink;
  position: absolute;
  left: 21%;
}

水平居中

• 使内联元素水平居中的方法是text-align: center;

 <!-- html代码: -->
  <p>
    <span>hello</span>
  </p>

/*css代码：*/
p{
  text-align: center;
  border: 1px solid red;
}
span{
  border: 1px solid #000;
}

可以看到黑色边框的<span>在红色边框的<p>内居中。

• 使块级元素水平居中的方法是margin: 0 auto;或者通过定位的方式。
  margin方法：

 <!-- html代码: -->
  <div class="box">
    <div class="box-inner"></div>
  </div>

/* css代码：*/
.box{
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}
.box-inner{
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  margin: 0 auto;
}

定位的方法：
分两步：

1. 首先left: 50%;，父级元素的一半。
2. 再偏移自己宽度的负的一半。

 <!-- html代码: -->
  <div class="box">
    <div class="box-inner"></div>
  </div>

/* css代码：*/
.box{
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  position: relative;
}
.box-inner{
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  position: absolute;
  left: 50%;
  margin-left: -50px;
}

效果如上margin方法。

垂直居中

• 通过定位的方法垂直居中（方法同水平居中），使用top和margin-top。

/* css代码：*/
.box{
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  position: relative;
}
.box-inner{
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  top: 50%;
  margin-top: -50px;
}

• 通过CSS3的transform来实现

/* css代码：*/
.box{
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  position: relative;
}
.box-inner{
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50px,-50px);
}

效果同上。