实战1

Tips：

Q：调整浏览器宽窄时，发现只有header的文字动，背景图案不动是怎么回事？

A：没有设置图片的background-position.

Q:让文字垂直居中有什么办法？

A：

1.然后设置一个上下padding，撑开图片，保持文字居中。

2.绝对定位居中

将背景图的div设置为height：100%，相对定位，文字块绝对定位。很奇怪为什么需要设置height，因为已经设置了background-size了，以为图片会自动撑满。

3.看到其他同学的做法是设置为表格元素，这样可以直接用属性vertical-align：middle设置垂直居中。

4.添加外边距，但是直接对文字块设置上外边距会出现这种效果：

所以这里我们将header设置为BFC，再添加上边距

注意这里边距直接使用像素，会比百分比好。因为所有元素都已经确定了。

版权归INTERNALENVY和饥人谷所有，转载请注明出处。