一般情况下，页面内容，是不会紧贴浏览器的，而是与浏览器有一定的距离，因为body本身也是一个盒子，也有一个外边距，这也是由于body的外边距产生的。
margin – top / right / bottom / left（设置上/右/下/左外边距）
为了使页面，在不同的浏览器之间显示的效果一样，通常在CSS中通过并集选择器，统一设置这些标签的外边距为0px，这样页面中不会因为外边距而产生不必要的空隙，各浏览器的效果也会一样。
使用margin就可以设置页面居中显示 eg: margin:0px auto ;
l 内边距//会改变整个元素的大小
用于控制内容与边框之间的距离。
padding-top/bottom/left/right（设置上/右/下/左内边距为？px）
现在使用padding属性，设置列表内边距为0px，设置页面内容居中显示，同时对于页面中能够产生外边距的元素统一使用并集选择器设置其外边距为0px。
内边距的值，不允许为负。
l 盒子模型的尺寸
l 导致页面元素折行显示，或撑开页面的原因，主要还是由于盒子尺寸问题。
l width和height指的是内容区域的宽度和高度。增加了边框、内边距和外边距后不会影响内容区域的尺寸，但是会增加盒子模型的总尺寸。
l 盒子模型总尺寸=border-width + paddin 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 g + margin + 内容宽度
熟悉工作流程
在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：font、color、height、width、align等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“
文字块一
文字块二
文字块三
”更合适。用DIV+CSS设计思路是这样的: 1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：
CSS排版结果图
演示地址：[css2.html](()
用div来定义语义结构
现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图）
典型版面分栏结构
其结构代码如下：
上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成:
最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是：
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}
页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。其样式代码为：
#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}
导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：
#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}
内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为：
#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;
版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。其样式代码如下：
#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}
最后回到样式开头大家会看到这样的样式代码：
* {
margin: 0px;
padding: 0px;
}
这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：
659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
