今天学习二列和三列布局,将涉及到以下内容和知识点

二列自适应宽度
二列固定宽度
二列固定宽度居中
xhtml的块级元素(div)和内联元素(span)
float属性
三列自适应宽度
三列固定宽度
三列固定宽度居中
IE6的3像素bug

一、两列自适应宽度
下面以常见的左列固定右列自适应为例,因为div为块状元素,默认情况下占据一行的空间,要想让下面的div跑到右侧,就需要做助css的浮动来实现。首先创建html代码如下:

<style>
#side { background-color:#99FF99;height: 300px; width: 120px; float: left; }
#main2 { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }
</style>
<div id="side">此处显示 id "side" 的内容</div>
<div id="main2">此处显示 id "main" 的内容</div>)

二、两列固定宽度
有了前面的基础,两列固定宽度就容易多了,只需要把#main的宽度由百分比改为固定值,如下图:

<style>
#side3 { background-color:#99FF99;height: 300px; width: 120px; float: left; }
#main3 { background: #99FFFF; height: 300px; width: 400px; margin-left: 120px; }
</style>
<div id="side3">此处显示 id "side" 的内容--固定</div>
<div id="main3">此处显示 id "main" 的内容--固定</div>)

三、两列固定宽度居中
两列固定宽度居中,需要在两列固定宽度的基础上改进,在学一列固定宽度居中时,我们知道让它居中的方法,所以这里需要在这两个div之外再加一个父div:

<style>
#side3 { background-color:#99FF99;height: 300px; width: 120px; float: left; }
#main3 { background: #99FFFF; height: 300px; width: 400px; margin-left: 120px; }
#content { width:470px; margin:0 auto;}
</style>
<div id='content'>
<div id="side3">此处显示 id "side" 的内容--固定</div>
<div id="main3">此处显示 id "main" 的内容--固定</div>
</div>

四、xhtml的块级元素(div)和内联元素(span)
块级元素:就是一个方块,像段落一样,默认占据一行出现;

内联元素:又叫行内元素,顾名思义,只能放在行内,就像一个单词,不会造成前后换行,起辅助作用。

一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。

块级元素默认占据一行,相当于在它之前和之后各插入了一个换行;而内联元素span没对显示效果造成任何影响,事实也是如此;em只是让字体变成了斜体,也没有单独占据一行。这就是块级元素和内联元素,正因为有了这些元素,才使我们的网页变得丰富多彩。

如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是说,可以用css的display:inline将块级元素改变为内联元素,也可以用display:block将内联元素改变为块元素。

五、float属性
回到我们的例子当中,理解了块级元素和内联元素,对理解浮动就容易多了。float是个重点,希望大家都能理解。上例中用float让元素向左浮动,在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素;且要指明一个宽度,否则它会尽可能地窄;另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间

六、三列自适应宽度
三列自适应宽度,一般常用的结构是左列和右列固定,中间列根据浏览器宽度自适应。下面在二列自适应宽度基础上修改一下

<style>
#side4 { background-color:#99FF99;height: 300px; width: 120px; float: left; }
#side41 { background-color:#99FF99;height: 300px; width: 120px; float: right;}
#main4 { background: #99FFFF; height: 300px; margin:0 100px; }
</style>
<div id="side4">此处显示 id "side" 的内容</div>
<div id="side41">此处显示 id "side1" 的内容</div>
<div id="main4">此处显示 id "main" 的内容</div>

七、三列固定宽度
三列固定宽度可以在三列自适应基础上添加一个父div,并设置这个div的宽度即可,如下,添加一个id为content的父容器。

在源代码里选中这三个div,然后点击工具栏上的“插入div标签”按钮,这时弹出的窗口插入项会默认为:在选定的内容旁换行,输入id为content,然后给这个div定义个宽度

<style>
#side4 { background-color:#99FF99;height: 300px; width: 120px; float: left; }
#side41 { background-color:#99FF99;height: 300px; width: 120px; float: right;}
#main4 { background: #99FFFF; height: 300px; margin:0 100px; }
#content2{ margin: 0 auto; width:500px}
</style>
<div id='content2'>
<div id="side4">此处显示 id "side" 的内容</div>
<div id="side41">此处显示 id "side1" 的内容</div>
<div id="main4">此处显示 id "main" 的内容</div>
</div>

八、IE6的3像素bug
3像素bug是IE6的一个著名的bug,当浮动元素与非浮动元素相邻时,这个3像素的Bug就会出现。看下面这个左列固定,右列液态的例子,css代码如下:

body { margin:0;}
#side { float: left; background:#99FF99; height: 300px; width: 120px;}
#main { background: #99FFFF; height: 300px;}

html代码如下:

<div id="side">此处显示 id "side" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>

IE6会在两个div中间加上3px的空隙,那么要解决这个问题,请在#side上加上_margin-right:-3px;记住,前边加上一下划线,这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。

body { margin:0;}
#side { float: left; background:#99FF99; height: 300px; width: 120px; _margin-right:-3px;}
#main { background: #99FFFF; height: 300px; }

