观察可发现，一般的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. Cogs 56. 质数取石子(博弈)

    质数取石子 ★★ 输入文件:stonegame.in 输出文件:stonegame.out 简单对比 时间限制:1 s 内存限制:128 MB 问题描述 DD 和 MM 正在玩取石子游戏.他们的游戏规 ...

  2. 洛谷 P5461 赦免战俘 题解

    P5461 赦免战俘 题目背景 借助反作弊系统,一些在月赛有抄袭作弊行为的选手被抓出来了! 题目描述 现有 \(2^n\times 2^n (n\le10)\) 名作弊者站成一个正方形方阵等候 kkk ...

  3. LibreOJ #524. 「LibreOJ β Round #4」游戏

    二次联通门 : LibreOJ #524. 「LibreOJ β Round #4」游戏 /* LibreOJ #524. 「LibreOJ β Round #4」游戏 找找规律就会发现.. 当有X的 ...

  4. Java中的位运算及简单的算法应用介绍

    众所周知,计算机底层是二进制.而java作为一门计算机编程语言,也对二进制的位运算提供了完整的支持. 在java中,int是32位的,也就是说可以用来实现32位的位运算.方便起见,我们一般用16进制对 ...

  5. 面对对大体量矢量数据ArcGIS的优化方法

    大数据量矢量数据的可视化需要解决的问题,就是如何在可接受的短时间内,能展示大数据量的矢量地图. 解决方案一:采用预先渲染的切片进行展示 切片是预先渲染的数据集,也是响应最快的展示方式.目前ArcGIS ...

  6. java学习笔记（2）注释、public lcass、class、标识符、字面值、变量

    java学习笔记(1)中说过了java的一些基础知识,发展史,特点,编译和运行过程,配置环境变量等,接下来开始介绍java的语法等只是点  关于java源程序中的注释: *什么是注释?注释的作用是什么 ...

  7. (1)Go变量声明、赋值和常量

     先简单了解一下控制台输出,在go中,我们使用fmt包中的函数进行在控制台中打印,一般用以下几个函数      fmt.Print()        #不换行输出      fmt.Printf()  ...

  8. A2T和T2A，===string和CString互转 方法一：--用宏的方式

    USES_CONVERSION它是在堆栈上分配空间的,也就是说你在你在函数未结束就不会被释放掉.所有要注意不要在一个函数中用while循环执行它,不然栈空间就马上会分配完(栈空间一般只有2M,很小). ...

  9. linux 查看文件内容的几种命令

    cat #将文件内容输出到屏幕head #查看文件开头N行tail #查看文件末尾N行tailf #动态的查看的写入,有写入时屏幕输出vim.vi #文件编辑器,也可以当是查看文件{进入文件}grep ...

  10. 解决manjaro无法外接显示器

    https://unix.stackexchange.com/questions/303751/hdmi-port-not-working-manjaro https://blog.csdn.net/ ...