知识点：

1.二列自适应宽度
2.二列固定宽度
3.二列固定宽度居中
4.xhtml的块级元素（div）和内联元素（span）
5.float属性
6.三列自适应宽度
7.三列固定宽度
8.三列固定宽度居中
9.IE6的3像素bug
 
1）二列自适应宽度
div为块级元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，需要做css的浮动来实现。
在#side里面加上float:left;即可
说明：当我们不加float时，可以看到div占据的是一行
但是如果加了float：left后，可以看到div是浮动到最左侧，且占据的宽度是我们设置的宽度120px；
详细的关于float的可以观看下面的一篇文章，讲的很详细：http://paranimage.com/css-float-attribute/
 
2）二列固定宽度
和二列自适应宽度不同的是，只要给两个div都是一个固定的宽度即可，比如main的宽度设置为"width:350px;"
 
3）二列固定宽度居中
在使用{float:left;}时，如果再用{margin:auto；}是不起作用的，不能起到居中的作用，是因为{margin:0 auto;}可以让有宽度属性的块级元素水平居中，但它通常只对静态元素（无浮动、无定位）起作用。
在这里我们可以给这两个div加一个父级div，父级div的宽度设置为两个子div的宽度之和，然后让父级div居中。
4）xhtml的块级元素（div）和内联元素（span）
块级元素：就是一个方块，像段落一样，默认占据一行出现，相当于他的之前和之后各插入了一个换行。
一般的块级元素如：段落<p>、标题<h1><h2>...、列表<ul><ol><li>、表格<table>、表单<form>、DIV<div>和BODY<body>等元素
 
内联元素：又叫行内元素，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。
一般的内联元素如：表单元素<input>、超级链接<a>、图像<img>、<span>。。。
 
可以用CSS的display:inline将块级元素变为内联元素，也可以用display:block将内联元素变为块级元素。
 
 
5）float属性
任何元素都可以浮动，浮动会生成一个块级框，且要指明一个宽度，否则它会尽可能的窄，另外当可浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。
查看不加float的样式：
加了float的样式：
从上图可以看出，文字是紧挨着图片的，所以如果我们想让图片和文字有一定间距的话，可以给图片位置的div一个width。
并且如果我们只想让文字在图片右侧显示，不想让他在图片下面显示的话，可以给#main加一个{float:left;}或者{margin-left:310px;}
 
6）三列自适应宽度
三列自适应宽度，一般常用结构是左列和右列固定，中间根据浏览器宽度自适应。
注：三个div的顺序一定要是先把两个浮动的side和side1加上，最后加main，否则side1会跑到下面去，这个暂时没有弄懂原因，先这么记着吧。
 
7）三列固定宽度
如果想让三列固定宽度，与二列固定宽度一样，只要给这三个div加一个固定宽度的父div即可，如果想让他居中，给父div加一个{margin: 0 atuo;}即可
 
8）IE6的3像素bug
将#side和#main中加上{margin-right:-3px;}既可解决这个问题
注：在#side上加上_margin-right:-3px;前面加上一个下划线，这样这个样式专门针对IE6有效，在IE7下还是会正常显示
或者如果三列均是固定宽度的时候，则可以用{float：right;}，因为用上面的方法不能通过W3C验证。

