CSS及HTML 常見誤區和注意事項(一)

為什么要設置HTML和body的高度

開始思考這個問題的起因：

有一次寫練習，當我想設置一個div元素的垂直居中布局時，設置為以下CSS代碼：

position:absolute;

left:50%;

top:50%;

margin-top:此處為元素高度的一半，是個負值;

margin-letf：此處為元素寬度的一半，是個負值；

并且這個div元素的父元素為body，當我設置body元素為：

height:100%;

這個時候問題出現了，div塊并沒有如期的出現垂直居中的效果，我一開始以為是垂直居中的問題，后繼改了好幾種方案，但是仍然不起作用。

當我打開firefox的查看器時，發現body元素的height只有另一個div元素的height那么大，所以并不是垂直居中出了問題，而是我的body元素高度就沒有達到瀏覽器窗口高度的100%，所以垂直居中并沒有達到理想中的效果。

解決方案

所以只要解決body的高度問題就行了。

查了下發現有以下解決途徑：

在怪異模式下，也就是網頁頭部不寫DOCTYPE的時候，body可以作為html元素的根元素，設置它的高度為百分之百的時候(不考慮外邊距)，可以使的頁面的高度和瀏覽器客戶區相同。在標準模式下，也就是網頁頭部寫DOCTYPE的時候，body不是html頁面的根元素，html才是根元素，如果僅僅設置body的100%，不設置html元素的高度為100%，那么body的高度不會生效，之所以不生效，是因為如果要以百分比設置元素的尺寸，必要以父元素的尺寸作為參考，如果父元素沒有設置尺寸，自然不會生效。

在標準模式下，由于沒有設置html的高度，所以body的高度100%就沒有參考高度，于是也就導致div的百分比高度無效，如果將css代碼中的第一行設置為:

div的100%是從其上一級div的寬高繼承來的，有一點很關鍵，就是要設置div100%顯示，必須設置其上一級div的寬度或高度，否則無效。

前面總得有個容器說明他的高度是多少。這樣的話div才能按比例100%繼承上一級的高度可惜的是瀏覽器一般默認解釋為內容的高度，而不是100%。

解決方法：只要為html和body設置高度為100%就可以了，html,body{height:100%;}，這樣之后div會按比例來繼承上一級的高度了.僅僅設置的DIV元素的height屬性貌似沒有什么效果。

另外，html{height:100%}的高度是相對瀏覽器高度來說的

參考鏈接：

https://zhidao.baidu.com/question/748914187067687252.html

總結

以上是生活随笔為你收集整理的HTML文件撰写的注意事项有哪些,CSS及HTML 常见误区和注意事项（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。