注：向HTML5培训新手普及前端代码知识下篇，在简单了解了HTML和CSS后，从网页代码与PS文件的相似性入手，说说HTML中一个*基础的概念——内联元素与块级元素，以及与之对应的CSS当中的概念便是行框与盒模型。然后进入CSS的核心内容，定位与布局。

 

　　行内元素与行框

 

　　我们都知道，PS里除了普通图层，文字也会自成一个图层，当我们想把一段文字中的某两个字换个颜色，改改字号或者字体，只要选中这两个字，然后去用文字工具修改就可以了。但是在HTML中，这样不行。你需要告诉浏览器，从哪个字开始，到哪个字结束，它们的字号、字体、颜色需要发生变化。

 

　　这么说可能有点抽象，那么我们来举个栗子：

 

　　我要告诉所有人这个鱼塘被我承包了。

 

　　这句话的“所有人”三个字是红色，而“被我承包了”这段话上出现了删除线。其对应的HTML代码应该是(在实际写代码的时候，这种地方不用分行，我分成5行是为了便于解释)：

 

　　p元素是段落元素，它里面不能放置任何块级元素，而放置其中span元素及s元素，便被称为行内元素(Inline Element，也被称作内联元素)。另外“我要告诉”、“这个鱼塘”、“。”这三段被分割的文字(标点符号也算文字)，浏览器会在分析显示的时候，创造出一个行内“匿名框”，因此这个p元素里实际上拥有5个行内框，这些“框”从左到右依次排列在一起，就变成行框。

 

　　在我们学习英语的时候，老师会讲到所有的字都要位于某一条线的上方，只有像f\g\j\p\q\y这些字会把尾巴伸到那条线的下方，这条线就被称为基线(Baseline)。在默认情况下，行内元素及那些行内匿名框都是以基线对齐的(PS中有且仅有基线对齐一种方式，所以基线就是我们在PS中编辑文字时总能看到的那条线了)。

 

　　另外一个困扰无数前端的大问题就是行高(line-height)…不过我觉得对于广大设计师来说这都不是事儿……对，PS里也有一个叫做行高的值，如果前面说的框框框框让你难以理解，把PS中的行高直接带入理解也没有什么问题(当然具体问题具体分析，高度计算在整个CSS布局中都是一个比较令人困扰的问题)。

 

　　行框相对于盒模型来说鲜少被提到，因为那些“行内框”实际上也应用了盒模型，只是对于那些非自闭和标签所构成元素(这种元素被称为非替换元素(non-replaced elements)，意思是说元素所显示的内容无法*修改属性的方式替换)而言，padding、margin乃至width(宽度)属性都会被无视，这点经常被人忽视而造成问题。

 

　　总结

 

　　在本节文章中，我提到了三个非常重要的概念盒模型、块级元素与行内元素(这三个是一定需要理解和记住的，其它的嘛……不急于现在记住…)。这三个概念都是在CSS当中使用的，其中，盒模型是CSS当中，对HTML元素“图层化”的处理规范;块级元素和行内元素，则是CSS当中，对HTML元素的一种分类方式(HTML对它的元素有自己的另一种分类方式)。

 

　　至于说哪些元素是块级的，哪些是行内的，哪些元素里面不能有哪些元素这种比较细节的问题，我在这里写一些常用的…肯定涵盖不到全部范畴，但是作为一个设计师的你来说，应该是完全够用了：

 

　　块级元素

 

　　*常见的块级元素便是div，如同PS中的图层1或者图层765，没有特殊含义，里面可以套各种各样的元素。

 

　　有序列表ol、无序列表ul也是块级元素，而他们的子元素只能是列表项li元素，li元素是块级元素，但是li元素里只能放行内元素(和p元素一样)。

 

　　h1~6是标题专用的标签，还有引用blockquote，这两个是块级元素，而其里面只能放行内元素。

 

　　表格table及其相关的行、列、单元格元素在表现上你可以当作它是一个块级元素，但它整体的样式解析方式非常特殊。本着样式追随内容的原则，在需要展现表格的地方使用表格元素，不要把表格当作样式或者布局的工具。

 

　　表单form，语义化的块级元素，在HTML中表示这是个表单元素，而在CSS中，他跟div元素一样，里面放什么都行。

 

