二、盒子的布局
把HTML中的元素看做是一個矩形的盒子(盛裝內容的的容器),每個容器都是由元素內容、內邊距(padding)、邊框(border)和外邊距(margin)組成。
ps:瀏覽器默認的margin值為8px!
三、兩種盒子模型
w3c的盒子模型: padding和border不被包含在定義的width和height之內。對象的實際寬度等于設置的width值和border、padding之和,即 ( Element width = width border padding ) 此屬性表現(xiàn)為標準模式下的盒模型。
IE的盒子模型: padding和border被包含在定義的width和height之內。對象的實際寬度就等于設置的width值,即使定義有border和padding也不會改變對象的實際寬度,即 ( Element width = width ) 。
ps:一般都使用標準的w3c盒子模型,如果需要使用IE的盒子模型,可以使用box-sizing屬性進行修改。
w3c的盒子模型.test1{box-sizing:content-box;width:200px;padding:10px;border:15px solid #eee;}IE的盒子模型.test1{box-sizing:border-box;width:200px;padding:10px;border:15px solid #eee;}四、總結
W3C盒模型是與IE盒模型的區(qū)別就是對寬高的定義不同。
W3C認為:寬高是內容區(qū)的寬度(只包含節(jié)點顯示的具體內容)
IE認為:寬高是顯示效果的實際效果(包含節(jié)點的全部內容)
相關推薦:《html視頻教程》
更多關于云服務器,域名注冊,虛擬主機的問題,請訪問西部數(shù)碼官網:m.ps-sw.cn