CSS布局与居中

这篇文章会介绍本人已学会的CSS中常用的左右布局、左中右布局、水平居中方法、垂直居中方法和一些CSS小技巧，如有错误，欢迎指出~

1.左右布局

通过float:left;来实现
但要记得在布局元素的父元素里声明clearfix类，clearfix类的代码如下：

.clearfix::after {
    content: '';
    display:block;
    clear:both;
}

另外，可以通过设置元素width的比例来让调节布局的比例。

2.左中右布局

通过float:left;之后，调节三个元素之间的margin，并把第一个元素的margin-left设置成0即可。

/*css*/
.Border {
  width:200px;
  height:200px;
  border:1px solid red;
}
ol {
  list-style:none;
  margin:0;
  padding:0;
}
.clear::after {
  content:'';
  display:block;
  clear:both;
}
ol li {
  float:left;
  margin-left:30px;
}
ol li:nth-child(1) {
  margin-left:0;
}
<!--HTML-->
<div class="Border clearfix">
    <ol>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ol>
</div>

这样就能实现左中右布局。

3.水平居中

（1）若是内联元素, 给其父元素设置text-align:center,即可实现行内元素水平居中。
（2）若是块级元素, 该元素设置 margin:0 auto;即可。

4.垂直居中

（1）若元素为单行文本，直接让其line-height等于父元素高度即可。
（2）若元素为块级元素，那么可以考虑通过display:inline-block;，并在父元素处使用伪元素after，由于两个内联元素是基于基线对齐，因此通过vertical-align:middle;来让两个元素居中对齐，再把伪元素设置成height:100%;，即可实现垂直居中的效果。具体代码如下：

/*css*/
.parent {
  width:200px;
  height:200px;
  border:1px solid red;
}
.parent::after, .son{
    display:inline-block;
    vertical-align:middle;
}
.parent::after{
    content:'';
    height:100%;
}
<!--HTML-->
<div class="parent">
 <div class="son">
   abc
 </div>
</div>

（3）如果元素为固定高度的块级元素，则可以通过相对定位和绝对定位来实现垂直居中，设置父元素相对定位position:relative, 子元素如下css样式:

.parent {
  width:200px;
  height:200px;
  border:1px solid red;
  position:relative;
}
.son{
    position:absolute;
    top:50%;
    height:20px;
    margin-top:-10px; /*固定高度的一半*/
}

或者

.parent {
  width:200px;
  height:200px;
  border:1px solid red;
  position:relative;
}
.son{
    position:absolute;
    height:20px;
    top:0;
    bottom:0;
    margin:auto 0;
}

5.其他小技巧

（1）clear:both;可以消除因为建议行高不同而导致浮动后无法对齐的问题。
（2）伪元素在CSS里要写content:'';否则不会出现，而且伪元素的内容是无法复制的。
（3）伪类不是实实在在的东西，是某个元素的状态，可能特指某些元素，要区分清楚伪类和伪元素。
（4）绝对定位后，元素类型会自动变为block。
（5）可以通过设置transition属性可以通过控制变化时间来控制元素变化的过程。
（6）使用了display:inline-block;之后，要习惯加vertical-align:top;来消除基线对齐。
（7）设置触摸标签时的手势：cursor:pointer;。
（8）div里嵌套了img后，img底部会出现白边，因为img默认按基线对齐，因此要输入vertical-align:top;来消除白边。
（9）属性box-sizing:border-box;可以把边框和padding也算进宽度中。

CSS布局与居中