CSS盒子模型

浏览数：22 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS盒子模型</title>
<style type="text/css">
    #bigBox{
        width:300px;
        height:300px;
        background:#F30;
        padding:20px 0px 0px 20px;
        margin:20px;
    }
    #smallBox{
        width:150px;
        height:150px;
        background:#6F9;
        padding-top:20px;
    }
</style>
</head>
<!--
    CSS盒子模型：W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候，要考虑到内填充，边框，边界的存在)
            一个盒子的构成：
                        盒子中的内容：content
                        盒子的边框：border
                        盒子边框与内容之间的距离：称为填充---padding内边距（内补丁）
                        如果有多个盒子存在，盒子与盒子之间的距离：称为边界---margin，外边距（外补丁）
                        
    整个盒子模型在网页中所占的宽度：左边界+左边框+左填充+内容+右填充+右边框+右边界
    
    
    CSS盒子模型的属性：
                内容属性：宽=width 高=height
                内填充属性（内容与边框之间的距离）：padding
                边界属性：margin（使用该属性的时候注意浏览器的兼容性）
                        内填充与边界的规则：
                                如果有四个参数：表示上右下左,也可以单单指定某个方向
                                如果只有一个参数：表示上右下左
                                如果有两个参数： 第一个参数表示上下 第二个参数表示左右
                                如果三个参数：表示上 左右 下
-->
<body> 
<div id="bigBox">
    <div id="smallBox">
        小盒子
    </div>
</div>

</body>
</html>