首页 > 试题广场 > 介绍一下CSS的盒子模型?
[问答题]
介绍一下CSS的盒子模型?
盒模型的组成包括:content, padding, border, margin组成。
有两种盒模型:标准盒模型和IE盒模型。两种盒模型的主要区别是:标准盒模型的宽高是值内容宽高(content),而IE盒模型的宽高是指content+padding+border。
设置盒模型的方式是:设置box-sizing
    box-sizing:content-box  标准盒模型
    box-sizing:border-box IE盒模型
发表于 2018-08-15 17:20:10 回复(0)
标准盒模型 width=content  IE盒模型 width=content+padding+border
发表于 2019-09-03 11:52:49 回复(0)
盒子模型分为IE盒子和W3c盒子两种:
W3C盒子由margin,border,padding,content
IE盒子由margin,padding,padding,content构成,但是由于content包括padding,border,即为margin+content
发表于 2015-08-26 20:34:55 回复(0)
1)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border)

2)有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 padding;


编辑于 2016-03-30 20:36:24 回复(0)

例如一个盒子模型如下: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这样的盒子模型

发表于 2016-07-26 14:36:53 回复(0)
IE盒子,添加padding、border不会撑大盒子,因为它们属于高宽。
高/宽 = padding+border+content

标准盒子模型,添加padding、border会撑大盒子,它们不属于高宽。
高/宽 = content

发表于 2021-09-18 17:40:18 回复(0)
盒模型的组成包括:content, padding, border, margin组成。 有两种盒模型:标准盒模型和IE盒模型。两种盒模型的主要区别是:标准盒模型的宽高是值内容宽高(content),而IE盒模型的宽高是指content+padding+border。 设置盒模型的方式是:设置box-sizing box-sizing:content-box  标准盒模型 box-sizing:border-box IE盒模型
发表于 2021-05-08 09:54:30 回复(0)
盒子模型是由content、border、padding、margin构成的。 css盒子模型分为:w3c盒子模型、IE盒子模型(怪异盒子模型) w3c盒子模型 = width(不包含border + padding) IE盒子模型 = width + border + padding (包含border + padding) 在开发中通过box-sizing来设置: w3c盒子模型:box-sizing:content-box IE盒子模型:box-sizing:border-box
发表于 2021-03-29 21:47:43 回复(0)
盒子模型的组成 content,padding,border,margin。IE标准盒子模型的content=content加padding加border。w3c的标准content=content
发表于 2020-12-26 11:13:53 回复(0)
<p>CSS 盒模型分为标准盒模型和 IE 盒模型,他们可以借助 CSS3 属性 box-sizing 来进行区分,content-box 和 border-box 他们之间的区别是一个涵盖border 进行计算宽度,一个不包含。</p>
发表于 2020-10-19 08:01:47 回复(0)
盒模型的组成包括:content、padding、border、margin
盒模型的类型分为:W3C标准盒模型和 IE盒模型。
区别:标准盒模型的宽高指content的宽高;IE盒模型的宽高指的是content+padding+border
设置盒模型的方式:标准:box-sizing: content-box
                                IE:box-sizing:border-box
发表于 2020-10-18 19:23:11 回复(0)
<p>标准盒模型content-box</p><p>怪异盒模型border-box</p><p>怪异盒宽度包括了width+border+padding</p><p><br></p><p><br></p>
发表于 2020-08-29 15:43:27 回复(0)
<p>盒子模型包括了:内容(content) 内边距(paading) 外边距(margin) 边框(border)</p>
发表于 2020-08-20 10:58:21 回复(0)
标准盒子模型:width=content
IE盒子模型:width= content+padding+border
发表于 2020-07-24 15:30:43 回复(0)
<p>ie盒模型 content为 contentpadding 和border 为widrh 设置方法为 box-sizing border-box</p><p>w3c模型 content为 content content-box</p>
发表于 2020-06-17 15:02:49 回复(0)
<p>盒模型</p><p> content,padding,border,margin</p><p><br></p><p>IE模型:border-box</p><p>标准模型:content-box</p>
发表于 2020-05-30 23:56:14 回复(0)

盒模型包括content padding border margin

盒模型分ie盒模型 标准盒模型,ie盒模型width=content+padding+border

编辑于 2020-05-12 19:01:45 回复(0)

盒模型组成包括:content、padding、border、margin


盒模型分为两种:标准盒模型、IE怪异盒模型


标准盒模型:width=content


IE怪异盒模型:width=content+padding+border


可通过设置box-sizing属性的值来选择哪一种盒模型:


content-box:标准盒模型


border-box:IE盒模型


发表于 2020-04-20 09:11:20 回复(0)

分为标准盒模型和ie的怪异盒模型;

怪异盒模型的width包含了content、margin、padding、border;

标准盒模型只计算content

编辑于 2020-03-25 12:38:31 回复(0)

外边距,内边距,边框,元素


发表于 2020-03-13 19:47:06 回复(0)