CSS的常见用法

CSS左右布局

一般来说，如果有2个块级元素，那么应该是上下排开的，现在要将他们放在一行中，那么需要添加float元素，之后再他们的父元素中，添加这一样式，如下

css=“clearfix”

CSS左中右布局

如果有三个块级元素，那么可以给他们依次设置float，第一列和第二列设置为left，第三列设置成right，对于他们的父级元素设置宽度以及水平居中。

水平居中

对于内联元素来说，需要对其父元素设置text-align为center，内联元素就能够水平居中了

而对于块级元素，有2中情况

第一种是定宽的情况。

块级元素是需要一个宽度，然后设置margin属性为0 auto，就可以实现块级元素水平居中；

第二种是不定宽的情况。比方说在一个div中有一个UL或者OL。

1.可以给列表中的子元素设置为display：inline-block ，之后设置vertical-align：top,给其父元素设置text-align：center。

2.使用table布局的方法，为其父元素设置display：table,而子元素设置display为table-cell，vertical-align:middle,text-align:center。

垂直居中

1.使用flex来进行垂直居中，将父元素添加以下几个属性{

  display: flex;

  align-items: center;

  justify-content: center;

}

就能够垂直水平居中。

2.使用伪元素进行设置，将子元素的伪元素添加display：inline，height：100%；vertical-align：middle，当然父元素要有一个高度才可以哦。