任务14-实战1 笔记

1、使用layout为总体页面设置宽度以及居中效果。

  width:100%;
  margin: 0 auto;
}```
***
2、对#header使用 height: 100% 使首页全屏，但必须在前面添加
```html,body {
   height:100%;
} ```
因为一个对象是否能用百分比展示，取决于对象的父对象，而body(body的父对象是html)默认是没有设置高度的，这便是浏览器解析规则引发的高度自适应问题。而代码中除了给body应用之外，还给[HTML]对象也应用相同的样式设计，这样做的好处是使[IE]与firefox浏览器都能够实现高度自适应。
***
3、设置了背景图片 height：100%之后，会出现只截取了部分图片占满全屏的情况，此时使用： background-size: 100% 来使图片全部被截取到。
***
4、 p 是块级元素，使用margin: 0 auto;居中，但是<p>标签中的文字是行内元素，使用text-align：center;来居中。
***
5、关于居中：

![](https://img.haomeiwen.com/i2399926/3df768c60cb139c4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
上图的背景图片高度为 100%，占满屏幕，随着浏览器的不同，高度也会随之调整，这种情况就要使用绝对垂直居中

![](https://img.haomeiwen.com/i2399926/242838f9956a50e6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
上图对于高度没什么要求，但是内部文字有可能会改动，所以对文字设置边距，撑开父元素。