CSS标准盒模型与IE盒模型
原理:
⽹页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒⼦模式都具备这些属性。
这些属性我们可以⽤⽇常⽣活中的常见事物——盒⼦作⼀个⽐喻来理解，所以叫它盒⼦模型。
padding是外边距还是内边距盒⼦模型的特点:
想象⼀个盒⼦，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；
让我们俯视这个盒⼦，它有上下左右四条边，所以每个属性除了内容（content），都包括四个部分：上下左右；这四部分可同时设置，也可分别设置；内边距可以理解为盒⼦⾥装的东西和边框的距离，⽽边框有厚薄和颜⾊之分，内容就是盒⼦中间装的东西，外边距就是边框外⾯⾃动留出的⼀段空⽩。
(以上原理与特点来⾃百度百科)
W3C盒模型(标准盒模型)与IE盒模型的相同点和不同点:
由上图可知，他们的相同点就是都有content、padding、border和margin属性.不同点在于height和width包含的内容不⼀样.
W3C 盒⼦模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分
IE 盒⼦模型的范围也包括 margin、border、padding、content，和标准 W3C 盒⼦模型不同的是：IE 盒⼦模型的 content 部分包含了border 和 padding
⽹页中的盒⼦模型；我们常常要控制盒⼦模型的宽度width:
不同盒⼦模型的计算⽅法:
w3c中的盒⼦模型的宽：包括margin+border+padding+width;
width:margin*2+border*2+padding*2+width;
height:margin*2+border*2+padding*2+height;
iE中的盒⼦模型的width：也包括margin+border+padding+width;
上⾯的两个宽度相加的属性是⼀样的。不过在ie中content的宽度包括padding和border这两个属性；
例如⼀个盒⼦模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;
如果⽤w3c盒⼦模型解释，那么这个盒⼦模型占⽤的
宽度为：20*2+10*2+10*2+200=280px;
⾼度：20*2+10*2+20*2+50=130px;
盒⼦的实际宽度⼤⼩为:10*2+10*2+200=240px;
实际⾼度：10*2+10*2+50=90px;
⽤ie的盒⼦模型解释 ：盒⼦在⽹页中占据的⼤⼩为20*2+200=240px;⾼：20*2+50=90px;
盒⼦的实际⼤⼩为：宽度:200px,⾼度:50px;
我们常常理解的盒⼦模型是w3c这样的盒⼦模型

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。