上一节我们介绍了方法一,那么这一节我们来看看方法二。
我们想要实现的理想效果,其实使用方法一,利用行内元素是最简洁有效的。
那为什么我们还要学习使用比较复杂的方法2呢,因为我们后期设计的网页要比我们现在的网页复杂的多,
如果你只会用第一种方法,其实是完全不够用。
但是我们又不想等到后面,用一个相对复杂的案例,去分析本来就复杂的一个布局方法。
所以我们就通过这个简单的案例,让大家清晰的理解,第二种布局的方法。
由于方法2比较复杂,所以我们在这里有两个铺垫,第一个叫做文字是一种行内元素,
第二个叫做图文环绕效果的实现,我们分别的来说一说。
我们先回到最开始的那个状态,也就是说我们有两个标签,分别是h1标签和p标签。我们先来看看h1标签。
h1标签是块元素,我们之前已经再三的强调了。并且块级元素的高度默认是受内容影响,
当然也可以自行设定高度,块元素的宽度默认是占满整行的,当然也可以自定设定宽度。
那么假设我们在h1的首标签和尾标签之间,什么都不写,这个时候会怎么样呢?
那就是高度受内容影响,我们起个名字叫做没内容、没高度。因为标签之间什么东西都没写。
但是宽度仍然是占满整行,这个叫做没内容没关系。
那么此时的高度虽然等于0,宽度虽然很宽,但是相当于没有用。高和宽乘积面积还是0。
也就是说,如果在h1标签中什么都不写的话,那么这个元素在页面上是看不到的。
因为不管他有多宽,但是高度为0,最后的面积就为0,所以就看不到了。那我们往里面加上课后帮这几个字。
我们加上课后帮这几个之后就相当于是有高度了,也就能够被看到了。
那不知道有没有人想过这么个问题,就是h1标签是个块元素,那么在其中的内容,
例如课后帮这几个字是怎么个意思呢?课后帮是块元素还是行内元素呢?
其实课后帮是行内元素,行内元素的宽度是受内容影响,
写多少字就有多宽,高度也是受内容影响,字越大高度越高。行数越多高度越高。
如果我们了解这一点了,我们回头再看看课后帮。
我们通过上图就能体会一点,那就是一种嵌套关系。怎么个嵌套法呢?
就是h1标签是块元素,然后课后帮是行内元素。我们现在其实就是通过块元素把行内元素嵌套起来了。
所以如果我们仔细追究,并不是我们最初所想的那样,一个非常长的矩形,
然后中间加几个字就完了,并不是。而是嵌套关系。
h1标签本身是没有高度的,但是加上课后帮这个行内元素之后,那块元素的高度受行内元素内容的影响,
于是就叫做有内容、有高度。我们在举个例子。
那么我们看到p标签也是块元素,其中我什么都不写,那么他的高度也是0,那么这个时候叫做没内容、没高度。
如果我们在p标签之间写了HWHelper,那么这个时候就是在块元素中添加了行内元素内容,
有内容了就是,有内容、有高度。那么我们回到方法2的第一个铺垫。
铺垫一:文字是一种行内元素,也就是说文字不管有没有标签包裹着,他本身就是行内元素。
希望通过上面的例子,大家能够理解,我们第一个铺垫。