静态页面制作:5HTML布局

上一个博客中我们大概是得到了下图的一个效果，课后帮和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)，这个哥们就很随和，但也有属于自己的特点。

 

　　    他虽然可以和其他元素分享一行，但是他的宽高是不能设定的，就是跟着内容的宽高而定。

 

 

以上两点是非常重要的知识点，希望大家能好好领会，那我们现在再来看看理想和现实。