观察可发现，一般的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. c# 隐藏窗口在ALT+TAB中

    winform: protected override CreateParams CreateParams { get { const int WS_EX_APPWINDOW = 0x40000; c ...

  2. java对接微信小程序

    https://www.cnblogs.com/lyn20141231/p/11210372.html https://blog.csdn.net/sinat_29039125/article/det ...

  3. luogu T96516 [DBOI2019]持盾 可持久化线段树+查分

    因为题中的操作是区间加法,所以满足前缀相减性. 而每一次查询的时候还是单点查询,所以直接用可持久化线段树维护差分数组,然后查一个前缀和就行了. code: #include <bits/stdc ...

  4. win32线程栈溢出问题 (一)

    一.什么是线程栈溢出 我们都知道,每一个win32线程都会开辟一个空间,用来临时存储线程执行时所调用的一系列函数的参数.返回地址和局部变量及其他上下文信息.这个空间就是线程的栈区.栈区的容量是有限的, ...

  5. package.json 版本号解释

    经常看到package.json中的各种版本号记录 比如 ~ ^ 等.其实是有个规范的.其遵循 semver. 具体的网站为:  http://semver.org/lang/zh-CN/

  6. Deepin Create/Delete Folder refresh

    Did u have a problem whth the deepin file manager,Everthime I create/delete a Folder of File i have ...

  7. AWS服务器上安全组端口设置和访问的问题

    在搭建测试环境时使用AWS服务器环境,AWS EC2需要设置安全组开放端口,如果端口未进行授权则不允许访问,后台授权界面如下: 1.查看某个端口是否在AWS后台被开放,并允许访问: netstat - ...

  8. Java 中HashTable、HashMap、TreeMap三者区别，以及自定义对象是否相同比较，自定义排序等

    /* Map集合:该集合存储键值对.一对一对往里存.而且要保证键的唯一性. Map |--Hashtable:底层是哈希表数据结构,不可以存入null键null值.该集合是线程同步的.效率低.基本已废 ...

  9. mac安装rust

    1.安装 curl https://sh.rustup.rs -sSf | sh 使用brew各种出错,还慢. 2编译 source $HOME/.cargo/env 3.版本查看 rustc --v ...

  10. 腾讯云CENTOS7安装MSSQL2017

    腾讯云CENTOS7安装MSSQL2017 mkdir -p /opt/sqlserver2017cd /opt/sqlserver2017/ 下载离线包:wget https://packages. ...