网页中DIV+CSS盒模型是怎么组成的？
css盒模型是重点。如果您会用表格布局的话，就非常好理解和掌握了。这里的盒模型是和table布局的一个不同点。学 习web标准，首先要弄懂的就是这个盒模型，这就是DIV排版的核心所在。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS 排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器，比如PDA设备也能正常浏览。
那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。
我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。
所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中weight所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方
这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。
网页中DIV+CSS盒模型组成，首先需要理解div，可以将其想像成一个大的盒子，它有border，padding，margin这些属性，会table布局的话，其实对于这个更好理解，看下盒子模型如图：
现在的布局就是使用多个的div去布局，就是类似于嵌套，具体可以看下代码：
<html>
<head>
<style>
body{
width:960px; //限定网页的宽度
margin:0 auto;
boreder:1px solid #f00 //加个边框利于观察
}
#header{
height:150px;
width:960px;
}
#content{
height:500px;
width:960px;
}
#footer{
height:150px;
width:960px;
}
</style>
</head>
<body>
<div id='headr'>
<p>我是头部区域</p>
</div>
<div id='content'>
<p>我是内容部区域</p>
</div>
<div id='footer'>
<p>我是底部区域</p>
</div>
</body>
</html>
已赞过
已踩过<
