【CSS基础】CSS常见问题

垂直居中

单行文本垂直居中

父元素高度为auto

一个父元素若是不设置高度的话，默认就是紧包裹着子元素，若是父元素设置的pading-top和padding-bottom相同，这自己就是一个垂直居中效果，可是当子元素并非独占一行，而是inline元素和inline-block元素组合成一行，好比下面这个例子：

inline元素和inline-block元素在同一行显示，因为图片这个inline-block元素自己有高度，就会把整个行撑开，可是文字和图片依然在一行，细看能够发现，图片自己并无和文字最下边对齐，这是因为inline-block默认带有vertical-align属性，其值默认为baseline，也就是图片和文字的baseline对齐，注意vetical-align只对inline-block元素有效，这种状况下，只须要对inline-block元素设置vertical-align:middle便可实现垂直居中。效果以下：

父元素height为固定值

这种状况只须要在父元素上设置line-height属性等于父元素的height属性便可(line-height = height)，这种只适用于单行文本，且父元素高度固定，对于多行文本就无能为力了。

父元素height固定，子元素是块元素

子元素高度固定

这种状况下能够利用absolute定位来实现垂直居中。缺点就是脱离了普通文档流。

.parent {
    position:relative;
}
.child {
    position:absolute;
    top:50%;
    height:200px;
    margin-top:-100px;
}
// 或者下面的实现方法
.child {
    position:absolute;
    top:0;
    bottom:0;
    height:200px;
    margin:auto 0;
}

子元素height不固定

该状况下对子元素是块级元素或非块级元素都可以。

.parent {
    display:table-ceil;
    height:200px;
    vetical-align:middle;
}

该方法因为display:table-ceil属性的兼容性不够好，只能在IE8及更高版本使用。

.parent {
    position:relative;
}
.child {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

该方法因为transform:translateY(-50%)属性的兼容性不够好，只能在IE9及更高版本使用。

flex

.parent {
    display:flex;
    align-items:center;
}

flex弹性布局更加的灵活简单，对页面中其余元素的影响更小，在IE11以及更高版本才能兼容，若是是在移动端开发，尽可能使用该属性实现各类复杂的布局。

常见的布局

两列布局

两栏布局：一栏定宽，一栏自适应，自适应的一栏做为内容主体。

1：使用float + margin属性。

.left {
    width:200px;
    float:left;
}
.right {
    margin-left:200px;
}

也可使用absolute定位来实现。

.container {
    position:relative;
}
.left {
    position:absoulte;
    left:0;
    width:200px;
}
.right {
    position:absolute;
    left:200px;
    right:0;
}

三列布局

三列布局也是常常使用到的一种布局，它的特色是两边两列固定，中间自适应。
1：左右两栏使用float属性，中间栏使用margin属性。

<div class="left">左栏</div>
<div class="right">右栏</div>
<div class="middle">中间栏</div>

.left,.right {
    float:left;
    width:200px;
}
.right {
    float:right;
}
.middle {
    margin:0 200px;
}

该方法必需要将中间栏放在最后，且若是父元素的宽度小于左右两栏宽度时，右侧栏会被挤下去。
2：使用position布局

.container {
    position:relative;
}
.left,.right {
    width:200px;
    left:0;
}
.right {
    left:auto;
    right:0
}
.middle {
    margin:0 200px;
}

该方法的缺点是若是父元素有内外边距的时候，会致使中间栏的位置出现误差。