CSS布局

1. 左右布局
   方法一：浮动float

  <div class="left-right">
    <div class="left">左</div>
    <div class="right">右</div>
  </div>

.left-right {
  position: relative;
  max-width: 1000px;
  height: 200px;
  border: 3px solid yellow;
}
.left {
  float: left;
  background: red;
  width: 30%;
  height: 100%;
  text-align: center;
  line-height: 200px;
}
.right {
  float: right;
  background: blue;
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 200px;
}

效果图：

左右布局

方法二：绝对定位absolute

.left-right {
  position: relative;
  max-width: 1000px;
  height: 200px;
  border: 3px solid yellow;
}
.left {
  position: absolute;
  left: 0;
  top: 0;
  background: red;
  width: 30%;
  height: 100%;
  text-align: center;
  line-height: 200px;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  background: blue;
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 200px;
}

效果同上

2. 左中右布局
   方法一：浮动float

  <div class="left-center-right">
    <div class="left">左</div>
    <div class="center">中</div>
    <div class="right">右</div>
  </div>

.left-center-right {
  max-width: 1000px;
  height: 200px;
  border: 3px solid yellow;
}
.left {
  float: left;
  background: red;
  width: 30%;
  height: 100%;
  text-align: center;
  line-height: 200px;
}
.center {
  float: left;
  background: green;
  width: 20%;
  height: 100%;
  text-align: center;
  line-height: 200px;
}
.right {
  float: right;
  background: blue;
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 200px;
}

效果图：

左中右布局

方法二：绝对定位absolute

.left-center-right {
  position: relative;
  max-width: 1000px;
  height: 200px;
  border: 3px solid yellow;
}
.left {
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  width: 30%;
  height: 100%;
  text-align: center;
  line-height: 200px;
}
.center {
  position: absolute;
  top: 0;
  left: 30%;
  background: green;
  width: 20%;
  height: 100%;
  text-align: center;
  line-height: 200px;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  background: blue;
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 200px;
}

效果同上

3. 水平居中

• 块级元素：在有宽度的前提下，子元素设置：margin: 0 auto;
• 内联元素：父元素上设置text-align: center;

4. 垂直居中
   父元素设置：

position: relative;

要居中的元素设置：

position: absolute;
margin: auto;
top: 0;
left: 0;
bottom:0;
right:0;