初识CSS布局

本文将简单学习几种基本的CSS布局方式：左右布局，左中右布局，水平居中，垂直居中。

左右布局

本文只介绍两种最基础的左右布局方式：浮动布局和绝对定位布局。

1. float + clearfix

在这里，我们使用的是给需要左右布局的元素添加浮动属性，同时为了消除浮动元素的bug，给浮动元素的爸爸添加 clearfix 类，class="clearfix"。

HTML

  

    
 
      left
    
    

      right
    
  

CSS

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.parent .left,
.parent .right {
  float: left;
}

2. absolute postion

同时我们还可以使用绝对定位来实现左右布局，给需要左右布局的元素添加 position：absolute，父元素添加 position： relative ， position：absolute 可以使子元素相对于祖先中的第一个 postion: relative 定位，然后我们可以通过 left 来调整布局元素的位置

HTML

  

    
 
      left
    
    

      right
    
  

CSS

.parent {
  position: relative;
}
.parent .left {
  position: absolute;
}
.parent .right {
  position: absolute;
  left:50%;
}

左中右布局

针对左中右布局，我们可以直接把左右布局的方式应用到这来，只需要布局的元素从两个拓展到多个。我们可以根据不同的需求使用浮动(float)或者绝对定位(absolute position)来实现左中右布局，实际情况中，我们需要结合需要选择适合的布局方式，在将来我们也会接触更多的布局方式 （flex布局，grid布局等）来应对不同的需求。
下面我们将使用浮动和绝对定位来实现一个简单的左中右布局。
左右栏元素各占100像素，中间自适应

1. 浮动布局

HTML

  

    
 
      left
    
    

      right
    
    

      center
    
  

在这里 中间元素必须放在最后。

CSS

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.parent .left {
  background: red;
  float: left;
  width: 100px;
}
.parent .right {
  background: blue;
  float: right;
  width:100px;
}
.parent .center {
  margin: 0 100px;
  background: gray;
}

2. 绝对定位布局

HTML

  

    
 
      left
    
    

      center
    
    

      right
    
  

CSS

* {
  margin:0;
  padding: 0;
}
.parent {
  position： relative;
}

.parent .left {
  background: red;
  width:100px;
  position: absolute;
  top: 0;
  left: 0;
}

.parent .right {
  background: blue;
  width:100px;
  position: absolute;
  top: 0;
  right: 0;
}

.parent .center {
  background: gray;
  margin-left: 100px;
  margin-right: 100px;
}

区别

1. 我们发现，当界面宽度小于200像素时，浮动布局右边的元素会被挤到下一行，然而绝对定位布局，左右元素仍然在在一行里面但是会重合在一起。
2. 同时，我们注意到，浮动布局里中间的内容是需要在最后才能加载的，与此相对，绝对定位布局由于左右元素都脱离了文档流，所以左中右三个布局元素可以任意更改顺序。但是也正是由于左右元素脱离了文档流，这会导致一个问题，如果出现了左右元素的高度大于中间元素的时候，那么他们的父亲的高度就小于了左右元素的高度，这是需要注意的。

水平居中

1. text-align: center 和 display: inline-block

在这我们介绍一种最基础的水平居中的布局方式，使目标元素变为display: inline-block，然后再通过给它的父亲设置 text-align: center来设置水平居中。

HTML

  

    
 
      content
    
  

CSS

.parent {
  text-align: center;
}
.child {
  display: inline-block;
  vertical-align: top;
}

注意这种方式会导致目标元素内的文字也被设置为居中，有时我们不需要元素内文字也居中时，需要在目标元素添加需要的text-align属性。
注意添加 display: inline-block 后，有一个bug，元素下面会多出一丝空隙，所以我们必须添加 vertical-align: top; 来取消这个空隙。

2. margin

同时我们还可以通过对块级元素设置 margin-left: auto 和 margin-right: auto 。但是相比较于第一种方式，这种方式我们建议要对块级元素要设置 max-width。

3. padding

我们还可以通过由内而外给目标元素添加相同的左右 padding 来实现水平居中。

垂直居中

1. 父亲元素 padding

这里我们介绍一种十分简单的垂直居中方式，即通过给目标元素的父亲设置相等的上下padding，注意这个时候，我们推荐不要给父亲元素设置高度，要让他自动适应子元素的高度，除非我们能够计算出准确的父元素高度让其垂直居中。

HTML

  

    
 
      content
    
  

CSS

.child {
  background: red;
}
.parent {
  padding: 100px 0;
  background: gray;
}

2. line-height，单行文本垂直居中

我们设置 line-height 与 height一致时，则文本会自动垂直居中，然而我们一般避免设置height，容易导致潜在bug，也有可能出现实际不是设置的数值的情况。

HTML

  

    
 
      content
    
  

CSS

.child {
  line-height: 40px;
  height: 40px;
  border: 1px solid red;
}

所以针对这种情况，我们往往推荐选择由内而外添加 padding, 来使其居中来避免添加height。

CSS

.child {
  line-height: 22px;
  display: inline-block;
  padding: 10px 0;
  border: 1px solid red;
}

完