2 页面布局的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>
.box1 {
border:1px solid blue;
width:300px;
height:300px;
padding:10px;
/*
padding:10px; 四边
padding:10px 20px; 上下10px 左右 20px
padding:10px 20px 30px; 上10px 左右20px 下30px
padding:10px 20px 30px 40px 上右下左
padding-top:
padding-left:
padding-right:
padding-bottom:
*/
margin-left:20px;
/*
margin:0 0 0 20px;
*/
}
</style>
<body>
<div class="box1">
这是内容<br>
这是内容<br>
这是内容<br>
这是内容<br>
这是内容<br>
</div>
</body>
