CSS3盒模型——大小

课后整理 2020-12-9

CSS盒子模型使用width（宽）和height（高）定义内容区域的大小，但是很多用户误以为width属性表示整个元素的宽度，height属性表示整个元素的高度，包括IE老版本的浏览器都这样认为。

【示例1】下面示例定义两个并列显示的div元素，设置每个div的width为50％，显示效果如图3所示。

<style type="text/css">
div {/*定义div元素公共属性 */
    float: left;                                                /*向左浮动，实现并列显示*/
    background-image:  url(images/1.jpg);         /* 定义背景图像 */
    background-color: #CC99CC;                    /* 定义背景色 */
    font-size: 32px;                                        /* 定义div内显示的字体大小 */
    color: #FF0000;                                       /* 定义div内显示的字体颜色 */
    text-align: center;                                     /* 定义div内显示的字体居中显示 */
    height: 540px;                                          /* 定义高度*/}
#box1 {/*定义第1个div元素属性*/ 
    width: 50%;                                              /* 占据窗口一半的宽度 */ } 
#box2 {/*定义第2个div元素属性*/ 
    width: 50%;                                              /* 占据窗口一半的宽度 */ }
</style>
 
<div id="box1">左边元素</div>
<div id="box2">右边元素</div>

图3 定义元素的大小

【示例2】下面示例以上例为基础，设计两个div元素并列显示，同时设置元素间留出一点空隙，以便区分不同元素。

<style type="text/css">
div {/*定义div元素公共属性，具体声明与上面示例代码相同，就不再重复注释 */
    float:left;
     background-image:url(images/1.jpg);
    background-color:#CC99CC;
    font-size:32px;
    color:#FF0000;
    text-align:center;
    height:540px;}
#box1 {/* 定义第1个div元素属性 */
    width:50%;
    margin-right:1px; /* 定义右边界为1像素宽 */}
#box2 {/* 定义第2个div元素属性 */
    width:50%;
    margin-left:1px; /* 定义左边界为1像素宽*/}
</style>
 
<div id="box1">左边元素</div>
<div id="box2">右边元素</div>

在浏览器中预览，可以发现第二个div元素错位显示，如图4所示。这是因为当左右两个div的width属性都设置为50%时，div内容本身就会挤满浏览器窗口，由于margin属性不包含在width属性之内，所以两个div就无法同时显示在一行内。

图4 错行显示效果

解决方法：可以设置width属性为49%或再小点。但是当空隙设置较大时，通过缩减百分比还是存在一定的风险或局限性。此时，最好的解决办法是设置width为固定值，不过这样会使页面布局失去灵活性。

【拓展】

用户可以使用三种方法实现在块元素周围生成空隙。第一种是只为元素添加补白，第二种是只添加边界，第三种是既增加补白，又增加边界。

如果元素定义了背景，就不能使用补白设计间距，因为背景会扩展到补白区域内，从而使空隙被背景遮盖而无法显示出来。

根据CSS盒模型规则，可以给出一个简单的盒模型尺寸计算公式：

例如，假设一个元素的宽度为200px，左右边界为50px，左右补白为50px，边框为20px。则该元素在页面中实际占据宽度为：

50px + 20px +  50px + 200px + 50px + 20px + 50px = 440px。

但由于IE早期版本（5.x及以下版本）浏览器对于盒模型的解释使用一种非标准规则，它认为元素的宽度应为内容宽度、补白宽度和边界宽度的总和，用公式表示为：

width=border-left  + padding-left + content-width + padding-right + border-fight
height=  border-top + padding-top + content-height + padding-bottom + border-bottom

因此，在IE早期版本（5.x及以下版本）浏览器中，元素在页面中所占据的实际大小为：

因此，在网页布局时，遇到与宽度或高度相关问题，设计师一定要对盒模型中的margin、padding和border等属性进行综合考虑，只有这样才能设计出满意的布局，避免出现错位、错行等现象。

【注意】

通过下面4个属性灵活控制CSS盒模型的大小，这些属性在网页弹性布局中非常有用。