现在的网站对于前端的排版已经逐渐不使用<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. javascript闭包问题

    <script type="text/javascript"> window.onload = function(){ var name = "The Win ...

  2. 前景还是“钱景”——MM应用引擎的自我博弈

    纵观当前的移动互联网发展态势,巨大的商机已经展露无遗,各个领域的企业及个人对于APP的开发如火如荼,许多APP从诞生伊始,就面临着软件开发的专业性,商业模式的模糊性,以及市场推广的艰巨性三个巨大难题, ...

  3. 来自奢侈品行业的CEO能给苹果带来什么？

    重回苹果的奢侈品大佬:保罗丹诺威 作为伊夫·圣罗兰(Saint Laurent)时尚集团的前CEO,保罗丹诺威(Paul Deneve)9月将正式加入苹果公司,并负责该公司所谓的“特殊项目”,同时直接 ...

  4. css3随笔

    1 rgba和opacity的区别 RGBA即红色R+绿色G+蓝色B+通道Alpha 语法: R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数| 百分数 A:透明度. ...

  5. PTA 5-12 How Long Does It Take (25分)

    这题看不太懂题目啊~  参考的http://blog.csdn.net/qq_26437925/article/details/49420089?locationNum=6&fps=1 先放着 ...

  6. Fast特征检测

    一.Fast算法 1.基本原理 Fast特征点检测feature2D原理是在圆周上按顺时针方向从1到16的顺序对圆周像素点进行编号.如果在圆周上有N个连续的像素的亮度都比圆心像素的亮度Ip加上阈值t还 ...

  7. linux 内核 编绎配制选项详解

    http://blog.sina.com.cn/s/blog_8308bc810102ux0j.html

  8. 【转】C/C++中的日期和时间 TIME_T与STRUCT TM转换——2013-08-25 16

    http://www.cnblogs.com/Wiseman/archive/2005/10/24/260576.html 摘要: 本文从介绍基础概念入手,探讨了在C/C++中对日期和时间操作所用到的 ...

  9. 【转】Win7环境下VS2010配置Cocos2d-x-2.1.4最新版本的开发环境(亲测)

    http://blog.csdn.net/ccf19881030/article/details/9204801 很久以前使用博客园博主子龙山人的一篇博文<Cocos2d-x win7+vs20 ...

  10. 混合文件系统（ramdisk+jffs）

    背景知识: 一.Ramdisk文件系统: 1.掉电丢失 2.读写速度高 3.数据存储到内存 二.jffs文件系统 1.掉电不丢失 2.可存储于NOR NAND,但是适用于NOR 3.数据存储于flas ...