深入解析CSS(第四天)

今天将讲解我们在使用布局时,常常会遇到的问题及其解决方案

等高列

不出意外,我们常常会遇到一个问题,同一行的内容,不同列出现的不等高效果,也就是说二边高度不对齐,像一个我们所谓的瀑布流一样,为了解决这个问题，诞生了很多有创意的解决方案。随着CSS的演进，出现了伪元素、负外边距等方案。如果你还在用这些复杂的方案，那么是时候改变了。现代浏览器支持了CSS表格，可以轻松实现等高列，比如IE8+支持display: table,IE10+支持弹性盒子或者Flexbox，都默认支持等高列.

接下来我们可以通过实例来演示等高列

实例

正常情况下,我们会出现下面这种情况,我们可以看到当左边不断的输入内容,右边的高度一直不变,这很显然在某个时候并不符合我们想要的,我们可能更想要的是二边一样高,并不会出现一边高现象,那要怎么实现?

CSS表格布局

首先，用CSS表格布局替代浮动布局。给容器设置display: table，给每一列设置display:table-cell。

我们可以看到margin和padding都失效了,这是因为table-cell默认不会让margin和padding生效,我们可以通过border-spacing属性来定义单元格的间距,该属性接受两个长度值：水平间距和垂直间距。

我们可以看到其有一个特殊的副作用：这个值也会作用于表格的外边缘。这样两列就无法跟头部左右对齐了,这里我们可以使用负外边距，但是这需要给整个表格包裹一层新的容器。

正的外边距会将容器的边缘往里推，而负的外边距则会将边缘往外拉。结合border-spacing，两列靠近外侧的边缘跟（包裹元素所在的容器盒子）的边缘对齐了.

Flex布局

给容器设置display: flex，它就变成了一个弹性容器（flex container），子元素默认等高。你可以给子元素设置宽度和外边距，尽管加起来可能超过100%, Flexbox也能妥善处理。以上代码清单渲染出来的样式跟表格布局一样，而且不需要额外包裹元素，CSS也更简单。

垂直居中内容

CSS另一个让人头疼的问题就是垂直居中。过去有好几种方式实现垂直居中，但是每一种方式都有一定的局限性。在CSS中，回答一个问题的答案通常是“这得看情况”，垂直居中就是如此。有时我们会使用line-height来实现文本垂直居中,也可以使用padding进行垂直居中,还可以使用display:table;display: table-cell和vertical-align: middle,甚至我们可以使用**display:flex;justify-content: center;align-items: center;**垂直居中