标签：字母 那是 阅读 方式 另一个 元素 允许 height 用户
上节课我们大概是得到了下图的一个效果，课后帮和HomeWorkHelper分别获得了带下以及样式。但是他们俩实际上是分在两行的。
我们来看一下理想与现实的一个对比。
我们看到现实与理想之间还是有一定差距的。我们的理想效果是课后帮与HWHelper是在一行，但现实情况却是在两行。我们期望的效果是在一行并且HWHelper在课后帮的右上角。其实实现这个效果并不难，我们先来对现在的情况进行一些分析。
我们想要将两行文字合为一行，会通过两种方式来实现，我们从这两种方式中管中窥豹来了解网页是如何布局的。我们看到上图，两段文字是不在一行的，其实对于文字不在一行这件事，有些让人难以理解，不理解的原因也很简单，那就是我们不清楚HTML的布局是什么规则，如果我们了解了布局规则，也就不难理解，为什么文字不在一行了。以及我们针对性的可以做什么操作。
这两个元素为什么不在一行的原因很简单，因为每个元素都独占了一行，我们可以看到上图，课后帮我们给它套了一个h1标签，然后HWHelper套了一个p标签。不太讲理的地方就是某些标签元素，天生就独占满行。
例如h1标签、p标签他们就是天生就是要占满整行的。这种标签元素我们给他取个名字，叫做块元素，英文叫做block。
那么此时如果我们去看他们的宽度的话，他们的宽度是占满容器百分百的宽度。并且宽度和高度是可以设定的，但我们千万不要以为他们是因为宽度太宽才会独占满行，其实即使我们把宽度变小，他们也不会跟其他元素在同一行。这是块元素的一个重要特点。
即使我们将两个块元素的宽度变小，小到一行可以足够容器两行，他们也不会在一起，因为他们是块元素。就是这么跋扈。 就是不跟其他元素在一行。我们之前讲到了一些标签，有很多标签都是块元素，比如下图：
div、h1、h2、h3以及p标签他们都是块元素，有这些比较跋扈的，不会和其他标签摆在一行的块元素，也有比较随和的，也就是可以摆在一行的。那是什么呢？
行内元素，就是可以和其他标签元素融合在一起的，英文是inline. 行内元素的高度和宽度是不可以设定的，完全跟内容而定。
其实我们之前也接触过行内标签，比如说：a标签，它就是一个行内元素。
现在我们来分析一下我们当前的情况，看上图我们不难发现，课后帮以及HWHelper都是块标签元素，他们默认占据了屏幕的百分百的宽度，高度是自动的一个高度。如果我们添加一些样式，让他们的宽度变小。
虽然宽度变小了，但是由于他们是块元素，仍然不会跟其他元素同在一行。既然他们这么跋扈，没有可商量的余地，我们暂且也不管他们。我们来看看行内标签。
我们添加了两个a标签，我们发现两个a标签同在一行，比较随和。但是只是a标签在一行，上面那两位大爷仍然是自己搞一行。
我们在两个a标签的下方，再加一个div标签，我们看到div也是块元素，他也是大爷。自己就占满整行了。 现在我们来做一件事，就是给div的宽度变短一点，看看效果。
此时虽然我们给div加了样式，让他的宽度变很短了，但是仍然是独占一行。现在我们需要整理一下刚刚的分析。有两点：
第一：我们了解了块元素（block），他的特点就是天生跋扈，独占满行。高和宽是可以设定的。即使宽高设定很小，也不会跟其他元素分享一行。它是大爷！
第二： 我们又了解了行内元素(inline)，这个哥们就很随和，但也有属于自己的特点。他虽然可以和其他元素分享一行，但是他的宽高是不能设定的，就是跟着内容的宽高而定。
以上两点是非常重要的知识点，希望大家能好好领会，那我们现在再来看看理想和现实。
虽然我们现在现实还没有达到理想的效果，但现在至少我们已经明白为什么课后帮和HWHelper为什么不在一行了，为什么呢？那就是因为他们都是块元素。那么有没有什么办法让这两个元素编程行内元素，一旦成为行内元素，他们不就跑到一行去了吗。所以我们来看看方法一。
方法一就是使用行内元素，行内元素可以摆在一行，我们现在明确的知道，h1标签和p标签他们都是块元素，所以我们该用哪个元素呢？
我们接触过的行内元素就是a标签，我们是否可以使用a标签来解决这个问题呢？其实a标签是不合适的，因为a标签都是应用于超链接，那么课后帮和HWHelper他们其实都不是超链接，或者说我们并不希望他是超链接。那么问题来了，就是除了a标签之外，有没有用于文字的行内标签元素呢？
答案是必须的，那就是span标签，span的意思就是小范围的意思，主要用于一小段文字，这正符合我们的要求。至于行不行我们试试再说。首先我们把HWHelper换成span标签试试。
当把HWHelper从p标签换成span标签，现在就变成行内元素了。他的宽度也随之缩小，也就是和内容宽度是一样的。但是效果仍然没有达到，我们是否也需要将h1换成span标签呢，我给大家的建议是最好不要换。为什么呢？这里我们需要引入一个很重要的概念。那就是标签语义化。
我们的网站如果发布到网络上，搜索引擎会派出网络蜘蛛来爬取我们网站的关键字，从而在用户搜索到相关的关键字的时候，把我们的网站呈现给用户。搜索引擎派出的网络蜘蛛毕竟不是人， 它其实不会看浏览器的效果，而是通过HTML代码来识别我们的页面。 所谓识别页面其实就是通过HTML中标签来识别我们的内容。例如那些是标题，那些事段落文字，那些是图片都是通过标签来爬取的。从这个角度看，那课后帮用h1标签就再适合不过了，因为他就是我们整个网站的标题。然后网络蜘蛛过来一爬取就知道，原来这个网站的标题就叫做课后帮，这样他就明白了。
标签语义化的另一个好处就是代码更容易阅读，比如说你写了一个HTML代码，里面全是h1、span、p标签等，那我完全不知道到底哪个是标题，哪个是段落，哪个是一小段文字。 但如果我看到你里面只有一个h1标签，那我马上就知道你到底在说什么。所以说h1标签最好不要换。
现在问题又来了，h1标签不允许换，然后他又是块元素，那怎么办呢？ 其实是有办法的，我们继续往下看。
我们说这个一个标签到底是块元素还是行内元素并不是一成不变的，不是说天生怎样他就是怎么样， 其实我们是可以通过样式来改变的。什么样式呢？
就是display, 我们这里提到两个写法，分别是display:block和display:inline。 那这个有什么作用呢，就是别管你之前写的是块元素还是行内元素，一旦你在样式中指定display：block 它就变成了块元素。同理只要你写上display:inline就会变成行内元素。我们来做一下。
我们为h1标签添加样式，使h1标签从块元素变成行内元素。叫做display：inline；我们希望能够达到我们想要效果，看下图。
此时课后帮就变成行内元素了，然后就跟HWHelper公用一行了。其实我们已经达到了成为一行的效果，现在我们在来看一下现实和理想还有没有差距。
我们发现已经接近了理想效果，但是还是有些细节不太一样，哪里不一样呢？就是课后帮和HWHelper的样式。我们理想的样式是课后帮和HWHelper是顶端对齐，但是我们现实的效果是底端对齐， 那这个是怎么回事呢？
难道说行内元素默认是底端对齐吗？这个理解不是很到位，我们对于这个细节来详细解释一下。
我们通过写过的英文字母书写格式来举例，通过这个例子来深究底端对齐这么一个细节。英文子母在我们书写的时候，都有四线格， 其中从上往下数第三根线其实非常重要，他有一个自己的名字叫做基线， 我们看到图中写的7个字母。 这7个字母其实大多数都是以基线为基准的。首先看字母a、c、e体型比较小，那完全是在第二根和第三根之间。 字母b、d、f比较长，所以他们伸出去了。 长出来的部分伸到了第一根和第二根之间， 那么字母g又比较特别，它其实分上下两个部分。 上半部分也是以基线为准，在2、3根线之间，那么下半部分就伸到了3、4根之间。总而言之，这个基线对于英文字母的书写是非常重要的。
那么我们来看看我们写的这几个字。
其实课后帮这几个字也有一根基线， 但是这根基线并不是我们所想的那样，是不是从最底下开始的， 其实不是。他其实离最低端的部分有一段距离，课后帮这几个字有基线，其实HWHelper也有一根基线。
HWHelper这个基线其实就跟我们的英文字母的基线差不多，但实际上HWHelper的基线和课后帮的基线并不在同一条水平线上。因为文字大小不一样，并且文字类型也不一样，一个是中文一个是英文，所以就更不一样了。那我们现在想做的事情就是让同一行的元素基线对齐。
同一行的行内元素，基线要想对齐，这事怎么办呢？因为基线不一样，咱们得想个办法。我们这里采用的办法就是，让这两个元素互相靠近。
当两个元素互相靠近之后，我们发现现在基线已经在底端对齐了，看起来效果就很好了，但是这个并不是我们理想的效果。我们理想的效果明明是在顶端对齐，那这事该怎么办呢？
我们可以通过样式来控制同一行的行内元素的对齐方式，通过什么样式来控制呢？
vertical:align这么一个东西来控制垂直的对齐方式，现在的状态实际上是一个默认状态。
vertical-align:baseline; 其实就是我们所谓的基线对齐方式，我们不满意，我们不满意谁呢，其实是HWHelper这几个字，我们希望他在顶部。那我们就要对它进行修改。
我们添加一个vertical-align：top；当我们添加这么一个方法时， 就会和整个行内元素顶部最高的对齐。 其实现在就符合我们的要求了，那我们来看看代码。
在代码中我们是有这样的一个样式，就是h1标签中有display:inline；这么写之后，课后帮就变成了行内元素， 然后把HWHelper改成了span标签，那么接下来我们需要让其顶端对齐。我们把代码填上。
此时我们就已经达到我们理想的效果了，这里我们需要把代码写入到我们的sublime中。
这里我们来整理一下我们今天所讲的内容，其实我们主要做了三件事：
第一件事: 是我们把块元素p标签改成了行内元素标签span。
第二件事: 是我们把h1标题标签通过display:inline；变成了行标签，使两行可以共用一行。
第三件事: 是我们不满意底端对齐，所以我们通过vertical-align改变标签的样式。
从而达到我们最理想的效果，以上是我们今天的内容，我们下节会继续分享“浮动腾挪”。
静态页面制作:5HTML布局
标签：字母 那是 阅读 方式 另一个 元素 允许 height 用户
原文地址：http://www.cnblogs.com/hemiah/p/7348069.html
