標籤：
對於初學者來說，CSS中的width、height的預設值是很神奇的，因為經常看到如下這樣的代碼：明明只給一個#father標籤（紅色的div）設定了一個width，為啥它在瀏覽器中顯示出來是有一個固定的height的呢。
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>測試寬度</title> <style type="text/css"> .body{ margin: 0; padding: 0; } #father{ width: 500px; background: red; } #father .son{ width: 100px; height: 100px; background: green; } </style></head><body><div id="father"> <div class="son"> </div></div></body></html>
於是就去w3c上搜尋，發現height的預設值都是auto，也就是說上一行代碼中的height是預設值auto。那麼為什麼會編程100px的高度呢。
通過查閱資料得知，如果將height設為auto，那麼該標籤的高度將由它的子標籤的高來決定。也就是說會子標籤會撐開父級標籤。上面代碼就是因為.son的100px的高度撐開了父標籤father的高度。
那麼寬度是否也會被撐開呢？
於是自己繼續做了一次實驗：把father的width注釋，運行後發現father的寬度和瀏覽器等寬。查資料發現對於div標籤來說width預設是100%，就是和父級標籤等寬。所以不設father的寬度，他就預設等於body的寬度了。
【CSS中width、height的預設值】
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
