网页布局

网页布局


当我们打开一个网页的源码, 往往被大量的标签,CSS样式,JavaScript代码,各种属性吓到, 这也太复杂了吧? 浏览器真强, 居然能把这么"杂乱"的文档解析成网页呈现出来, 而且还要动态的处理数据和用户的交互.


事实上网页虽然看起来很复杂, 但是网页知识的主要内容并不是很多, 这就是为什么经过简单的培训, 一般人们就能制作简单的网页. 网页的解析遵循的标准不止一个, 按这些庞大的标准, 浏览器的解析的确是一个比较复杂的过程, 但是如果关注基本的知识, 搞懂网页最主要的应用最多的部分内容, 就没有那么恐怖了, 其实可以很快搞懂, 今天我们就来写一点网页的布局知识.


网页是一门标记语言, 是XML的一种, 再庞大的网页, 都是按这些标记写的. 而标记的规则很简单: 一个HTML标签由尖括号括起来, 并且尖括号和第一个字母不能有空格, HTML标签都是配对的, 比如有<a>必须后面有</a>这样一个相同名称加了个斜杠的标签, 有些标签可以简写成<img />这种形式, 它本身就代一个标签对. 标签就像括号, 严格来说, 标签定义了很多类型的括号, 所以, 标签的配对必须是对称的, 就是<a><b></b></a>这样是正确的, 而<a><b></a></b>这样是不正确的, 因为交错配对了.


标签作为括号, 不是标签的文本就是内容, 那么复杂的网页, 我们复制的时候, 浏览器怎么把文字提取出来呢? 很简单, 就是凡是标签外部的文本, 都是内容, 只要复制它们就行了.当然, 其实还有一些规定, 特定的标签内的文本是不复制的, 比如<style>,<script>标签内的文本都不算显示的内容, 但是, 实际上在分类上, 它们仍然算内容.


标签的作用实际上就是指示浏览器如何呈现它的内容, 包括是作为样式还是脚本, 或者显示, 或者其它用途. 浏览器只处理认识的标签, 如果我们自己定义了一个标签, 但是没按规定指定它的作用, 那么浏览器就不认识它, 它内部的文本也不做处理.


属性 一个标签包括它内部的内容, 实际上会被浏览器解析成一个对象, 当然嵌套的标签就处理成它的子对象, 这样, 一个网页就被解析成了一个对象树. 而每个对象除了子对象, 还有一个属性集的概念, 从JavaScript的角度来看, 子对象不过是一个特定的属性. 一个JavaScript对象实际上就是属性集和值这两个部分. 纯粹的对象(非值类型的), 甚至没有值, 它的全部内容就是它的属性. 而属性可以以这种格式直接写在标签内部:<a src="#">abc</a>. 这个例子中, 这段代码会被浏览器解析成一个超链接对象, 这是因为标签a是一个浏览器预置的内部对象, 浏览器看到这个标签就会在内部创建一个超链接对象, 超链接对象有很多属性预先被添加, 但是src属性会从代码里读取, 并且设置成=号后面的值. 超链接有一个显示文本属性, 内容abc会被设置成这个属性, 这个属性用于显示的内容. 现在你会发现, 其实内容无非也是属性, 的确可以这么看, 甚至也可以这么设计, 但是嵌套机制导致把子对象写在标签的内容部分, 比直接写在属性部分处理和书写阅读起来都更清楚, 否则网页就会是一名属性语言, 而不是标签语言.


说白了, 本质上网页就是一个树形文档, 而树形文档有很多表示方式, 人们选择目前的这种方式, 还订立了各种标准, 让大家都按照这些标准来写和处理这种文档.


下面说说DIV布局


网页用于显示的对象可以分为两类: 块对象和内联对象分别由属性dispaly的值block和inline指定. 块对象在显示时总是独自占用一行, 而内联对象会顺序按指定的规则排在前一个对象的后面, 到最右边会换行.


网页的各种标准经过不断更新, 已经有很多版本, 我们不去纠结各个版本的差异, bug, 以及是否过时, 我们只大体的介绍一些实用的知识. 这些知识也许需要很多补充说明, 比如哪些时候适用, 哪些时候不行, 哪些浏览器是不同的, 不同版本有什么区别. 如果那样, 就会有很多的干扰, 我们只需要知道一些常见规则, 不去纠结细节, 这就是所谓的读书不求甚解, 是一种读书的技巧. 大多时候, 你会得到正确的结果, 如果不行再去具体解决.


CSS样式表  定义样式表样式有三种方式:
1. 名称前加一个点 .abc{} 这样的abc叫做类, 可以给任何标签的class属性赋值
2. 名称前加#符号 #abc{} 这样的abc叫做id, 可以给网页唯一的一个标签的id属性赋值, 而不能给两个标签赋相同的id值.
3. 名称前什么符号都没有 abc{} 这样的abc是一个标签, 你会发现每个内置标签也可以看作样式.
实际上还有一种, 叫做伪类, 它是这样表示的 :hover,:link共用4个. 伪类最初是应用在超链接上的, 但是新标准可以用于任何元素.


CSS标签连写: 比如 .abc #def :hover ghi{}这样, 它的意思是, 一个标签的嵌套满足上面的顺序的时候才会起作用: <div class=abc><div id=def><ghi>text</ghi></div></div>. :hover的意思, 是当鼠标移动到id=def这个元素上面时, text才会应用指定的样式.


CSS用逗号分隔: .abc,.def{}. 这样的写法实际上是两个样式合在一起写, 这样有什么用呢? 因为样式表是可以重复补充定义的, 也就是同一个类 .abc, 你可以多次定义, 最终会把所有定义合起来作为abc的样式. 所以可以把多个样式相同的部分合在一起写.


如果定义有冲突, 那么前面的CSS样式会被覆盖, 也就是越晚定义越优先. 一个元素标签可以用空格引用多个样式标签. 所以那个CSS各种形式的优先规则就显而易见了.


这些揭示网页的内部结构比书写结构要简单, 书写需要考虑各种方便性, 而内部对象树考虑的是结构清晰和执行方便.


DIV的定位由float,position和left,right,bottom,top这几个属性确定. 后面5个属性实际上是相关的, 应该视为一组. float把块定位到最左或者最右,默认值none, 这个属性没有中间位置的定义. 然后看position属性, 如果position属性是relative, float在左, 就看left的值, 也就是在原来位置的基础上水平移动left距离.如果float在右, 就看right属性. top属性和bottom属性也是同时只有一个起作用. 


当position的值是absolute的时候, 其实就是忽略float, 此时, 就由left,top或者right,bottom的值来确定位置, 这四个属性是左右不同同时用, 上下不能同时用, 其它都可以. 而left,top的基准是父容器的左上角, right,bottom的基准是右下角, 依次类推, 可以使用父容器的四个角类定位.


需要特别注意的是, 一个块元素, 在默认位置被移动了之后, 这个移动只针对它自己有效, 如果其它块设置位置参考它的位置, 那么总是参考它的默认位置. 这一点常常容易引起疑惑, 这是出于简化布局的考虑, 否则, 如果我们仅仅是改变一个块元素的位置, 其它块也跟着动, 会大大曾经处理的难度, 特别是动态的时候.