盒子模型

Box Model

1.没有宽度的盒子

如果不设置块级元素的width属性,那么这个属性的默认值就是auto,结果会让元素的宽度扩展到与父元素同宽。直接上代码

html:

1
2
3
4
5
6
7
8
<body>
    <div>
        <p>这个p元素并没有设置宽度这个p元素并没有设置宽度这个p元素并没有设置宽度这个p元素并没有设置宽度这个p元素并没有设置宽度这个p元素并没有设置宽度这个p元素并没有设置宽度这个p元素并没有设置宽度
        </p>
    </div>
</body>

css:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
*{margin:0;padding0}
body{
    font-family:helvetica,arial,sans-serif;
    font-size1em;
    margin:0px;
}
div{
    width:400px;
    height:400px;
    background:red;
    margin:0px;
}
p{
    margin:0;background-colorgreen;
}
   

图:

盒子模型

结果显而易见P扩展到了与div元素同宽。
下面给P加一些内边距。

 

1
2
3
4
p{
    margin:0;background-colorgreen;
    padding:0 20px;
}

图:

盒子模型

接下来我们给段落左右两边各添加6像素宽的边框

 

1
2
3
4
5
6
p{
    margin:0;background-colorgreen;
    padding:0 20px;
    border:solid #dd9d9d;
    border-width0 6px 0 6px;
}

图:

盒子模型

为两边各添加6像素的边框和20像素的边距后,内容区变成了348像素(400-(6*2+20*2))
最后,再给左右两边各加一些外边距:

 

1
2
3
4
5
6
7
p{
    margin:0;background-colorgreen;
    padding:0 20px;
    border:solid #dd9d9d;
    border-width0 6px 0 6px;
    margin:0 30px;
}

图:

盒子模型

此时内容变成了288px (400-(20+6+30)*2)而元素声明的总宽度并没有变,仍然是400px;

结论:没有设置width宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距,会导致内容宽度减少,减少量等于水平边框、内边距和外边距的和。

 

 

2.有宽度的盒子

ok,接下来我们再做一遍同样的练习,但这一次先声明p的宽度。然后声明了内边距。边框和外边距 .

 

1
2
3
4
5
6
7
8
p{
    width:288px;
    margin:0;background-colorgreen;
    padding:0 20px;
    border:solid #dd9d9d;
    border-width0 6px 0 6px;
    margin:0 30px;
}

图:

盒子模型

盒模型结论二:为设定了宽度的盒子添加边框、内边距和外边距,会导致盒子扩展得更宽。实际上,盒子的width属性设定的只是盒子内容区的宽度,而非盒子要占据的水平宽度 。
注:CSS3新增了一个box-sizing属性,通过它可以将有宽度的盒子也设定成具有默认的auto状态下的行为;但是不知道兼容性怎么样。

参考文献:《CSS设计指南》第三版 Charles Wyke-Smith著 李松峰译

虚拟主机
《编写高质量JavaScript代码的68个有效方法》PDF
《Node.js开发指南》PDF
《JavaScript设计模式与开发实践 》PDF
《Javascript语言精粹》PDF
广告也精彩