在使用CSS設計網頁時,我們常常會遇到一種情況:某些元素的內邊距(padding)或邊框(border)并不生效,看起來就像沒有設置一樣。這種情況通常是由于CSS的盒模型(box model)引起的。具體來說,這是因為在標準盒模型中,元素的寬度(width)是不包括內邊距和邊框的,而在怪異盒模型中,元素的寬度會包括內邊距和邊框。
要解決這個問題,一種方法是使用CSS的盒模型屬性box-sizing,并將其值設置為border-box。這樣,元素的寬度就包括了內邊距和邊框。如下所示:
.element { box-sizing: border-box; width: 200px; padding: 20px; border: 1px solid #000; }
然而,如果我們的代碼中已經存在許多元素并且它們的內邊距和邊框都沒有生效,我們不想對每一個元素逐一設置box-sizing屬性。這時,我們可以使用通配符選擇器來批量修改所有元素的box-sizing屬性:
* { box-sizing: border-box; }
這樣就能夠確保所有元素的內邊距和邊框都會被正確地顯示了。
上一篇css內聯塊
下一篇css內的文件是什么