盒子模型有兩種:W3C和IE盒子模型
盒子模型包括margin、border、padding、content
W3C的元素寬度=content的寬度
IE的元素寬度=content+padding+border
我個(gè)人認(rèn)為W3C定義盒子模型與IE定義的盒子模型,IE定義的比較合理,
元素的寬度應(yīng)該包含border(邊框)和padding(填充),這個(gè)和我們現(xiàn)實(shí)生活的盒子是一樣的,
W3C也認(rèn)識(shí)到自己的問(wèn)題了,所以在CSS3中新增了一個(gè)樣式box-sizing,
包含兩個(gè)屬性content-box 和 border-box。
content-box : width=content+padding+border
border-box: width=width(樣式指定的寬度)
1.對(duì)于行級(jí)元素,margin-top和margin-bottom對(duì)于上下元素?zé)o效,margin-left和margin-right有效
2.對(duì)于相鄰的塊級(jí)元素margin-bottom和margin-top 取值方式
1) 都是正數(shù): 取最大值 距離=Math.max(margin-botton,margin-top)
2) 都是負(fù)數(shù): 取最小值 距離=Math.min(margin-botton,margin-top)
3)上面是正數(shù),下面是負(fù)數(shù)或者 上面是負(fù)數(shù),下面是正數(shù): 正負(fù)相加 距離=margin-botton+margin-top