3 页面布局的W3C盒子模型（二）
页面布局的盒子模型
每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。
01.jpg
声明盒子模型的CSS属性�
02.png
盒子模型
<html>
<head>
<title>盒子模型</title>
<style>
#box { /* ID为box的盒子模型 */
width:200px; /* 盒子的宽度为200px */
height:200px; /* 盒子的高度为200px */
border:5px solid #ccc; /* 盒子边框实线各边宽5px */
padding:10px; /* 盒子的4个内填充为10px */
margin:20px; /* 盒子的4个外边距为10px */
}
</style>
</head>
<body>
<div id="box"> <!-- 使用DIV声明一个盒子 -->
内容区 <!-- 盒子内容可再嵌套个盒子 -->
</div>
</body>
</html>
demo.html
<style>
.box {
width:250px !important; /* 300-5-5-20-20 = 250 */
width:300px;
height:270px !important;
height:300px;
border:5px solid blue;
padding:10px 20px;
margin:30px;
background:#F0F;
}
</style>
<body>
<div class="box">
这是内容<br>
这是内容<br>
这是内容<br>
这是内容<br>
这是内容<br>
这是内容<br>
</div>
</body>
