现在的网站对于前端的排版已经逐渐不使用<table>，而是使用div+css。

使用这种方法的最大好处就在于在维护页面时，可以只维护css而不去改动html。

可是这种方式对于初学者来说可能不好理解，所以简单描述一下使用div+css排版基础。
 
下图是一个使用div+css排版的示例：
 
html和css：
<html>
<head>
<style>
body{font-size:20px;font-weight:bold;color:white;}
.back{background-color:gray;width:1000px;height:500px;}
.top{background-color:orange;width:500px;height:100px;margin:1% auto;}
.middle{background-color:yellow;width:500px;height:100px;margin:0 auto;}
.middle_a{background-color:red;width:30%;height:100%;margin:0 auto;float:left;}
.middle_b{background-color:green;width:38%;height:100%;margin:0 1%;float:left;}
.middle_c{background-color:blue;width:30%;height:100%;margin:0 auto;float:left;}
.bottom{background-color:purple;width:500px;height:100px;margin:1% auto;}
</style>
</head>
<body>
<div class="back">
    <div class="top">TOP</div>
    <div class="middle">
        <div class="middle_a">MIDDLE-A</div>
        　　<div class="middle_b">MIDDLE-B</div> 
        <div class="middle_c">MIDDLE-C</div>
    </div> 
    <div class="bottom">BOTTOM</div>
</div>
</body>
</html> 
 
灰色的为背景层；
然后是处在最上方的TOP橙色块；
中间的黄色块，黄色块上又有三块不同颜色的MIDDLE块；
最下是紫色块。
 
排版的要素主要在于div的嵌套和css的使用。
在div的嵌套上没有太多特点。
因为TOP、MIDDLE、BOTTOM都是放置在背景中的，所以背景div中包含它们所有。
在TOP、MIDDLE、BOTTOM三个平行的div只需顺序写下即可。
因为div是块级元素，所以会自动独占一行。
 
而中间的middle_a、middle_b、middle_c并没有独占一行是因为在css中使用了float使其成为了浮动元素，浮动元素在他的父元素中自动排列开，排列不下会自动转到下一行。
 
错误1：块div和浮动div的混合使用
同时，在平行的div中，应避免块div和浮动div的混合使用，否则容易造成显示混乱。
下图为取消绿色块float:left效果后的效果。
 
 
错误2：width相加100%时，排列错误
此处我们使用了背景色区分块，但如果使用边框线区分块，则可能会遇到该问题。
middle_a、middle_b、middle_c的width值均使用百分比时，相加正好为100%时，middle中摆放不下而自动把第三块换到了下一行。
主要原因是因为边框线也有宽度，所以会因为超出边框线部分的宽度而认为<div class='middle'>中宽度超出。
 
 
 
 
 

【笔记-前端】div+css排版基础，以及错误记录的更多相关文章

  1. DIV+css排版问题技巧总结---v客学院技术分享

                DIV+css排版问题技巧总结 一．排版思路 1.从上到下,从左到右,从大到小. 2.首先确定排版分区,排除色块分布,然后再从简单的部分开始. 3.在某一块内将HTML部分写好 ...

  2. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  3. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

  4. 前端div+css

    css基本结构: css的四种引入方式: 1.行内式:是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <p style="background- ...

  5. 在进行页面的DIV CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。

    当一个img标签没得图片时,在firox中,即使给img标签设置了固定高度和宽度,img标签还是不会站位: 解决方法一:直接将img设置为块状元素:即,设置img为“display:block;”.在 ...

  6. 关于div+css排版布局中需注意的细节问题

    第一个注意点:选择器的使用(标签.class.id) 三种选择器中id(#)的优先级最高,根据id名筛选出唯一元素: 如下输入:#menu{ width:1200px; height:45px; ba ...

  7. 前端html/css/script基础

    1. 基础模板 <!DOCTYPE html> <html> <head> <meta charert="utf-8" /> < ...

  8. 【DM642学习笔记四】flash烧写过程——错误记录…

    (欢迎批评指正) 一,打开.cdd配置文件时出错: 解决:在FlashBurn配置窗口中,Conversion Cmd一栏可不用管:      菜单Program—Download FBTC,load ...

  9. DIV+CSS专题：第一天　XHTML CSS基础知识

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

随机推荐

  1. [每日一题] 11gOCP 1z0-053 :2013-10-7 the backup of MULT_DATA................................32

    转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/12500579 正确答案:D      RMAN 的新增功能 对超大型文件应用 Intraf ...

  2. Unicode和字符集小结

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Unicode和字符集小结.

  3. IOS 10适配https 包含对于一些http的一些兼容配置

    iOS10 从2017年1月1日起苹果提出所有新提交的App默认不允许使用NSAllowsArbitraryLoads来绕过ATS的限制,也就是说强制我们用HTTPS,如果不这样的话提交App可能会被 ...

  4. Linux crontab 命令格式与具体样例

    基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 第4列表示 ...

  5. 【转】CCUserDefault类深入分析——2013-08-25 22

    http://game.dapps.net/gamedev/game-engine/8792.html 另:本章所用Cocos2d-x版本为: 2.1.1 (2013-01-28) 大家好,今天我们来 ...

  6. How to create a PPPoE Server on Ubuntu? (Untested)

    How to create a PPPoE Server on Ubuntu? March 30, 2011 coder_commenter Leave a comment Go to comment ...

  7. 玩转Android之加速度传感器的使用，模仿微信摇一摇

    Android系统带的传感器有很多种,最常见的莫过于微信的摇一摇了,那么今天我们就来看看Anroid中传感器的使用,做一个类似于微信摇一摇的效果. OK ,废话不多说,我们就先来看看效果图吧: 当我摇 ...

  8. Modelsim的自动化脚本仿真平台

    自动化仿真平台由tcl语言搭建,大规模设计使用此平台让仿真便捷不少.大体上用tcl语言进行modelsim仿真的流程如下: 1. 建立库 2. 映射库到物理目录 3. 编译源代码 4. 启动仿真器 5 ...

  9. Atom编辑器入门到精通(二) 插件的安装和管理

    在本节中我们会学习如果安装和使用插件插件是Atom中一个非常重要的组成部分,很多功能都是以插件形式存在的.比如上篇文章中提到的目录树和设置等窗口都是通过默认安装的插件来实现的. 查看已安装的插件 打开 ...

  10. SQL Server 2008 Values 新用途

    SQL Server 2008中新增功能:可以使用单个Insert命令插入多行. Create table Demo_Values (PKID int not null identity(1,1) p ...