上一节我们介绍了方法一,那么这一节我们来看看方法二。
![](https://scontent-sjc2-1.xx.fbcdn.net/v/t31.0-8/s2048x2048/12916184_212759792447141_3775572457976825356_o.jpg?oh=a77fac8f1d11135c672ce8d9253a7b1e&oe=5A1CC77B)
我们想要实现的理想效果,其实使用方法一,利用行内元素是最简洁有效的。
那为什么我们还要学习使用比较复杂的方法2呢,因为我们后期设计的网页要比我们现在的网页复杂的多,
如果你只会用第一种方法,其实是完全不够用。
![](https://fb-s-c-a.akamaihd.net/h-ak-fbx/v/t31.0-8/12971049_212760022447118_4362710683953881897_o.jpg?oh=3335d25a3729a7e04f3f93a247196e62&oe=5A369711&__gda__=1512509946_8abc0aaca4ad8b09e950649e8b7bc175)
但是我们又不想等到后面,用一个相对复杂的案例,去分析本来就复杂的一个布局方法。
所以我们就通过这个简单的案例,让大家清晰的理解,第二种布局的方法。
![](https://fb-s-c-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12473953_212760515780402_339702303206929655_o.jpg?oh=ef7a0f0151a91c55ef53d6f9520f5c0d&oe=5A2B7F5D&__gda__=1513194445_978a6fedc31d7471edab35b0added624)
由于方法2比较复杂,所以我们在这里有两个铺垫,第一个叫做文字是一种行内元素,
第二个叫做图文环绕效果的实现,我们分别的来说一说。
![](https://scontent-sjc2-1.xx.fbcdn.net/v/t31.0-8/12593582_212760935780360_5350392607548398267_o.jpg?oh=e2d732190577e0eaa0fb6aca566e2ba8&oe=5A25E88E)
我们先回到最开始的那个状态,也就是说我们有两个标签,分别是h1标签和p标签。我们先来看看h1标签。
![](https://scontent-sjc2-1.xx.fbcdn.net/v/t31.0-8/p720x720/12973513_212761132447007_5586980051122959066_o.jpg?oh=8e0dc80a99341e11afcddf4c058f7aa3&oe=5A2CEEBB)
h1标签是块元素,我们之前已经再三的强调了。并且块级元素的高度默认是受内容影响,
当然也可以自行设定高度,块元素的宽度默认是占满整行的,当然也可以自定设定宽度。
![](https://fb-s-b-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12916916_212761315780322_6216487809328985348_o.jpg?oh=806925fa81e2224690eff480b8bf6910&oe=5A2D2D9F&__gda__=1509092145_bd035724dde4266182f10b2f792c6ba2)
那么假设我们在h1的首标签和尾标签之间,什么都不写,这个时候会怎么样呢?
那就是高度受内容影响,我们起个名字叫做没内容、没高度。因为标签之间什么东西都没写。
但是宽度仍然是占满整行,这个叫做没内容没关系。
那么此时的高度虽然等于0,宽度虽然很宽,但是相当于没有用。高和宽乘积面积还是0。
也就是说,如果在h1标签中什么都不写的话,那么这个元素在页面上是看不到的。
因为不管他有多宽,但是高度为0,最后的面积就为0,所以就看不到了。那我们往里面加上课后帮这几个字。
![](https://fb-s-d-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12916875_212761755780278_3974542389901657346_o.jpg?oh=f7046838f302c0c1a396ef34411b1e6b&oe=5A26EA4E&__gda__=1512391648_9a92a0d18b7e6ac0d4ee02324626eb19)
我们加上课后帮这几个之后就相当于是有高度了,也就能够被看到了。
那不知道有没有人想过这么个问题,就是h1标签是个块元素,那么在其中的内容,
例如课后帮这几个字是怎么个意思呢?课后帮是块元素还是行内元素呢?
![](https://fb-s-d-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12901272_212761852446935_151237797321366752_o.jpg?oh=0262012c64280c70a19ed4b59df2eee5&oe=5A317E2A&__gda__=1508885690_c7a59fdebb26074c5bf637fc326dde9c)
其实课后帮是行内元素,行内元素的宽度是受内容影响,
写多少字就有多宽,高度也是受内容影响,字越大高度越高。行数越多高度越高。
如果我们了解这一点了,我们回头再看看课后帮。
![](https://scontent-sjc2-1.xx.fbcdn.net/v/t31.0-8/p720x720/12961405_212761999113587_1836343282112201555_o.jpg?oh=18c1ab607850454a072c4256ca49e83e&oe=5A3182AF)
我们通过上图就能体会一点,那就是一种嵌套关系。怎么个嵌套法呢?
就是h1标签是块元素,然后课后帮是行内元素。我们现在其实就是通过块元素把行内元素嵌套起来了。
所以如果我们仔细追究,并不是我们最初所想的那样,一个非常长的矩形,
然后中间加几个字就完了,并不是。而是嵌套关系。
![](https://scontent-sjc2-1.xx.fbcdn.net/v/t31.0-8/p720x720/12916372_212762829113504_7159183359962643447_o.jpg?oh=ede3f7d0dc95f2f1e9623d3ba3a1de49&oe=5A244A9D)
h1标签本身是没有高度的,但是加上课后帮这个行内元素之后,那块元素的高度受行内元素内容的影响,
于是就叫做有内容、有高度。我们在举个例子。
![](https://scontent-sjc2-1.xx.fbcdn.net/v/t31.0-8/p720x720/12973206_212763459113441_2819076402462719711_o.jpg?oh=8cae547bbaef64ea646377c8c23ef603&oe=5A2FA3EB)
那么我们看到p标签也是块元素,其中我什么都不写,那么他的高度也是0,那么这个时候叫做没内容、没高度。
![](https://scontent-sjc2-1.xx.fbcdn.net/v/t31.0-8/p720x720/12916878_212763682446752_7272056685985794279_o.jpg?oh=b439859ccfd22902d22f67276fecebb2&oe=5A2C7AE3)
如果我们在p标签之间写了HWHelper,那么这个时候就是在块元素中添加了行内元素内容,
有内容了就是,有内容、有高度。那么我们回到方法2的第一个铺垫。
![](https://scontent-sjc2-1.xx.fbcdn.net/v/t31.0-8/p720x720/12901271_212763992446721_4194723362918454437_o.jpg?oh=ef0dce7436f141f8234b6a921559c4aa&oe=5A2F424E)
铺垫一:文字是一种行内元素,也就是说文字不管有没有标签包裹着,他本身就是行内元素。
希望通过上面的例子,大家能够理解,我们第一个铺垫。