观察可发现，一般的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一般是空白，所有会有空白出现。

HTML布局排版1清除body的margin的更多相关文章

  1. HTML用table布局排版 padding清零

    之前博文:HTML布局排版2如何设置div总是相对于页面居中 中是用div进行排版的,div是切了三条,顶部的图片,下部的图片,中间的平铺条,中间的div不设高度,根据内容,该区域的大小不固定,便于后 ...

  2. HTML布局排版之制作个人网站的文章列表

    文章列表.博文列表,一般是有文章名字和时间构成的,文章名字后面是时间,点击文章的名字,可进入该文章.为了美观,一般文章名字都有一定的最大字数限制,长宽对齐,等长宽的统一格式比较美观,这种用表格来做比较 ...

  3. HTML布局排版手机上浏览的网页

    前面做个几个简单的测试html布局排版的页面,都是在浏览器上查看的,C-LODOP可通过集中打印和广域网AO打印方式,让手机等也可以打印预览和打印. 集中打印的大体方法是通过一台windows电脑作为 ...

  4. 几个常见的布局的多种实现方式及margin负值总结

    第一部分:几个常见的布局实现方式 一.左右两边固定, center中间自适应未知 html代码中 center 部分首先要放在box的最前部分.然后是left,right 圣杯布局: <div ...

  5. QT5:第二章 布局排版控件

    一.简介 在QT组件面板中有Layouts和Spacers两个组件面板 注意:布局排版控件不显示 1.Layouts(布局) Vertical Layout:垂直方向布局,组件自动在垂直方向上分布 H ...

  6. Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

    一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...

  7. 页面布局排版-block，inline，float，relative，absolute等

    1.span和div的区别 div是块元素(block),span是行内元素(inline): span什么事也不会做,它存在的目的在与为开发者给它所围绕的元素指定样式.div类似,不过它引入了行分隔 ...

  8. CSS布局--浮动与清除

    浮动和清除 浮动和清除是页面布局的重要属性.浮动的意思是指将元素从常规的文档流中取出来. 当你浮动一个元素的时候,浮动的元素会被浏览器尽量的往上放,能放多高就放多高,一直到某个元素的边界为止. 浮动元 ...

  9. HTML布局排版4三部分测试图片页面

    布局样式有前面的三个相关博文介绍: 该页面因为方便以后自己用,所以JS并没有判断输入内容为空或不对的情况.页面本身特点:1.页头的透明图,方便不更换底层渐变的情况下,更换图片2.浏览器宽度改变,中间b ...

随机推荐

  1. UWB DWM1000 开源项目框架 之 温度采集

    在之前博文开源一套uwb 框架,后面几篇博文会基于这个开源框架进行简单开发. 让uwb使用者更清楚了解基于这个basecode 开发工作. 这里所做内容是,采集dwm1000 温度,并发送到另一个节点 ...

  2. COM Error Code（HRESULT）部分摘录

    Return value/code Description 0x00030200 STG_S_CONVERTED The underlying file was converted to compou ...

  3. [c++11]右值引用、移动语义和完美转发

    c++中引入了右值引用和移动语义,可以避免无谓的复制,提高程序性能.有点难理解,于是花时间整理一下自己的理解. 左值.右值 C++中所有的值都必然属于左值.右值二者之一.左值是指表达式结束后依然存在的 ...

  4. PHP实现系统编程（一） --- 网络Socket及IO多路复用【网摘】

    一直以来,PHP很少用于socket编程,毕竟是一门脚本语言,效率会成为很大的瓶颈,但是不能说PHP就无法用于socket编程,也不能说PHP的socket编程性能就有多么的低,例如知名的一款PHP ...

  5. python中isinstance函数

    1.描述 python中isinstance()函数,是python中的一个内置函数,用来判断一个函数是否是一个已知的类型,类似type(). 2.语法 isinstance(object,class ...

  6. 【2019.10.30】SDN上机第1次作业

    用字符命令搭建如下拓扑,要求写出命令 题目一: 字符命令如下: 题目二: 字符命令如下: 利用可视化工具搭建如下拓扑 要求支持OpenFlow 1.0 1.1 1.2 1.3,设置h1(10.0.0. ...

  7. 【软工实践】Alpha冲刺（1/6）

    链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 了解了反馈机制的实现原理 确定好算法的框架 对接口的规范化进行学习 展示Git ...

  8. 基因表达半衰期 | mRNA Half-Life

    做单细胞RNA-seq分析,自然就能想到我们测到的其实是一个概率学的东西,就像女士品茶里的酵母的泊松分布一样. 真实的细胞里,一切都是连续的,从DNA到mRNA到蛋白,是有一个时间间隔的,每一个pro ...

  9. ajax上传图片报错TypeError: 'append' called on an object that does not implement interface Fo

    使用FormData时报错:TypeError: 'append' called on an object that does not implement interface FormData 解决办 ...

  10. 其他系列 | charles抓取https中出现unknow【转载】

    原文:https://www.cnblogs.com/aeolian/p/9249185.html http正常抓包,https则出现unknown 1.安装证书 Help->SSL Proxy ...