观察可发现，一般的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. 【CSP-S 2019】【洛谷P5658】括号树【dfs】【二分】

    题目: 题目链接:https://www.luogu.org/problem/P5658?contestId=24103 本题中合法括号串的定义如下: () 是合法括号串. 如果 A 是合法括号串,则 ...

  2. Map的常用实现类及Entry的用法

    public static void main(String[] args) {    //map  键值对  json格式根据你的键名来获取对应的值  //特点 :无序.以键值对的形式添加元素,键不 ...

  3. Greenplum 添加mirror步骤

    原文链接:https://yq.aliyun.com/articles/695864 [TOC] 概述 新安装的greenplum集群只有primary节点,没有mirror.高可用性没得到保证.所以 ...

  4. Sublime Text3注册及汉化(支持Windows、MAC OS)

    苹果mac 版本下载 点击下载https://download.sublimetext.com/Sublime%20Text%20Build%203114.dmg PART_A 注册 v3103及以上 ...

  5. ICEM-蜗壳

    原视频下载地址:https://yunpan.cn/cY8XxpyLN4QaE  访问密码 a792

  6. 使用IDEA运行CAS5.3服务器

    在上节中,我们运行CAS服务器是打成war包在tomcat中进行运行,这节介绍在IDEA中运行CAS服务器. 1.下载CAS 模板 Overlay Template,我这里使用 Apereo CAS ...

  7. 【Python 代码】3D TIF 拆成若干张tif （ISBI细胞数据集）

    from libtiff import * imgdir = TIFF3D.open("train-labels.tif") imgarr = imgdir.read_image( ...

  8. Spark（二）—— 标签计算、用户画像应用

    一.标签计算 数据 86913510 {"reviewPics":[],"extInfoList":null,"expenseList":n ...

  9. 网络IPC：套接字接口概述

    网络IPC:套接字接口概述 套接字接口实现了通过网络连接的不同计算机之间的进程相互通信的机制. 套接字描述符(创建套接字) 套接字是通信端点的抽象,为创建套接字,调用socket函数 #include ...

  10. 【转】php7+IIS 配置环境（windows环境）

    继php7+apache2.4 配置环境(window环境)后,由于B2C项目准备上线:特此小编在阿里云上搭建PHP7环境,为此特写上搭建过程希望正处于搭建php7+IIS(windows环境)中的朋 ...