CSS技巧:css的盒模型

作者: 来源: 更新时间:2013-03-02 12:12:36 点击:

下面是css中的盒模型,每一个标签都是一个盒模型

这个盒模型里面,最里面是内容区,内容区的外面是填充(padding), 填充的外面是边距(margin), 填充和边距之间是边框(border)。通过这个盒模型,我们可以发现,填充将内容和边框隔开,边框将填充和边距隔开,边距将一个元素和另一个元素隔开。边距和填充很难区分开,一般只有在设置背景色和边框后,才能区别两者。

margin padding

px em 百分比

其中,px是精确值,而em是相对于字号,百分比很特殊,它是相对于父元素的宽度,即如果某一个元素的样式中padding(或者margin)为2%,而他的父元素宽度为100px。那么它的padding(或者margin)的实际值为2px。并且margin的值可以为负值,而padding不行,padding的值要么为0, 要么为正。

使用margin和padding要注意:

1 对于行内元素,margin和padding只能在行内元素的左右增加空格,但是不会影响行内元素的高度:

<html> <head> <title>补白和边距对行内元素的影响</title> <style type = "text/css"> span { margin: 20px; background: blue; } </style> </head> <body> <p> abcdfeghijklmnabcd<br /> efg<span>hijklmn</span>abcdefghijklmn.<br /> abcdefghijklmnabcdefghijklmnabcdefghijklmn. </p> </body></html>

运行结果:

蓝色背景的文本margin值为20px,但是我们可以看到,它只是左右增加了空格,虽然它的上下边距也增加了(由于背景不能延伸到边距,因此我们看不到效果,在padding里面会很明显),但是它所处行的高度(行高)却没有改变。

<html> <head> <title>补白和边距对行内元素的影响</title> <style type = "text/css"> span { padding: 20px; background: blue; } </style> </head> <body> <p> abcdfeghijklmnabcd<br /> efg<span>hijklmn</span>abcdefghijklmn.<br /> abcdefghijklmnabcdefghijklmnabcdefghijklmn. </p> </body></html>

运行结果:

蓝色文本的padding值为20px,它只是在该文本的左右增加了空格,虽然它的上下padding也增加了(背景色可以延伸到padding里面),但是却对行高没有影响。从这个结果里面,我们也可以发现,蓝色文本的背景色在第一行的上面,在第三行的下面,这是因为浏览器在渲染元素的时候,下面的元素总出现在上面元素的上方。

但是,对于img元素例外,当为img元素设置margin和padding时,上下左右的值都会起作用,但还是不会改变行的高度:

<html> <head> <title>补白和边距对行内元素的影响</title> <style type = "text/css"> img { margin: 20px; background: blue; } </style> </head> <body> <p> abcdfeghijklmnabcd<br /> efg<img src = "menubg.gif" />abcdefghijklmn.<br /> abcdefghijklmnabcdefghijklmnabcdefghijklmn. </p> </body></html>

运行结果:

<img src="/upload/201303/201332121236bph.gif" />abcdefghijklmn.<br /> abcdefghijklmnabcdefghijklmnabcdefghijklmn. </p> </body></html>

运行结果(IE8):

运行结果(火狐):

火狐和IE8的结果不一样,在IE8里面没有什么影响,在火狐里面有正确的结果。

有时候,你如果想把行内元素的top/bottom padding或者top/bottom margin用上,可以利用display:inline-block。这样元素依然保持在行内,但却被当成块级元素看待。

2 边距冲突

所谓边距冲突,是当一个元素的下边距和另一个元素的上边距相遇时,值较小的边距会被忽略,只有值大的起作用。

 

边框

border

border-style border-color border-width

每一个都对应有上下左右四个值,其中border-style的值有none solid groove ridge double hidden dotted dashed insert outset。

高度和宽度

width 和height

px em 百分比

width和height只的是内容区的高度和宽度。em只的是相对于字号,而百分比相对于父元素的高度和宽度值。如果内容区的内容超出搞度和宽度,内容就会溢出。

浮动

float

right left none

使用浮动时要注意:

1 浮动元素被当做块级元素来看待,并且没有边距冲突的问题

2 当包围浮动元素的内容有背景和边框时,他们会出现在浮动元素的下方,而不是碰到浮动元素时终止:

从图中可以看到,背景和图片都出现在了浮动元素的下方。要想不出现正中情况,有两种解决方法:

第一种是对包围浮动元素的元素设置overflow:hidden属性即可(在IE8上好像不管用需要再添加一条规则 zoom: 1);

第二种是设置浮动元素的边框,使其足够宽,并且让其颜色和网页背景色一样。

3 要给浮动元素声明宽度,这是为了避免碰到浮动文本元素的时,使其宽度为0

4 利用负边距,元素可以浮动到父元素外面

5 当浮动元素比父元素宽时,浮动元素浮动的时候将超出父元素。如一个段落里面包含一张图片,图片设置为向左浮动,若图片宽度大于段落宽度,图片将超出段落

清除浮动

clear

left right both none

清除浮动的意思是让一个元素的那个方向没有浮动元素。比如给一个标题设置样式h1 {clear:left},这就是说,让h1的左边没有浮动元素,但是右边可以有。

清除浮动的原理是增加该元素的边距值,已使其落入浮动元素下方。