第10题：标准盒模型和IE盒模型的区别？怎么设置？

[zxdfe]

标准盒模型(W3C)

• width = content ;
• box-sizing : content-box

IE盒模型

• width = content + padding + border

• Box-sizing: border-box

[z-forever-y]

标准盒模型：width=content
           设置：box-sizing：content-box
IE盒模型：width=content+padding+boder
            设置：box-sizing：boder-box
IE盒模型这样设置，就是为了在设置内边距和边框的时候不会撑大盒子，一般默认的都是设置标准盒模型

[rupoly]

标准盒模型： box-sizing：content-box width=content IE盒模型： box-sizing：border-box width=content+boder+padding

[Sophora77]

当对一个文档进行布局的时候，浏览器渲染引擎会根据标准之一的css基础盒模型把所有元素表示为一个个矩形的盒子 标准盒模型：实际宽/高度 = margin + border + padding + width/heigh IE盒模型：实际宽/高度 = margin + width/heigh 当使用 content-box 时：页面将采用标准模式来解析计算，这是默认模式， 当使用 border-box 时，页面将采用IE模式解析计算 当使用 inherit 时，页面从父元素继承 box-sizing 的值

[xcop32221]

标准盒模型和IE盒模型

• 标准盒模型：width=content box-sizing:content-box
• IE盒模型:width=content+padding+border box-sizing:border-box

[WLNCJL]

1.标准盒子模型：宽度就等于内容的宽度
设置   box-sizing：content-box
2.IE盒子模型：宽度 = content + border + padding
设置   box-sizing：border-box

[stevenhuanghr]

标准盒模型是有content+padding+border+margin； ie盒模型是width+magin 通过box-sizing：border-box可以将标准盒模型变成ie盒模型

[lemon-912]

标准盒模型：
width = content
box-sizing:content-box;
IE盒模型：
width=content+padding+border
boxsizing:border-box;

[BlueSky-Engineer]

两者的区别在于：

1. content的不同，IE盒模型的content包括border，padding
2. IE模型的content的宽度与高度是content = content+padding+border得到最终content的宽度
3. IE模型content的宽度与高度是content = content 得到最终content的宽度，不包过设置元素的border+padding

怎么设置？

1. box-sizing: border-box; //设置为IE模型
2. box-sizing: contetn-box;//设置为标准模型

[BlueSky-Engineer]

两者的区别在于：

1. content的不同，IE盒模型的content包括border，padding
2. IE模型的content的宽度与高度是content = content+padding+border得到最终content的宽度
3. IE模型content的宽度与高度是content = content 得到最终content的宽度，不包过设置元素的border+padding

怎么设置？

1. box-sizing: border-box; //设置为IE模型
2. box-sizing: contetn-box;//设置为标准模型