首页 > 代码库 > CSS之盒子模型

CSS之盒子模型

2024-07-20 11:39:44   223人阅读

盒子模型在CSS中是个很重要的概念。它是CSS可视化格式化系统的基石。盒子模型可以用于元素定位和网页布局。根据CSS盒子模型的规定，每个元素（不管是内嵌元素还是块级元素）都会产生一个矩形盒子围绕在元素内容之外。这个盒子我们称之为元素盒。当然还有其他盒子，这里我们主要说说元素盒。

下面是一张盒子模型的示意图：

从上图我们不难看出一个完整的盒子包括:内容（content）、填充（padding）、边框（border）、边界（margin）

那我们来分别说说上面这四个部分。

首先是内容content 。顾名思义就是盒子中装的内容。比如一个p标签，它里面的文字就是它的内容。这个是很好理解的

其次是填充padding。这个我们可以这样理解，就是给内容周围加的一层东西。可以这样说，如果我们内容是易碎的物品，那么我们经常会在它的四周加一些减震的材料，

再次是边框border。这个就是盒子模型的边框了。

至于边界（margin）就是盒子与盒子之间的缝隙或者间距。

虽然我们可以用生活中的盒子与我们的元素盒相比，但是它们还是有很大差别的。那就是我们现实中的盒子它的容量是固定的，但是在我们CSS中的盒子呢，它是具有弹性的，当我们盒子中的内容超过我们盒子本身容量的时候，它还能继续装，它会自动把盒子撑大。但是当我们给了宽度和高度的时候超过的部分就会溢出我们的盒子。

一个盒子的整体尺寸需要把内容，外边距，内边距，还有边框一起算在内。

内容content、填充padding、边框border、边界margin它们又各自具有自己的属性。

内容是具有宽度和高度属性。比如我们平时对div设置高度和宽度，其实就是在对我们的内容区部分content设置宽度和高度（当然在IE6这个是不正确的）。如果我们没有对它进行任何的设置，那么它就会是默认的，根据内容来适应。

填充只具有宽度和高度属性。根据CSS2.0

padding：length
取值：
length :　由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。不允许负值。请参阅 长度单位
说明：
检索或设置对象四边的内补丁。对于 td 和 th 对象而言默认值为 1 。其他对象的默认值为 0 。 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
在IE5.5+中此属性支持内联对象使用。而在此前的版本中，内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。 此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。 对应的脚本特性为padding。
 
边框border 。该属性是复合属性。我们可以设置border的样式，颜色还有宽度。在CSS3中我们还可以设置border的背景图片。
我们在使用border的时候应该注意下面3点
1、边框画在元素的背景之上；
2、非可替换内嵌元素的边框对于该元素所在行的行高没有影响；
3、可替换元素的边框将影响行高；
最后是我们margin
可以是负值
我们在使用margin的时候应该注意
1、外边距始终都是透明的，
2、元素可以有负外边距。当设置一个元素的外边距为负数时，该元素会突破父元素的盒子模型。
3、正常文档流中的相邻块级元素的垂直（top和bottom）外边距将会重合。即，相邻的两个块级元素之间的空白将会是两个元素的外边距中较大的哪一个，而不是两个外边距的和。
4、对于浮动元素、绝对定位元素和内嵌元素，垂直外边距不会重合。
5、在CSS2中，水平外边距不会重合。
6、对<span>等文本类型的内嵌元素，设置顶部和地步外边距不会影响行高，而设置左右外边距会导致内嵌元素的第一个字符之前以及最后一个字符之后保留一定数量空间。
7、对于图形以及表单输入元素等类型的内嵌元素，设置顶部和底部外边距将会影响行高。

 

CSS之盒子模型


联系
我们