　　HTML 5中新增了一批块级元素，主要是为了HTML语义化。包括header(页头)、footer(页脚)、nav(导航)、article(文章)、aside(侧边栏)、section(节选)。它们对其子元素都没有强制性的要求，只有article和section需要内嵌一个标题元素，这同样是出于语义化的考虑。如果你不知道怎么用，可以不用理会它们，统统用div(除非你是个想转为前端的设计师)。

 

　　行内元素

 

　　任何一段没有被标签包围的文本都会被视为一个行内元素。

 

　　超链接a是一个典型的行内元素(但是实际应用中，经常会用超链接元素来做一个按钮(需要padding、margin)，这在CSS当中也是可行的，以后再说)。

 

　　span元素在行内元素中的地位与div在块级元素中的地位相同，万金油的行内元素。

 

　　看起来变粗的b与strong，以及看起来变斜体的i与em。这两组元素在HTML 5中严格规定了语义，b表示无意义的加粗(比如产品名，或者仅仅是为了排版)，i表示在文章中突出不同意见或语气(分类、术语、谚语等等),em表示一般的强调，strong表示超级强调的强调(……)。

 

　　图片img、输入框input、下拉菜单select、文本框textarea。这几个元素作为行内元素，但却可以设置padding、margin(因为它们是替换元素)

 

　　让字变小的small(让字变大的big元素虽然也是行内元素，但是HTML 5已经将其废止了)、上标sup、下标sub、短引用q、注音ruby、换行br等等都是行内元素。

 

　　之前说了什么是CSS，也介绍了CSS的盒模型，下面理所当然地要进入CSS的核心内容，定位与布局。

 

　　其实说完这个部分，CSS就没什么东西可说了，剩下的都是些细枝末节或者很直观的东西。对，把*抽象的这部分理解了，CSS就没有任何难度可言了。

 

　　如果你的制图习惯比较良好，有好好对图层进行分组，那么你就已经对你的设计稿完成了*初步的切版工作。按照你切的版，把元素一个个码好，你的页面就搞定了。然而实际上的页面并不是像PSD设计稿那么安分，它有可能这个部分要一直固定在屏幕顶端，那个部分的内容时多时少，因此才要学会CSS的“布局语言”。

 

　　常规流

 

　　我们通常讲的块级元素与行内元素的默认表现，就是它们在常规流中的表现。有一个名为display的CSS属性可以修改它们的表现形式。在默认情况下，块级元素的display属性值为block，行内元素的属性值为inline，如果你把某个a元素的display属性值改成block，那么这个a元素就会像一个块级元素一样表现自己了。另外还有一个比较特殊的属性值为inline-block，顾名思义是像行内元素那样排列的块级元素，一般情况下，在想要并列排列某些块级元素的时候，就可以把它们的display属性值改成inline-block(无奖问答：为什么不直接改成inline呢?)

 

　　相对定位

 

　　一般的教程会把相对定位和绝对定位一起放在浮动的前面或者后面，而我选择这么安排内容的原因之一是我想要强调相对定位的元素仍然在常规流中(事实上W3C标准也是如此安排目录的)。

 

　　position:relative的元素就拥有了相对定位的能力，而用户可以*上下左右(top、bottom、left、right)四个属性值(但是通常只使用top和left，因为这里允许使用负数，right=-left)来在视觉上“推走”这个元素。相对定位*的特点就是，元素的本体还在那里，而用户看到的则未必(上下左右都不设置或者为0的时候，元素仍旧在那里)，定位方式是“相对于原位置定位”，因此被称为相对定位。而其真正在定位上的应用，通常不是在大框架的布局，而是一些小地方、小细节的微调，而其更常见的用法，会在下面再次提到。

 

　　当然一个超级普通毫无特色常规流块级元素根本无法满足我们对丰富布局的需求，所以出现了人间大杀器——float。

 

　　浮动

 

　　当我们将某个元素的float属性改为left或者right的时候，这个元素就成为了一个浮动的块级元素。

 

　　首先它仍然是一个块级元素(如果它原本是一个内联元素，那么此时它也变成了块级元素)——拥有padding、border、margin，可以设置宽高。其次它浮起来了：

 

　　它脱离了常规流

 

　　它的宽度变成了它内