CSS盒子模型

2020-11-12  本文已影响0人  戚子宇

1、盒子

所谓盒子模型(Box Model)就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。
所有的文档元素(标签)都会生成一个矩形框,我们成为元素框(element box),它描述了一个文档元素再网页布局汇总所占的位置大小。因此,每个盒子除了有自己大小和位置外,还影响着其他盒子的大小和位置。

盒子模型特性:

2、W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)

2.1 W3C盒子模型(标准盒模型)
2.2 IE盒模型(怪异盒模型)

3、CSS3-box-sizing

box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。
box-sizing属性可以指定盒子模型种类,content-box指定盒子模型为W3C(标准盒模型),border-box为IE盒子模型(怪异盒模型)。

上一篇下一篇

猜你喜欢

热点阅读