2 頁(yè)面布局的W3C盒子模型（一）
頁(yè)面布局的盒子模型
每個(gè)HTML元素都可以看作一個(gè)裝了東西的盒子，盒子具有寬度（width）和高度（height），盒子里面的內(nèi)容到盒子的邊框之間的距離即填充（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; /* 盒子邊框?qū)嵕€各邊寬5px */
padding:10px; /* 盒子的4個(gè)內(nèi)填充為10px */
margin:20px; /* 盒子的4個(gè)外邊距為10px */
}
</style>
</head>
<body>
<div id="box"> <!-- 使用DIV聲明一個(gè)盒子 -->
內(nèi)容區(qū) <!-- 盒子內(nèi)容可再嵌套個(gè)盒子 -->
</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">
這是內(nèi)容<br>
這是內(nèi)容<br>
這是內(nèi)容<br>
這是內(nèi)容<br>
這是內(nèi)容<br>
</div>
</body>
