DIVCSS布局：CSS浮动float属性详解精品资料.doc
DIV CSS布局：CSS浮动float属性详解在传统的表格布局中，我们对表格应该对齐方式对实现了对布局的应用，而应用Web标准构建网页以后，float浮动属性是布局中非常重要的属性，我们常常通过对div元素应用float浮动来进行布局，不但对整个版式进行规划，也可以对一些基本元素如导航等进行排列。我们来看看float属性基本释义：该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。float属性的参数： none：对象不浮动left：对象浮在左边right：对象浮在右边下面我们通过一些测试来了解可能出现的一些情况，如果float取值为none则不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示，如下图：我们看下面的运行效果：Source Code to Run <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML1.0 Transitional/EN""http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http:/www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type" content="text/html; charset=gb2312" /><title>52CSS</title> <style type="text/css">#content_a width:200px; height:80px; border:1px solid #000;margin:10px; background:#ccc; #content_b width:200px; height:80px;border:1px solid #000; margin:10px; background:#999; </style></head> <body> <div id="content_a">52CSS.com这是第一个DIV</div> <div id="content_b">52CSS.com这是第二个DIV</div> </body> </html> 可先修改部分代码 再运行查看效果 我们对content_a应用向左的浮动。而content_b不应用任何浮动。Source Code to Run <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML1.0 Transitional/EN""http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http:/www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type" content="text/html; charset=gb2312" /><title>52CSS</title> <style type="text/css">#content_a width:200px; height:80px; float:left; border:1px solid#000; margin:10px; background:#ccc; #content_b width:200px;height:80px; border:1px solid #000; margin:10px; background:#999;</style> </head> <body> <divid="content_a">52CSS.com 这是第一个DIV 向左浮动</div> <divid="content_b">52CSS.com 这是第二个DIV 不应用浮动</div> </body></html> 可先修改部分代码 再运行查看效果 我们看在IE6中的效果：我们看在FF中的效果：在IE中，对content_a应用向左的浮动后，content_a向左浮动，content_b在水平方向仅跟着它的后面。在FF中，对content_a应用向左的浮动后，content_b在水平方向容器不可见，只留下了文字。这是由于未清除浮动所造成的现象，关于清除浮动，可以参考这里： （overflow:auto;）这就是IE与FF对此种情况的不同解决，我们在实际布局中，应该避免这样的情况发生。我们同时对这两个容器应用向左的浮动看看发生的现象。Source Code to Run <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML1.0 Transitional/EN""http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http:/www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type" content="text/html; charset=gb2312" /><title>52CSS</title> <style type="text/css">#content_a width:200px; height:80px; float:left; border:1px solid#000; margin:10px; background:#ccc; #content_b width:200px;height:80px; float:left; border:1px solid #000; margin:10px;background:#999; </style> </head> <body> <divid="content_a">52CSS.com 这是第一个DIV 向左浮动</div> <divid="content_b">52CSS.com 这是第二个DIV 向左浮动</div> </body></html> 可先修改部分代码 再运行查看效果 在IE中的效果如图：在FF中的效果如图：在IE与FF中，他们的效果基本取得了一致。在布局中，我们可应用这类IE与FF兼容的方法。我们对content_b应用向左的浮动。而content_a不应用任何浮动。看看是何效果：Source Code to Run <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML1.0 Transitional/EN""http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http:/www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type" content="text/html; charset=gb2312" /><title>52CSS</title> <style type="text/css">#content_a width:200px; height:80px; border:1px solid #000;margin:10px; background:#ccc; #content_b width:200px; height:80px;float:left; border:1px solid #000; margin:10px; background:#999;</style> </head> <body> <divid="content_a">52CSS.com 这是第一个DIV 不应用浮动</div> <divid="content_b">52CSS.com 这是第二个DIV 向左浮动</div> </body></html> 可先修改部分代码 再运行查看效果 在IE中的效果如图：在FF中的效果如图：在IE与FF中均未有太大的变化。在IE中，应用浮动后的content_b却造成了一个双边距的BUY。汗一个先。关于IE的双边距BUY请参考这里：向左浮动会出现何种状态呢？在向右浮动后，最大的变化就是在HTML中，前面的元素在最右边，后面的元素跑到了最左边。我们对上面代码中的两个元素同时应用向右的浮动看看效果。Source Code to Run <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML1.0 Transitional/EN""http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http:/www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type" content="text/html; charset=gb2312" /><title>52CSS</title> <style type="text/css">#content_a width:200px; height:80px; float:right; border:1px solid#000; margin:10px; background:#ccc; #content_b width:200px;height:80px; float:right; border:1px solid #000; margin:10px;background:#999; </style> </head> <body> <divid="content_a">52CSS.com 这是第一个DIV 向右浮动</div> <divid="content_b">52CSS.com 这是第二个DIV 向右浮动</div> </body></html> 可先修改部分代码 再运行查看效果 在IE中的效果如图：在FF中的效果如图：同时对两个元素应用向右的浮动基本保持了一致，但请注意方向性，第二个在左边，第一个在右边。对于其它页面构成元素，浮动的原理基本是一样的，大家多动手测试，才能有更进一下的认识。学习CSS就是多动手，多写代码，必有收获！附录资料：从 XML 生成可与 Ajax 共同使用的 JSON时下，非常流行使用 JavaScript 代码为数据驱动的 Web 应用程序添加互动性。若能将数据编码成 JavaScript Object Notation（JSON）的格式，您就可以更轻松地通过 JavaScript 语言使用它。通过本文，发掘使用 XSLT V2 从 XML 数据生成 JSON 的几种不同方法。几年前，许多开发人员很看好 XML、XSLT、Extensible HTML （XHTML）和其他一些基于标记的语言。现在，Asynchronous JavaScript and XML（AJAX）成了新的热点，人们又将目光转向了使用 JavaScript 代码的数据驱动的富 Internet 应用程序。但是开发人员是否已经消除了 XML 和这一新技术之间的鸿沟呢？当然，您可以在 Web 客户机中使用 XML 解析器来读取数据，但这种做法会带来两个问题。第一，出于安全方面的原因，XML 数据只能从与此页面相同的那个域中读取。这虽然不是什么大的限制因素，但它的确会引起部署方面的问题，还会阻碍 DHTML 小部件的创建。第二，读取和解析 XML 会非常慢。另一种做法是让服务器执行 XML 的解析工作，方法是设置服务器，使之向浏览器发送以 JavaScript 代码或时下流行的 JavaScript Object Notation（JSON）编码的数据。本文将展示如下三种使用 XSLT V2 语言和 Saxon XSLT V2 处理器从 XML 数据生成 JSON 的技巧： l 简单编码 l 通过函数调用加载数据 l 编码对象 JSON 简介要学习如何将数据编码成 JSON（它只是 JavaScript 的一个子集），最好的方法是从数据开始。清单 1 显示了书籍列表的一个示例 XML 数据集。清单 1. 基本的图形化图书馆<?xml version="1.0" encoding="UTF-8"?><books> <book id="1"> <title>Code Generation in Action</title> <author><first>Jack</first><last>Herrington</last></author> <publisher>Manning</publisher> </book> <book id="2"> <title>PHP Hacks</title> <author><first>Jack</first><last>Herrington</last></author> <publisher>O'Reilly</publisher> </book> <book id="3"> <title>Podcasting Hacks</title> <author><first>Jack</first><last>Herrington</last></author> <publisher>O'Reilly</publisher> </book></books>这个数据集很简单，只包含三本书，每本书都具有惟一的 ID、书名、作者姓名及出版商的名字。（没错，我只选择了我自己的书作为数据集，但能怨我吗？这些书实在是不可多得的节日和生日礼物。）清单 2 显示了这些数据在 JSON 中的效果。清单 2. JSON 中的示例数据集 id: 1, title: 'Code Generation in Action', first: 'Jack', last: 'Herrington', publisher: 'Manning' , . 方括号 () 表明这是一个数组。大括号 () 则表明这是一个散列表，该散列表由一组名称和值对组成。在本例中，我创建了一个散列表的数组 用来存储这类结构式数据的一种常见方法。另外一点值得注意的是字符串是通过单引号或双引号被编码的。所以，如果我想用单引号编码 O'Reilly，我就必须使用反斜杠对它进行转义：'O'Reilly'。 这让我编写的这个 XSLT 样式表更为有趣了一些。我并未在本例中放上任何日期，但您也可以通过如下两种方法来编码日期。第一种方法是将日期作为字符串，该字符串必须在后面被解析。第二种方法是将日期作为一个对象，比如：publishdate: new Date( 2006, 6, 16, 17, 45, 0 )这段代码将 publishdate 的值设置为6/16/2006 5:45:00 p.m.。简单编码接下来我将陆续介绍 JSON 编码的几种技巧。第一种也是其中最简单的一种，此样式表如 清单 3 所示。清单 3. simple.xsl 样式表<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet xmlns:xsl="http:/www.w3.org/1999/XSL/Transform" version="2.0" xmlns:js=""> <xsl:output method="text" /><xsl:function name="js:escape"><xsl:param name="text" /><xsl:value-of select='replace( $text, "'", "'" )' /></xsl:function><xsl:template match="/">var g_books = <xsl:for-each select="books/book"><xsl:if test="position() > 1">,</xsl:if> id: <xsl:value-of select="id" />,name: '<xsl:value-of select="js:escape(title)" />',first: '<xsl:value-of select="js:escape(author/first)" />',last: '<xsl:value-of select="js:escape(author/last)" />',publisher: '<xsl:value-of select="js:escape( publisher )" />'</xsl:for-each></xsl:template></xsl:stylesheet>要理解此样式表，不妨先来看一下 清单 4 所示的输出。清单 4. simple.xsl 的输出var g_books = id: 1,name: 'Code Generation in Action',first: 'Jack',last: 'Herrington',publisher: 'Manning', id: 2,name: 'PHP Hacks',first: 'Jack',last: 'Herrington',publisher: 'O'Reilly', id: 3,name: 'Podcasting Hacks',first: 'Jack',last: 'Herrington',publisher: 'O'Reilly'这里，我将名为 g_books 的变量设置为一个包含三个散列表的数组，每个散列表包含关于该书的信息。再回过头来看看 清单 3，您会发现第一个模板匹配 "/" 路径，它也是首先应用到输入数据集的模板，该模板使用 for-each 循环来遍历每本书。之后，它使用 <value-of> 标记来将文本从该数据输出到 JavaScript 输出代码。对于字符串，我使用名为 js:escape() 的定制函数，它在模板之前定义。该函数使用一个正则表达式将一个单引号标记更改为带有反斜杠的单引号标记。最后一个重要的元素是 <xsl:output> 标记，它告知处理器要输出的是文本而不是 XML。要检验此过程是否可以正常工作，我加入了一个 simple .html 文件，该文件引用我在 simple.js 保存的 XSL 样式表的输出。这个 HTML 文件如 清单 5 所示。清单 5. simple.html 文件<html><head><title>Simple JS loader</title><script src="simple.js"></script></head><body><script>document.write( "Found "+g_books.length+" books" );</script></body></html>.html 文件使用 <script> 标记简单地加载已编码了的 JavaScript 代码。之后，第二个 <script> 标记将数组的长度写出到浏览器页面，如 图 1 所示。图 1. simple.html 的输出好了！数据文件包含三本书，相应的 JavaScript 文件也包含三本书。它真的可以工作！通过函数加载上述第一个示例很简单，而且在大多数情况下可以发挥其作用，但它存在一些问题。第一个问题是对于数据何时被加载没有任何提示。如果数据是像页面那样被静态加载的，这不成问题。但是如果页面动态创建了一个 <script> 标记来按需加载数据，那么就很有必要知道 <script> 标记是何时完成的。实现此功能的最好的方法是让编码了的数据调用一个 JavaScript 函数，而不是只设置数据。这个概念很重要，所以我将花一些时间来介绍一下为什么您必须要通过动态生成的 <script> 标记来加载数据。页面加载后，从服务器获得数据是 Web 2.0 的核心功能。一种方法是使用 AJAX 机制通过到服务器的调用来加载 XML。然而，出于安全性的原因，AJAX 机制只限于从单一域获取数据。这在大多数情况下都没有问题，但有时，您可能需要 JavaScript 代码运行在他人的页面上（例如，Google Maps）。在这种情况下从服务器获得数据的惟一方法是通过动态加载 <script> 标记。获悉 <script> 标记何时加载的最好的方法是让 <script> 标记返回的脚本调用函数而不是简单地加载数据。清单 6 显示了在函数调用中编码的数据。清单 6. Function1.jsAddBooks( id: 1,name: 'Code Generation in Action',first: 'Jack',last: 'Herrington',publisher: 'Manning', id: 2,name: 'PHP Hacks',first: 'Jack',last: 'Herrington',publisher: 'O'Reilly', id: 3,name: 'Podcasting Hacks',first: 'Jack',last: 'Herrington',publisher: 'O'Reilly' );清单 7 给出了相应的 .html 文件。清单 7. Function1.html<html><head><title>Function 1 JS loader</title><script>var g_books = ;function AddBooks( books ) g_books = books; </script><script src="function1.js"></script><script src="drawbooks.js"></script></head><body><script>drawbooks( g_books );</script></body></html>稍后将详细介绍 drawbooks 函数。这里重要的是了解一下页面如何定义 AddBooks 函数，该函数随后会由 function1.js 文件中的脚本调用。该 AddBooks 函数负责处理数据。而且被调用的 AddBooks 函数会向页面指示 <script> 标记被正确加载，并已加载完成。要创建 function1.js 文件，我只对样式表稍微做了一点修改，如 清单 8 所示。清单 8. function1.xsl 样式表<xsl:template match="/">AddBooks( <xsl:for-each select="books/book"><xsl:if test="position() > 1">,</xsl:if> id: <xsl:value-of select="id" />,name: '<xsl:value-of select="js:escape(title)" />',first: '<xsl:value-of select="js:escape(author/first)" />',last: '<xsl:value-of select="js:escape(author/last)" />',publisher: '<xsl:value-of select="js:escape( publisher )" />'</xsl:for-each> );</xsl:template>这里，我调用了一个函数，而不是简单地设置一个变量。这就是我所做的惟一更改。回到页面，我使用了 drawbooks 函数来构建书的表格，这样我就能够确认数据被正确编码和正确显示。此函数是在 drawbooks.js 内定义的，如 清单 9 所示。清单 9. Drawbooks.jsfunction drawbooks( books ) var elTable = document.createElement( 'table' ); for( var b in books ) var elTR = elTable.insertRow( -1 ); var elTD1 = elTR.insertCell( -1 ); elTD1.appendChild( document.createTextNode( booksb.id ) ); var elTD2 = elTR.insertCell( -1 ); elTD2.appendChild( document.createTextNode( booksb.name ) ); var elTD3 = elTR.insertCell( -1 ); elTD3.appendChild( document.createTextNode( booksb.first ) ); var elTD4 = elTR.insertCell( -1 ); elTD4.appendChild( document.createTextNode( booksb.last ) ); var elTD5 = elTR.insertCell( -1 ); elTD5.appendChild( document.createTextNode( booksb.publisher ) ); document.body.appendChild( elTable );这个简单函数创建了一个表格节点，然后循环访问书的列表并为每本书创建一行，为每个数据元素分配一个单元格。此页面上的代码的结果如 图 2 所示。图 2. function1.html 的结果现在我就可以查看一下此页面的输出并确认来自原始 .xml 文件的一切均已被正确转换成 JavaScript 代码，且数据被发送到 AddData 函数并被正确添加到页面。细化函数调用技术我很喜欢函数调用这一技术，但我并不赞同将所有图书数据都放入一个块中。另一种方式是为每条记录采用一个调用，如 清单 10 所示。清单 10. Function2.jsAddBook( id: 1,name: 'Code Generation in Action',first: 'Jack',last: 'Herrington',publisher: 'Manning' );AddBook( id: 2,name: 'PHP Hacks',first: 'Jack',last: 'Herrington',publisher: 'O'Reilly' );.对 .html 页面只需做少许修改，如 清单 11 所示。清单 11. Function2.html.<script>var g_books = ;function AddBook( book ) g_books.push( book ); </script>.这里更改了 XSLT，以使函数调用驻留在 for-each 循环体内。清单 12 显示了更新后的样式表。清单 12. function2.xsl.<xsl:template match="/"><xsl:for-each select="books/book">AddBook( id: <xsl:value-of select="id" />,name: '<xsl:value-of select="js:escape(title)" />',first: '<xsl:value-of select="js:escape(author/first)" />',last: '<xsl:value-of select="js:escape(author/last)" />',publisher: '<xsl:value-of select="js:escape( publisher )" />' );</xsl:for-each></xsl:template>.对这个给定示例来说，这种更改看起来有些随意。但如果原始的 XML 数据集有多种数据类型，要为每种类型分配一个单独的函数调用会使 XSL 和页面上的 JavaScript 代码更为简单、更易于维护。编码对象对小的页面来讲，使用 JavaScript 函数没有问题。但对于大型项目，就需要使用 JavaScript 语言的一些面向对象特性。是的，JavaScript 语言可以处理对象而且可以处理得很好。清单 13 显示了如何创建带有数据的对象。清单 13. Object1.jsg_books.push( new Book( id: 1,name: 'Code Generation in Action',first: 'Jack',last: 'Herrington',publisher: 'Manning' ) );g_books.push( new Book( id: 2,name: 'PHP Hacks',first: 'Jack',last: 'Herrington',publisher: 'O'Reilly' ) );在本例中，我只简单地向名为 g_books 的数组添加了 Book 对象。JavaScript 的对象创建与 Java、C# 或 C+ 编程语言的对象创建十分相似。都是一个 new 操作符后跟一个类名。参数放到随后的括号内。在本例中，我传入了一个带值的单一散列表，并将其分割成单独的一些参数。创建此对象的代码如 清单 14 所示。清单 14. Object1.xsl<xsl:template match="/"><xsl:for-each select="books/book">g_books.push( new Book( id: <xsl:value-of select="id" />,name: '<xsl:value-of select="js:escape(title)" />',first: '<xsl:value-of select="js:escape(author/first)" />',last: '<xsl:value-of select="js:escape(author/last)" />',publisher: '<xsl:value-of select="js:escape( publisher )" />' ) );</xsl:for-each></xsl:template>此页面内最值得注意的是定义 Book 类的那部分代码。清单 15 显示了该页面。清单 15. object1.html.<script>var g_books = ;function Book( data ) for( var d in data ) thisd = datad; </script>.Book 类的构造函数循环访问散列表的所有数据。对于每个键，会在对象上创建一个具有对象名称和数据的实例变量。不需要对 drawbooks 函数做任何修改，因为对象都有与原始的散列表相同的键和值。JavaScript 语言并不区分访问的是散列表内的命名值还是对象上的命名值。当然，Book 类应该有像 set 和 get 这样的访问程序。 清单 16 显示了我是如何对 JavaScript 数据进行编码的。清单 16. Object2.jsvar b1 = new Book();b1.setId ( 1 );b1.setTitle ( 'Code Generation in Action' );b1.setFirst ( 'Jack' );b1.setLast ( 'Herrington' );b1.setPublisher ( 'Manning' );g_books.push( b1 );var b2 = new Book();b2.setId ( 2 );b2.setTitle ( 'PHP Hacks' );.没错，这有些大同小异。它也是先创建一个对象，设置其值，然后将它添加到数组，等等。首先，我对样式表做了一些较大的修改，如 清单 17 所示。清单 17. Object2.xsl.<xsl:function name="js:createbook"><xsl:param name="book" /><xsl:variable name="b" select="concat( 'b', $book/id )" />var <xsl:value-of select="$b" /> = new Book();<xsl:value-of select="concat( $b, '.setId' )" />( <xsl:value-of select="$book/id" /> );<xsl:value-of select="concat( $b, '.setTitle' )" />( '<xsl:value-of select="js:
