3 页面布局的W3C盒子模型(二)
页面布局的盒子模型
每个HTML元素都可以看作一个装了东西的盒子,盒子具有宽度(width)和高度(height),盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin)。
声明盒子模型的CSS属性�
盒子模型
<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>