前端筆記-20171228

1.

margin參數：

margin: top right bottom left

經常使用的居中方法：margin { 0 ，auto ；}，即上下0，左右自動調整。

 

2.html的background繼承自body

爲何單設置body{ background:red } 能夠覆蓋整個頁面，設置了margin：50px也沒有透明效果。由於html的background-color繼承自body。

如圖：

 

3.width和height的默認值爲auto，不是直接繼承。

 

4.width和height的計算方式

body{width：100%；height：100%}

width=100%起做用，但height無反應，是由於html的width是由瀏覽器打開寬度決定的。因此body的width能夠直接算出值。

而height的計算方式：瀏覽器根本不計算html的高度，當body的中堆砌的東西高度超過瀏覽器高度，才用滾動條出來。

若是想讓效果出現，只需設置html{ height=100%；}

 

5.繼承關係：body<html<瀏覽器窗口大小

 

爲何只有body{ height：100%}的時候，body全高效果出不來？由於html的高度一開始根本不計算，有元素的時候才一直堆砌。

當設置html{height：100%}的時候，纔會達到效果。

而

 

6. body{width：100%}有滾動條出現？

 

 7.爲何會出現滾動條？-1body默認margin不爲0，-2外邊距合併。

 

8.爲何設置了div的margin=0。依然有邊？

 

與上同一個緣由。

 

總結：

html默認寬：瀏覽器窗口寬。

高：無。

body默認寬：如上上圖，注意有margin，看具體瀏覽器。

高：無。

div默認寬：body寬。

高：無。

其次，注意外邊距合併問題。