但它不能通过W3C验证。当两列固定宽度时,最好把#main也固定宽度且向右浮动,这样就可以避免IE6的3像素bug了。

web标准(复习)--3 二列和三列布局的更多相关文章

  1. web标准(复习)--6 html列表

    今天我们开始学习html列表,包含以下内容和知识点: ul无序和ol有序列表 改变项目符号样式或用图片定义项目符号 横向图文列表 浮动后父容器高度自适应 IE6的双倍边距bug 一.ul无序和ol有序 ...

  2. Web标准:三、二列和三列布局

    知识点: 1.二列自适应宽度 2.二列固定宽度 3.二列固定宽度居中 4.xhtml的块级元素(div)和内联元素(span) 5.float属性 6.三列自适应宽度 7.三列固定宽度 8.三列固定宽 ...

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

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

  4. web标准(复习)--1

    XHTML CSS基础知识 一.xhtml css基础知识首先说一下我们这节课的知识点 1.文档类型 2.语言编码 3.html标签 4.css样式 5.css优先级 6.css盒模型组成 1)文档类 ...

  5. CSS两列及三列自适应布局方法整理

    布局 自适应 两列 三列 在传统方法的基础上加入了Flex布局并阐述各方法的优缺点,希望对大家有所帮助.先上目录: 两列布局:左侧定宽,右侧自适应 方法一:利用float和负外边距 方法二:利用外边距 ...

  6. web标准(复习)--8

    今天我们开始学习下拉及多级弹出菜单,包含以下内容和知识点: 带下拉子菜单的导航菜单 绝对定位和浮动的区别和运用 css自适应宽度滑动门菜单 一.带下拉子菜单的导航菜单下拉菜单在一些企业网站应用尤为广泛 ...

  7. web标准(复习)--5 超链接伪类

    今天我们开始学习超链接伪类,包含以下内容和知识点: 链接的四种样式 将链接转换为块状 用css制作按钮 首字下沉 一.超链接的四种样式 超链接可以说是网页发展史上一个伟大的发明,它使得许多页面相互链接 ...

  8. web标准(复习)--4 纵向导航菜单及二级弹出菜单

    今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...

  9. web标准(复习)--7 横向导航菜单

    今天我们开始学习html列表,包含以下内容和知识点: 横向列表菜单 用图片美化的横向导航 css Sprites 一.横向列表菜单前边学习过纵向导航菜单,又学习了float属性,那么要实现横向导航菜单 ...

随机推荐

  1. java各种排序实现

    排序是程序开发中一种非常常见的操作,对一组任意的数据元素(或记录)经过排序操作后,就可以把他们变成一组按关键字排序的有序队列. 对一个排序算法来说,一般从下面3个方面来衡量算法的优劣: 时间复杂度:它 ...

  2. USB的逻辑值和用途值有什么区别?

    用途最小值,用途最大值.逻辑最小值,逻辑最大值分别是什么意思?如题: code uint8 ReportDescriptor[]= { //每行开始的第一字节为该条目的前缀,前缀的格式为: //D7~ ...

  3. USACO6.5-Closed Fences:计算几何

    Closed Fences A closed fence in the plane is a set of non-crossing, connected line segments with N c ...

  4. JVM运行原理及Stack和Heap的实现过程

    Java语言写的源程序通过Java编译器,编译成与平台无关的‘字节码程序’(.class文件,也就是0,1二进制程序),然后在OS之上的Java解释器中解释执行,而JVM是java的核心和基础,在ja ...

  5. uva 10714 Ants(贪心)

    题目连接:10714 - Ants 题目大意:一根棍子上有n只蚂蚁, 这些蚂蚁开始可以任意朝着一个方向移动一直走,向左或是向右,并且移动速度是相同的,但是一旦蚂蚁碰到迎面走来的另一只蚂蚁,那么这两只蚂 ...

  6. js时间基本操作

    js 获取前一天的时 var today=new Date(); var yesterday_milliseconds=today.getTime()-1000*60*60*24; var yeste ...

  7. Jmeter接口测试-badboy录制脚本(二)

    1.脚本录制,采用badboy进行录制,操作步骤很简单 2.badboy简介: Badboy是一款免费WEB自动化测试工具. 官方下载地址:http://www.badboy.com.au badbo ...

  8. POJ 1637 混合图求欧拉回路 最大流实现

    前面讲过了无向图,有向图求欧拉回路,欧拉通路的做法.可以直接根据度数来判断,当然前提是这是一个连通图. 这道题既有无向边,又有有向边,然后求欧拉回路. 采用的方法是最大流. 具体处理方法. 首先,我们 ...

  9. Android Studio 初体验

    Google在I/O */

  10. ubuntu安装python3.5

    ubuntu14.04系统会自带python2.7,请不要卸载它.不同版本的Python可以共存在一个系统上. 卸载之后,桌面系统会被影响. (1)sudo add-apt-repository pp ...