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

1.什么是css盒子模型

1.1盒子模型介绍

转自菜鸟教程

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

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

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

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

CSS box-model

1.2代码释例

 





盒子模型

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

这里是盒子的内容。

2.css盒子模型的类型

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

2.1 W3C盒子模型(标准盒模型)

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

2.2 IE盒子模型(怪异盒模型)

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

2.3 两种模式下如何解决样式的兼容性问题

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

2.4 设置盒子模型（CSS3指定盒子模型种类）

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

box-sizing: content-box;
box-sizing: border-box;
box-sizing: inherit;