上一个博客中我们大概是得到了下图的一个效果，课后帮和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)，这个哥们就很随和，但也有属于自己的特点。
他虽然可以和其他元素分享一行，但是他的宽高是不能设定的，就是跟着内容的宽高而定。
以上两点是非常重要的知识点，希望大家能好好领会，那我们现在再来看看理想和现实。