Web标准：三、二列和三列布局的更多相关文章

  1. Web标准：二、一列布局

    知识点: 1.一列固定宽度 2.一列固定宽度居中 3.一列自适应宽度 4.一列自适应宽度居中 5.一列二至多块布局   1)一列固定宽度 下图是定义了一个高300px,宽400px,颜色是#99FFc ...

  2. 关于对WEB标准以及W3C的理解与认识问题

    web标准简单来说可以分为结构.表现和行为.其中结构主要是有HTML标签组成.或许通俗点说,在页面body里面我们写入的标签都是为了页面的结构.表现即指css样式表,通过css可以是页面的结构标签更具 ...

  3. WEB标准以及W3C的理解和认识

    web标准简单来说可以分为结构.表现和行为.其中结构主要是有HTML标签组成.表现即指css样式表,通过css可以是页面的结构标签更具美感.行为是指页面和用户具有一定的交互,同时页面结构或者表现发生变 ...

  4. WEB 标准以及 W3C 的理解与认识

    01.  WEB标准 ①  web标准 简单来说可以分为结构.表现和行为. ②  结构:主要是有HTML标签组成(通俗点说,在页面body里面我们写入的标签都是为了页面的结构)   表现:即指css样 ...

  5. web标准(复习)--3 二列和三列布局

    今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三 ...

  6. Redis总结（五）缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结（一）AutoResetEvent的使用介绍（用AutoResetEvent实现同步） C#总结（二）事件Event 介绍总结 C#总结（三）DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列（六）: RabbitMQ 高可用集群

    Redis总结(五)缓存雪崩和缓存穿透等问题   前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhon ...

  7. web标准(复习)--2 列布局

    今天我们开始学习一列布局,包含以下几种形式: 1.一列固定宽度 2.一列固定宽度居中 3.一列自适应宽度 4.一列自适应宽度居中 5.一列二至多块布局 前一节我们回顾了xhtml基础和css基础部分, ...

  8. Oracle字符串行拆分成列的三种方式

    Oracle字符串行拆分成列的三种方式 --muphy 开发过程中经常会遇到将前台多个值用逗号连接一同传递到后台查询,这个用逗号连接的字符串分隔的每个字符串分别对应Oracle数据库表的不同行. 如下 ...

  9. SQL面试题：有A B C三列,用SQL语句实现：当A列大于B列时选择A列否则选择B列

    .请教一个面试中遇到的SQL语句的查询问题 表中有A B C三列,用SQL语句实现:当A列大于B列时选择A列否则选择B列,当B列大于C列时选择B列否则选择C列. ------------------- ...

随机推荐

  1. C++基本规则

    C++ 程序结构 让我们看一段简单的代码,可以输出单词 Hello World. #include <iostream> using namespace std; // main() 是程 ...

  2. 分布式一致性协议之：Raft算法

    一致性算法Raft详解 背景 熟悉或了解分布性系统的开发者都知道一致性算法的重要性,Paxos一致性算法从90年提出到现在已经有二十几年了,而Paxos流程太过于繁杂实现起来也比较复杂,可能也是以为过 ...

  3. [UE4]让AI跑起来

    让AI由静止状态变成跑步状态,做法跟玩家角色走路一样. 一.创建1D混合动画 二.在AI角色关联的动画蓝图中使用第一步创建的混合动画

  4. 微软&中科大提出新型自动神经架构设计方法NAO

    近期,来自微软和中国科学技术大学的刘铁岩等人发表论文,介绍了一种新型自动神经架构设计方法 NAO,该方法由三个部分组成:编码器.预测器和解码器.实验证明,该方法所发现的架构在 CIFAR-10 上的图 ...

  5. 在 Linux 下使用mdadm创建 RAID 5

    在 RAID 5 中,数据条带化后存储在分布式奇偶校验的多个磁盘上.分布式奇偶校验的条带化意味着它将奇偶校验信息和条带化数据分布在多个磁盘上,这样会有很好的数据冗余. 在 Linux 中配置 RAID ...

  6. css (具体代码看笔记本)

    参考:https://www.cnblogs.com/liwenzhou/p/7999532.html  1. CSS语法   选择器 {属性1:值1;...;}  2. CSS导入方式   1. 行 ...

  7. JavaScript语句和异常

    知识内容: 1.条件语句(分支语句) 2.循环语句 3.with语句 4.异常处理 5.本节练习 参考资料:<JavaScript高级程序设计> 1.条件语句 JavaScript中的条件 ...

  8. Java内存原型分析:基本知识

    转载: Java内存原型分析:基本知识 java虚拟机内存原型 寄存器:我们在程序中无法控制 栈:存放基本类型的数据和对象的引用,但对象本身不存放在栈中,而是存放在堆中 堆:存放用new产生的数据 静 ...

  9. jsp 传多个值给后端

     页面上是这样 http://localhost:8080/smartcloset/getClothByCategory/1/11 直接用/分 后台是这样取的 @RequestMapping(valu ...

  10. Java的Guava

    主要是看代码看到了Table这个类,竟然有两个键! http://www.cnblogs.com/peida/p/3183505.html