提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

HTML布局排版1清除body的margin

HTML 布局 清除 排版 body margin
2023-09-27 14:20:04 时间

观察可发现，一般的HTML页面分为上中下三部分，上边是导航一栏，中间是内容，下方是页面的下部分。
注意html里body本身自带8px的上下左右外边距，如图，在qq浏览器和ie里可以看到body本身是8px的margin，在设置大分区的时候，需要把该margin清零，如果有需要，带着也可以，如果不想留这边距，可以设置body的margin为0。
本博文介绍两点
1：布局前清除body的margin。
2：div的float让div在并排在一行里。

布局前如果有需要，清除body自带的margin：

body{margin:0px;}

图示：

本人只在上学的时候做过网页，都是PS做好，切好用DW排版的，总的来说，一般网页都是分为三个大区，大区就是上边中间和下边，上边一般是导航条一类的，中间是内容，最后是页脚，有点关于这个网页或网站的备注之类的。
首先是划分大区域，然后在大区域里划分小区域。
上边一般用来放导航条一类的，高度是固定的，下边一般用来放页脚一类的，高度一般也是固定的的，如果网页中间内容比较比较固定，也可以用固定高度，但是一般内容会随着后期修改，为了不修改内容的时候再修改样式，一般设置成高度自适用。
div中的一些特点（相关博文：），
1.div不设置具体高度，和设置100%，就会根据高度自适用。
2.div设置具体高度，内容如果超出了，就会超出div，如果div本身有背景图或背景色，肯定会超出了。
3.div默认是占一行，如果想并排几个div，可以设置float
不同的定位和布局方式，有些固定位置，有些会随着浏览器的大小而产生变化，样式和大小会受容器的影响。
在使用绝对定位，相对定位等，调整上下左右位置的时候，如果用editplus，不如用dreamweaver更简单，DW分成设计和代码，还可以进行拖动布局。
div本身是块状元素，占一行，如果想并排div，可以设置float了，如图，设置后三个div可以并排在一行里。

测试代码：

<style>
body{background:#7acbcc;margin:0px;}
#header{background:#e7a0dc;width:100%;height:200px;}
#body{background:#87cf7d;width:100%;}
#footer{background:#e1da71;width:100%;height:200px;}
</style>
</head>
<body>
<div id="header">
</div>
<div id="body">LODOP<br>内容<br>内容<br>内容<br>内容<br></div>
<div id="footer">
</div>
</body>
<style>
body{background:#7acbcc;margin:0px;}
#header{background:#e7a0dc;width:100%;height:200px;}
#body{background:#87cf7d;width:100%;}
#footer{background:#e1da71;width:100%;height:200px;clear:both;}
#bodyleft{background:#9a99cf;width:20%;float:left;}
#bodymiddle{background:#0066ff;width:30%;float:left;}
#bodyright{background:#009999;width:50%;float:left;}
</style>
</head>
<body>
<div id="header">
</div>
<div id="body">
<div id="bodyleft">LODOP<br>内容<br>内容<br>内容<br>内容<br></div>
<div id="bodymiddle">LODOP<br>内容<br>内容<br>内容<br>内容<br></div>
<div id="bodyright">LODOP<br>内容<br>内容<br>内容<br>内容<br</div>
</div>
<div id="footer">
</div>
</body>

如图，注意，
（1）下面的footer的下边div，由于要另起一行，不和中间的div左浮动影响，需要设置clear:both，来让下面的div单独不受影响。
（2）这里中间的三个div内容高度一样，所以布满了，如果内容不同，也会有差异，高度少的会漏出body，这里给body加了颜色，body一般是空白，所有会有空白出现。

 

相关文章