首页 > 试题广场 >

解释一下CSS的盒子模型？

[问答题]
解释一下CSS的盒子模型？
添加回答
陌上兮月头像 陌上兮月 
盒子模型主要由内容（content）,内边距(padding),外边距（margin）和边框（border）组成的，其中width
和height指的是内容区域的宽高,如果设置了背景颜色，内边距是有色的，而外边距是没有显示的，但存在于文档流
之中。顺便一说，在文档流中两个依次排列的元素垂直方向上其外边距有合并效果，并遵循“谁的外边距大
就用谁的”这个原则。

发表于 2017-08-17 11:09:26 回复(1)
Tainlai头像 Tainlai
第二个答案是对的，第一个错的！
发表于 2017-10-24 08:07:53 回复(0)
Terry22头像 Terry22

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
标准盒模型：width = content
IE盒模型： width = content + 左右padding + 左右border
发表于 2020-08-22 21:18:17 回复(0)
录音_笑头像 录音_笑
现在的浏览器所使用的盒子模型都是按照外边距 + 边框 + 内边距 + 元素的模式。
包括现在的微软的IE 和 ME 浏览器。
只有在IE5 和 IE6的时候是把内边距和边框放到元素中。
发表于 2020-04-01 21:47:00 回复(0)
微光shimmer头像 微光shimmer
盒子模型有两种，分别是IE盒子和标准W3C盒子模型。
W3C盒子模型包括margin、border、padding、content，并且content部分不包含其他部分。
IE盒子模型包括margin、border、padding、content，和标准W3C盒子模型不同的是，IE盒子模型的content部分包含了border和padding
发表于 2018-05-19 12:10:45 回复(0)
骄傲一个婷670头像 骄傲一个婷670

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

不同部分的说明：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

发表于 2022-09-02 16:11:14 回复(0)
牛客886253487号头像 牛客886253487号
     所谓盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。一个完整的盒模型有四部分组成，分别是内容区域content，内边距padding，边框border，以及外边距margin；其中margin不参与计算盒子的大小。
    css的盒子模型包括标准盒子模型和IE盒子模型（怪异模型）。标准盒子模型width和height指的是内容区域的宽度和高度；IE盒子模型width和height指的是内容区域、边框、内边距总的宽度和高度。
发表于 2022-06-26 19:50:20 回复(0)
xiaxia21头像 xiaxia21
css的盒模型有2种，分别为：1、W3c标准的盒子模型（标准盒模型），width和height指的是内容区域的宽度和高度；2、IE标准的盒子模型（怪异盒模型），width和height指的是内容区域、边框、内边距总的宽度和高度。
发表于 2022-02-18 18:21:34 回复(0)
Lliting头像 Lliting
一个完整的盒模型有四部分组成，分别是内容区域content，内边距padding，边框border，以及外边距margin；其中margin不参与计算盒子的大小；
盒模型有两种类型，IE盒模型和标准盒模型；有时候IE盒模型也被成为怪异盒模型；
在现代浏览器当中默认是盒子模型，我们可以通过CSS的box-sizing:border-box;来修改盒模型为IE盒模型；
在IE盒模型当中，盒子的宽度是我们定义的width值，而在标准盒模型当中盒子的宽度是内容的width值加上左右内边距加上左右边框的值。
发表于 2021-09-09 19:19:02 回复(0)
晃阿晃里鲁头像 晃阿晃里鲁
盒子模型由content、padding、border、margin组成。 分为W3C模型（标准盒模型）内容是盒子的边距 box_sizing:content-box; IE盒模型（怪异盒模型）边框是盒子的边界 box-sizing:border-box 两种模型的差别在于宽度和高度包含的内容不同 标准盒模型:width:content 怪异盒模型:width:border+padding+content
发表于 2021-06-02 08:05:09 回复(0)
牛客134461357号头像 牛客134461357号
1.IE盒子模型 width = content + margin (content 中包含了 padding和 border) 2.w3c标准盒子模型 width = content +margin + padding +border ( content 中不包含 padding 和 margin)
发表于 2021-04-01 22:21:57 回复(0)
Motimer头像 Motimer
可以认为每个html标签都是一个方块，然后该方块又包着几个小方块，如同盒子一样层层的包裹 这就是所谓的盒模型，盒子模型分为w3c标准盒模型以及ie盒子模型，w3c盒模型的宽度和高度是content的宽高，而ie盒模型的宽度包括content，padding,border，选择哪种盒子模型可以通过设置box-sizing的值。(content-box为w3c盒模型，content-border为IE盒模型)
发表于 2021-03-06 09:25:06 回复(0)
火柴哥头像 火柴哥
<p>一共有两种盒模型：标准W3C盒模型与IE盒模型</p><p>标准盒模型的宽高的值是content的宽高</p><p>IE盒模型的宽高的值包括了content+padding+border</p><p><br></p><p>其中盒模型一般包含了元素的content. padding. border. Margin</p>
发表于 2020-05-13 13:45:54 回复(0)
Rainbows头像 Rainbows
先回忆一下以前的记忆，我记得是ie和w3c标准盒模型都包含了content padding border margin，
但是不同的是ie盒模型content里面包含了border和padding 但是w3c标准盒子模型的content里面只包含了centent
发表于 2018-05-13 23:58:44 回复(0)
百撕可乐头像 百撕可乐
content padding内边距 margin外边距 border width height
发表于 2017-12-13 09:55:26 回复(0)
﹏帆头像 ﹏帆
这个答案错了吧
发表于 2017-10-07 16:49:15 回复(0)
velvy头像 velvy
标准css盒子模型和标准盒子模型不一样怎么一会要加边距一会又不加
发表于 2017-08-18 10:15:07 回复(1)
提交观点

问题信息

上传者：牛妹
难度：
17条回答 3822浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号