现在的网站对于前端的排版已经逐渐不使用<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. A Tour of Go Slices

    A slice points to an array of values and also includes a length. []T is a slice with elements of typ ...

  2. Unity手游之路<六>游戏摇杆之Easy Touch 3教程

    之前已经介绍过Unity自带的摇杆Joystick,它用起来很简单.但是它也存在很多局限,不能全部满足普通mmo手游的一些需求,例如:要能方便地更好素材:能指定在某个区域显示,或者只有在该区域触摸时才 ...

  3. android httpClient 支持HTTPS的2种处理方式

    摘自: http://www.kankanews.com/ICkengine/archives/9634.shtml 项目中Android https或http请求地址重定向为HTTPS的地址,相信很 ...

  4. iOS 使用CLGeocoder获取地理位置

    placemark(MKPlacemark类的对象)其实是geocoder(MKReverseGeocoder类的对象)的一个属性.从geocoder里面取placemark这个和直接取placema ...

  5. MySQL启动和关闭服务命令

    MySQL启动和关闭服务命令 1.启动服务命令 net start mysql 2.关闭服务命令 net stop mysql

  6. matlab两种不同模式的并行运算

    1.distributed job      distributed job是一种比較简单的并行任务.假定用户须要完毕一组作业.各个计算作业之间是独立的.并且相互之间不须要进行数据通信.这意味着各个作 ...

  7. Objective C 代码片段(类别)

    @interface NSString (reverse) -(NSString *) reverseString; @end @implementation NSString (reverse) - ...

  8. cocos2d-x jsb 防止触摸事件传递

    在游戏中要实现消息弹窗,让用户点击确认,其他区域产生遮罩,阻挡下层的事件被点击到,这是个很常用的功能,在cocos2d-x中,可以通过为layer添加事件代理来实现: pDirector->ge ...

  9. kcachegrind gui for callgrind

    DocumentationScreenshotsDownload/SourcesLinksRoadmapBugs & Wishes This is the homepage of the pr ...

  10. ODB 下载与安装 （Linux）

    http://www.codesynthesis.com/products/odb/download.xhtml Installing ODB on UNIX Introduction This gu ...