任務14-實戰1 筆記

weixin_34321977發表於2016-08-06
筆記

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、關於居中：

![](http://upload-images.jianshu.io/upload_images/2399926-3df768c60cb139c4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
上圖的背景圖片高度為 100%，佔滿螢幕，隨著瀏覽器的不同，高度也會隨之調整，這種情況就要使用絕對垂直居中

![](http://upload-images.jianshu.io/upload_images/2399926-242838f9956a50e6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
上圖對於高度沒什麼要求，但是內部文字有可能會改動，所以對文字設定邊距，撐開父元素。

相關文章