现在的网站对于前端的排版已经逐渐不使用<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. 关于手机短信验证码存session 获取不到的问题

    问题描述:最近做一个项目,手机端注册,服务端产生一个验证码,通过短信发送到手机,并存放到session中,但手机端发送第二次请求传回验证码,要对两个验证码进行比较判断时,session存放的验证码丢失 ...

  2. 如何将Android默认的Camra程序导入到eclipse中

    由于工作需要将camera源码导入到Eclipse中,找了很多的方法,现将自己的整理发出来.... 由于开发的要求,需要将Android默认的Camra程序导入到eclipse中,进行修改和再开发. ...

  3. 清理Win8.1更新冗余的批处理代码

    以下为批处理文件内容,复制到文本文件,另存为.bat文件,以管理员方式运行即可. @echo off title 清理Win8.1更新冗余 color 2e echo 提示:本程序可能需要以管理员方式 ...

  4. Sublime Text 3103 Crack 破解 注册码

    随机复制下面的几四个注册码 粘贴到sublime text 3(Build 3103)注册框 就可以了! ----------------------------------------------- ...

  5. C++ Combobox输入时自动完成

    Combobox 在输入时自动完成 关键点 实现过程 BOOL m_bAuto; BOOL CProject02Dlg::PreTranslateMessage(MSG* pMsg)  {     i ...

  6. iOS开发中WebP格式的64位支持处理

    几个月前我们项目中添加了对webp格式的处理.期间遇到了一些问题,这是当中的一个小的记录. 官方下载地址:https://code.google.com/p/webp/downloads/list 对 ...

  7. 用Python和FFmpeg查找大码率的视频文件

    用Python和FFmpeg查找大码率的视频文件 本文使用Python2.7, 这个工作分两步 遍历目录下的视频文件 用ffprobe获取是视频文件的码率信息 用ffprobe 获取json格式的视频 ...

  8. android 程序打开第三方程序

    因为在开发过程中需要开启扫描第三方程序,并且点击启动的效果,所以对这个功能进行了实现,并且分享出来个大家. 之前看到网上说需要获取包名和类名,然后通过  intent 才能打开这个程序,其实不必要这样 ...

  9. Centos7.0挂载优盘安装jdk1.7和tomcat7.0

    Centos7.0挂载优盘安装jdk1.7和tomcat7.0 前言: 笔者发现用wget方法直接在服务器下载jdk和tomcat速度很慢,而且jdk1.7用wget方法下载链接不好找,不如直接从官网 ...

  10. 动态使用webservice,以及含有ref类型的参数的问题

    public class WSHelper { /// < summary> /// 动态调用web服务 /// < /summary> /// < param name ...