css的盒模型

下面是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>

运行结果:

从结果中我们看到，设置的margin在图片的上下左右都起了作用。

下面是设置padding的情况:

<html>
    <head>
        <title>补白和边距对行内元素的影响</title>
        <style type = "text/css">
        img {
            padding: 20px;
            background: blue;
        }
        </style>
    </head>
    <body> 
        <p>
            abcdfeghijklmnabcd<br />
            efg<img src = "menubg.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的左边没有浮动元素，但是右边可以有。

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

posted @ 2013-02-28 20:01 chaoguo1234 阅读(370) 评论(0) 编辑收藏举报

刷新页面返回顶部

css的盒模型

公告