观察可发现，一般的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. 安装 selenium 对于python而言属于一个第三方的模块

    针对第三方的模块,如何安装 在dos界面输入python -m pip install 模块名称 安装相关的浏览器以及浏览器的驱动 下载谷歌浏览器的驱动,淘宝镜像 下载后,解压,然后将得到的exe文件 ...

  2. Prometheus监控学习笔记

    K8S最佳实战(包括了K8S的Prometheus监控和EFK日志搜集) https://jimmysong.io/kubernetes-handbook/practice/ Prometheus-b ...

  3. DBA 有哪些工作

    首先,我们看看DBA的工作有哪些?DBA的工作实际上都是围绕数据库展开,包含但不限于这些工作: 1. 数据库.主机.操作系统.交换机.存储选型,预算,架构设计,部署,参数优化: 2. 数据库备份.恢复 ...

  4. 39、Parquet数据源之自动分区推断&合并元数据

    一.自动分区推断 1.概述 表分区是一种常见的优化方式,比如Hive中就提供了表分区的特性.在一个分区表中,不同分区的数据通常存储在不同的目录中, 分区列的值通常就包含在了分区目录的目录名中.Spar ...

  5. 36、将RDD转换为DataFrame

    一.概述 为什么要将RDD转换为DataFrame? 因为这样的话,我们就可以直接针对HDFS等任何可以构建为RDD的数据,使用Spark SQL进行SQL查询了.这个功能是无比强大的. 想象一下,针 ...

  6. P1108 低价购买——最长下降子序列+方案数

    P1108 低价购买 最长下降子序列不用多讲:关键是方案数: 在求出f[i]时,我们可以比较前面的f[j]; 如果f[i]==f[j]&&a[i]==a[j] 要将t[j]=0,去重: ...

  7. winform如何不卡界面

    快速阅读 如何在winform程序中,让界面不再卡死. 关于委托和AsyncCallback的使用. 界面卡死的原因是因为耗时任务的计算占用了主线程,导致主界面没有办法进行其它操作,比如拖动.造成界面 ...

  8. 深度学习面试题05：激活函数sigmod、tanh、ReLU、LeakyRelu、Relu6

    目录 为什么要用激活函数 sigmod tanh ReLU LeakyReLU ReLU6 参考资料 为什么要用激活函数 在神经网络中,如果不对上一层结点的输出做非线性转换的话,再深的网络也是线性模型 ...

  9. JVM synchronized关键字所生成的字节码

    一.创建测试类 package com.example.jvm.bytecode; public class MyTest2 { String str = "Welcome"; p ...

  10. 清理Windows.edb

    解决Windows.edb文件巨大的windows 10问题的另一个快速解决方法是删除Windows.edb文件. 步骤1:在任务管理器中终止SearchIndexer.exe --按Ctrl + A ...