现在的网站对于前端的排版已经逐渐不使用<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. PHP函数补完：var_export()

    var_export() 函数返回关于传递给该函数的变量的结构信息,它和 var_dump() 类似,不同的是其返回的表示是合法的 PHP 代码.var_export必须返回合法的php代码, 也就是 ...

  2. php静态方法与非静态方法在性能上有什么区别？

    先贴代码如下: class class1 { public static function test(){} } class class2 { public function test(){} } v ...

  3. 非常实用的Android Studio快捷键

    One—打印Log 生成tag: logt 打印log: logm logd loge Two—代码提示 Ctrl + Alt + Space Three—代码移动 选中代码: Ctrl + w 向 ...

  4. Delphi- 调用存储过程的方法

    Delphi控件里拉一个TADOStoredProc,配置好相关链系,具体的操作列子如下: procedure TForm1.btnFirstClick(Sender: TObject); begin ...

  5. WebSerivce测试工具 Storm

    STORM 是一款免费且开源的WebSerivce测试工具 它的功能: 1,测试任意语言测试 WebService 2,可动态调用webservice的方法,即使输入参数需要使用复杂的数据类型 3,节 ...

  6. OR 改写union数据变少

    <pre name="code" class="sql">SQL> SELECT deptno FROM emp WHERE mgr = 76 ...

  7. 走进C++程序世界-----继承和派生（2）

    覆盖基类的函数 覆盖基类函数顾名思义就是在派生类中对基类的函数进行的重新定义.这里将会讲到下面的2个知识点: 1.隐藏基类的方法 2.调用基类的方法(隐式和显示调用基类的方法) /* *derive2 ...

  8. android 沉浸通知栏

    IOS的沉浸式通知栏很高大上,通知栏和app统一颜色或样式,很美观.android上面也早就人实现这种效果了. 我在这边也写一个实现通知栏沉浸式的方法,目前只实现了相同颜色. 先要改布局文件xml & ...

  9. [转]使用Beaglebone Black的SPI

    分类: Beaglebone Black2013-11-24 18:21 678人阅读 评论(6) 收藏 举报 beaglebone blackbeagleboneSPIdevice tree   目 ...

  10. iOS/object-c: 枚举类型 enum,NS_ENUM,NS_OPTIONS

    一般情况下,我们采用C风格的enum关键字可以定义枚举类型. enum{ UIViewAnimationTransitionNone, UIViewAnimationTransitionFlipFro ...