静态页面制作:7HTML浮动腾挪概念(铺垫一:行与块)

    

    上一节我们介绍了方法一,那么这一节我们来看看方法二。

 

  

    我们想要实现的理想效果,其实使用方法一,利用行内元素是最简洁有效的。

 

    那为什么我们还要学习使用比较复杂的方法2呢,因为我们后期设计的网页要比我们现在的网页复杂的多,

 

    如果你只会用第一种方法,其实是完全不够用。

 

    但是我们又不想等到后面,用一个相对复杂的案例,去分析本来就复杂的一个布局方法。

 

    所以我们就通过这个简单的案例,让大家清晰的理解,第二种布局的方法。

 

    由于方法2比较复杂,所以我们在这里有两个铺垫,第一个叫做文字是一种行内元素,

 

    第二个叫做图文环绕效果的实现,我们分别的来说一说。

 

 

    我们先回到最开始的那个状态,也就是说我们有两个标签,分别是h1标签和p标签。我们先来看看h1标签。

    

    h1标签是块元素,我们之前已经再三的强调了。并且块级元素的高度默认是受内容影响,

 

    当然也可以自行设定高度,块元素的宽度默认是占满整行的,当然也可以自定设定宽度。

 

    那么假设我们在h1的首标签和尾标签之间,什么都不写,这个时候会怎么样呢?

 

    那就是高度受内容影响,我们起个名字叫做没内容、没高度。因为标签之间什么东西都没写。

 

    但是宽度仍然是占满整行,这个叫做没内容没关系。

 

    那么此时的高度虽然等于0,宽度虽然很宽,但是相当于没有用。高和宽乘积面积还是0。

 

    也就是说,如果在h1标签中什么都不写的话,那么这个元素在页面上是看不到的。

 

    因为不管他有多宽,但是高度为0,最后的面积就为0,所以就看不到了。那我们往里面加上课后帮这几个字。

 

    我们加上课后帮这几个之后就相当于是有高度了,也就能够被看到了。

 

    那不知道有没有人想过这么个问题,就是h1标签是个块元素,那么在其中的内容,

 

    例如课后帮这几个字是怎么个意思呢?课后帮是块元素还是行内元素呢?

 

    其实课后帮是行内元素,行内元素的宽度是受内容影响,

 

    写多少字就有多宽,高度也是受内容影响,字越大高度越高。行数越多高度越高。

 

    如果我们了解这一点了,我们回头再看看课后帮。

 

 

    我们通过上图就能体会一点,那就是一种嵌套关系。怎么个嵌套法呢?

 

    就是h1标签是块元素,然后课后帮是行内元素。我们现在其实就是通过块元素把行内元素嵌套起来了。

 

    所以如果我们仔细追究,并不是我们最初所想的那样,一个非常长的矩形,

 

    然后中间加几个字就完了,并不是。而是嵌套关系。

 

 

    h1标签本身是没有高度的,但是加上课后帮这个行内元素之后,那块元素的高度受行内元素内容的影响,

 

    于是就叫做有内容、有高度。我们在举个例子。

 

 

    那么我们看到p标签也是块元素,其中我什么都不写,那么他的高度也是0,那么这个时候叫做没内容、没高度。

 

 

    如果我们在p标签之间写了HWHelper,那么这个时候就是在块元素中添加了行内元素内容,

 

    有内容了就是,有内容、有高度。那么我们回到方法2的第一个铺垫。

 

 

    铺垫一:文字是一种行内元素,也就是说文字不管有没有标签包裹着,他本身就是行内元素。

 

    希望通过上面的例子,大家能够理解,我们第一个铺垫。

 
原文地址:https://www.cnblogs.com/hemiah/p/7357944.html