1.<div>标记
div是英文division的缩写，意为“分割、区域”。<div>标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。<div>与</div>之间相当于一个“盒子”，可以设置外边距、内边距、宽和高，同时内部可以容纳段落、标题、表格、图像等各种网页元素，也就是说大多数HTML标记都可以 嵌套在<div>标记中，<div>中还可以嵌套多层<div>。
<div>标记非常强大，通过与id、class等属性配合设置CSS样式，可以替代大多数的块级文本标记。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div标记</title>
<style type="text/css">
.one{
width:450px;
height:30px;
line-height:30px;
background:#FCC;
font-size:18px;
font-weight:bold;
text-align:center;
}
.two{
width:450px;
height:100px;
background:#0F0;
font-size:14px;
text-indent:2em;
}
</style>
</head>
<body>
<div class="one">
用div标记设置的标题文本
</div>
<div class="two">
<p>div标记中嵌套的p标记中的文本</p>
</div>
</body>
</html>
注意：
（1）<div>标记最大的意义在于和浮动属性float配合，实现网页的布局，这就是常说的DIV+CSS网页布局。
（2）<div>可以替代块级元素如<h>、<p>等，但是它们在语义上有一定的区别，例如<div>和<h2>的不同在于<h2>具有特殊的含义，语义较重，代表着标题，而<div>是一个通用的块级元素，主要用于布局。
2.盒子的宽与高
网页是由多个盒子排列而成的，每个盒子都有固定的大小，在CSS中使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同单位的数值或相对于父元素的百分比，实际工作中最常用的是像素值。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型的宽度与高度</title>
<style type="text/css">
.box{
width:200px;
height:80px;
background:#CCC;
border:8px solid #00f;
}
</style>
</head>
<body>
<p class="box">盒子模型的宽度与高度</p>
</body>
</html>
大多数浏览器都采用W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：
- 盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边框之和
- 盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边框之和
注意：
宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（<img />标记和<input />除外）。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
