CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型，加上了doctype声明，让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子。当设置一个元素的样式如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                margin: 20px;
                padding: 20px;
                border: 10px solid blue;
            }
        </style>
    </head>
    <body>
        <div id="box">
            Box Model
        </div>
    </body>
</html>

运行结果：

1.1、宽度测试

计算最大宽度，示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style type="text/css">
            #box{
                width: 800px;
                padding: 10px;
                border: 5px solid blue;
                margin: 10px;
            }
            .sbox{
                display: inline-block;
                padding: 10px;  
                margin: 10px;   
                border: solid 10px coral;
                background: lightblue;
                width: ?;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div class="sbox">Left</div><div class="sbox">Right</div>
        </div>
    </body>
</html>

要达到如下效果，请问?处最大可以设置为多少像素？

CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

答案：

340px

View Code