微信二维码
微博二维码
qq号二维码

【html】盒子模型

夏磊银 2020-10-27 WEB前端 278人浏览

请详细说明盒子模型包含哪些部分,并且将中英文说明添加上。html基础内容,每个阶段都需要熟知。请202004班学员在周三前完成回答。

3个回答
张烨

css盒子模型又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。

网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模型。

内容区(content)

内容区是盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以是文本、图片等多种类型。内容区有三个属性,width、height 和overflow。

使用width和height属性可以指定盒子内容区的高度和宽度,当内容信息太多,超出内容区所占范围时,可以使用overflow 溢出属性来指定处理方法。

填充(padding)

填充是内容区和边框之间的空间。填充的属性有五种 ,即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。

边框(border)

边框是环绕内容区和填充的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。

空白边(margin)

空白边位于盒子的最外围,是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起,是CSS 布局的一个重要手段。

空白边的属性有五种 ,即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin,其具体的设置和使用与填充属性类似。

回答已被采纳   2020-10-27
付强

内容(content)、内边距(padding)、边框(border)、外边距(margin),

  2020-10-27
李吉庆

contentneirong内容

border边框

padding内边距

margin外边距

  2020-10-28
分享到: