什么是css盒子模式(框模型)

html-css010

什么是css盒子模式(框模型),第1张

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin),

CSS盒子模式都具备这些属性。

这些属性可以把它转移到日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。

每个盒子都有:边界、边框、填充、内容四个属性;

每个属性都包括四个部分:上、右、下、左;这四部分可同时设置,也可分别设置;里的抗震辅料厚度,而边框有大小和颜色之分,又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。

盒模型也称为框模型,就是从盒子顶部俯视所得的一张平面图,用于描述元素所占用的空间。它有两种盒模型,W3C盒模型和IE盒模型(IE6以下,不包括IE6以及怪异模式下的IE5.5+)

理论上两者的主要区别是二者的盒子宽高是否包括元素的边框和内边距。当用CSS给给某个元素定义高或宽时,IE盒模型中内容的宽或高将会包含内边距和边框,而W3C盒模型并不会。

例如:下面的div元素,在W3C盒模型中的宽度为122px在IE盒模型中的宽度是100px

简述CSS盒子模型的主要思路:

CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content)、内边距(padding)、边框(border) 和 外边距(margin) 的方式。在HTML文档中,每个元素(element)都有盒子模型,所以说在Web世界里(特别是页面布局),Box Model无处不在。