css盒子模型及盒子模型的类型

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css盒子模型及盒子模型的类型相关的知识,希望对你有一定的参考价值。

参考技术A

转自 菜鸟教程

所有html元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

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

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

下面的图片说明了盒子模型(Box Model):

转自 链接
盒子模型有两种,分别是W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)

1.标准盒模型中width指的是内容区域content的宽度;height指的是内容区域content的高度。
2.标准盒模型下盒子的大小 = content + border + padding + margin

1.怪异盒模型中的width指的是内容、边框、内边距总的宽度(content + border + padding);height指的是内容、边框、内边距总的高度
2.怪异盒模型下盒子的大小=width(content + border + padding) + margin

建议不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。

即box-sizing属性可以指定盒子模型种类,content-box指定盒子模型为W3C(标准盒模型),border-box为IE盒子模型(怪异盒模型)。

以上是关于css盒子模型及盒子模型的类型的主要内容,如果未能解决你的问题,请参考以下文章

CSS+DIV写盒子模型图

CSS中盒子模型的标准流定位原则是啥?

jQuery CSS操作及jQuery的盒子模型

css盒子模式都具备哪些属性

【8】CSS盒子模型、样式继承和默认样式

盒子模型及层模型定位