2019-05-09 CSS布局相关

一，两列布局

1，自适应的两列布局：

      两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就不需要再设置外边距了。当元素使用了浮动之后，会对周围的元素造成影响，那么就需要清除浮动，通常使用两种方法。可以给受到影响的元素设置 clear:both，即清除元素两侧的浮动，也可以设置具体清除哪一侧的浮动：clear:left 或 clear:right，但必须清楚的知道到底是哪一侧需要清除浮动的影响。也可以给浮动的父容器设置宽度，或者为 100%，同时设置 overflow:hidden，溢出隐藏也可以达到清除浮动的效果。同理，两列宽度自适应，只需要将宽度按照百分比来设置，这样当浏览器窗口调整时，内容会根据窗口的大小，按照百分比来自动调节内容的大小。

2、固定宽高的两列布局：

      要实现固定宽度的两列布局，只需要把左右两列包裹起来，也就是给他们增加一个父容器，然后固定父容器的宽度，父容器的宽度固定了，那么这两列就可以设置具体的像素宽度了，这样就实现了固定宽度的两列布局。

二，三列布局

1、宽度自适应三列布局

　　三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。

　　同样的道理，更多列的布局，其实和两列、三列的布局模式是一样的。

2、左右两列固定宽度，中间内容宽度自适应

　　要想实现左右两列固定宽度，中间宽度自适应的布局，那么使用浮动就做不到了，使用浮动之后页面就乱了，必须使用绝对定位来将三列固定在一行。

三，水平居中

1、行内元素设置text-align: center

2、块级元素设置固定宽度，margin-left和margin-right设置为auto

3、元素设置固定宽度，margin-left：设为元素宽度的一半，并设置position：absolute；left：50%；

4、固定宽高，父元素{display:flex;flex-direction:column;}，子元素{align-self:center;}

四、垂直居中

1、display：inline-block；text-align: center; vertical-align:middle

2、元素设置固定高度，margin-top：设为元素高度的一半，并设置position：absolute；top：50%；

3、为父元素添加伪元素::before{content:'';display:inline-block;vertical-align:middle;height:100%}，子元素{width:50%;height:50%;display:inline-block;vertical-align:middle;}

4、固定宽高，父元素{display:flex;flex-direction:row;}，子元素{align-self:center;}