简述什么是盒子模型(什么是css的盒子模型)

案例 2020-02-01 09:35:47

什么是盒子模型?
在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
什么是css的盒子模型
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
  网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。
  这些属性可以把它转移到日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。
  每个盒子都有:边界、边框、填充、内容四个属性;
  每个属性都包括四个部分:上、右、下、左;这四部分可同时设置,也可分别设置;里的抗震辅料厚度,而边框有大小和颜色之分,又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。

Z10-0601现代时尚简约金属吊灯组合Z10-0601现代时尚简约金属吊灯组合


盒子模型都有哪几种?
分为IE盒模型和普通盒模型,普通盒模型的宽计算为width加padding加border加margin,而IE盒模型的宽计算就是width,不包括padding及向外的值。