#CSS3-盒子模型
盒子模型顾名思义就是,在网页中装载元素的盒子,有宽,有高,有边距。类似于套娃,可以一个盒子套着另外一个盒子。
-
标准盒子模型(box-sizing:content-box)
在开始之前希望你可以记住,标准盒子模型是个老实人,你给他多少空间,他就绝不会想着padding,margin。
div{ background-color:salmon; width:70px; height:50px; padding:50px 50px; margin:50px 50px; border:10px solid red; }
-
标准盒子模型下:我们所设置的宽高是真实内容的宽高,与border,内外边距无关。
-
width(height) = content(图中的淡蓝色部分,就是我们设置的70px)
-
-
IE(怪异)盒子模型(box-sizing:border-box)
相反IE盒子模型就像是一个贪心的坏小子,老是想着占别人便宜。
div{ background-color:salmon; width:180px; height:50px; padding:50px 50px; margin:50px 50px; border:10px solid red; box-sizing: border-box; }
-
IE盒子模型下:我们所设置的宽高与border,padding有关。
-
width(height) = border + padding + content
-
180px = 10px * 2 + 50px * 2 + 60px(图中的淡蓝色部分,就是我们计算出的的60px)
px = 10px * 2 + 50px * 2 + 60px(图中的淡蓝色部分,就是我们计算出的的60px)