你的位置:首页 > 网页设计

[网页设计]浅析HTML的元素类型及其转换

大家都知道html是由标签元素组成的,在了解元素的类型转换之前,让我们先来了解一下html的元素类型。  一、html元素类型分为两种:块级元素和内联元素,内联元素又被称为行内元素。   常见的块级元素有:div、o、dl、ul、li、h1至h6、p等,常见的内联元素有span、label、a、img、input、b、i等。它们之间有何区别呢,下面就详细演示一下。  1、块级元素独占一行,内联元素会与其它内联元素处同一行。我们看下面的代码:  
<p>块级元素p标签</p><span>内联元素one</span><span>内联元素two</span>

  我们分别给p和span标签一个背景色,然后看运行效果如下:

  块级元素默认宽度是父级元素的宽度,这里我们给P元素一个小点的宽度之后,它还会占据一整行吗?答案是肯定的,效果如下:

  内联元素元素还有一个特性,就是当其所在行不能完全放下自己的位置的时候,会截断一分为二,把剩下的部分放第二行,个别元素例外。

  2、块级元素默认宽度为父级元素的宽度,内联元素的宽度是内容自然撑开,而高度两种元素都是内容自然撑开。

  如果我们单独对块级元素和内联元素设置宽高会怎么样呢?我们给上面的标签添加如下样式:

p{	width:200px;	height:200px;	background-color:#ccc;}span{		width:200px;	height:200px;	background-color:pink;}

   运行的结果如下:

  可见对块级元素p标签设置的宽高都有效,而对内联元素设置的宽高是无效的,这是因为内联元素不支持指定宽高,其宽高由内容自然撑开,并且受padding值的影响,我们给第一个span标签添加一个50px的padding值,效果如下: 

 

  可见内联元素span的宽高都有变化,这里又出现了一个有趣的问题,细心的朋友肯定发现了,变宽后的span标签和上面的P标签有一部分重叠了,这是为什么呢?因为内联元素与其上下相邻元素的距离不受padding值影响,但是与左右相邻元素之间的距离是受padding值影响的。

  在这里,我们再来看看margin值的影响,先给p标签的margin一个50px的值,效果如下:

  可以看到块级元素的外边框值对上下左右都有效果。接下来我们去掉p标签的margin值,然后给第一个span写上margin:50px,得到如下效果:

  可见对于内联元素,它的margin值和padding一样只对左右相邻元素的距离产生效果,而对上下相邻元素的距离无影响。

  3、块级元素和内联元素还有一个不同点,就是块级元素能包裹块级元素和内联元素,而内联元素只能包裹内联元素,不能包裹块级元素。比如,你可以在div里放div、ul、img、span等等,都能正常显示,而在span中可以放b、i等,不能放div、p之类,这里就不上图了,感兴趣的朋友下来自己试。

  4、总结:通俗一点理解,块级元素就好比一个大人物,在页面上不管自己胖瘦都要独占一排。只要它说了让你离它远点,你就得远点,远多少都由它决定(margin值)。大人物家大业大,家里再养几个大人物和小人物都没有问题(可以包裹块级和内联元素)。

  而内联元素呢,好比一个小人物,在页面上和别的小人物们都是坐一排,一排坐满了自动坐第二排。左右两边胳膊动一动(设置margin的左右值),可以让左右的小人物们离自己远点,但是对于自己上下的人物就没法了。家里呢,养几个小人物还可以,大人物就养不起了(不能包裹块级,只能包裹内联)。

  在这里需要注意的是,有两个特例,块级元素中的p标签是不能包裹块级元素的,内联元素中的a标签可以包裹任何元素。另外内联元素input和img都支持部分块级元素的特性,比如设置宽高和上下margin值有效。

  二、接下来我们来讲讲块级元素和内联元素之间的转换

  在网页布局中,我们常常会需要块级元素具有内联元素的特征,比如58同城的这个导航栏:

  是用ul来实现的,ul中的li是块级元素,默认是独占一行,但在这里我们需要它横排显示,这时候就用到了元素的类型转换。

  想让一个块级元素转换成内联元素,在其样式中设置display:inline,再设置宽度就可以了,但是这里我们不能这样设置,因为inline值会把块级元素完全转换为内联元素,而不再具有块级元素的特性,这里我们仍需要在li里放置块级标签,所以这里我们用另外一个写法,设置display:inline-block,这样会将li转化为行内块元素,使其既能横排排列又能包裹块级元素。

  下面我们来详细说一下display这个属性,它用来做元素类型转换总共可以设置三个值:inline,inline-block,block。inline是将一个元素转换为内联元素,inline-block转换为行内块元素,block是转换为块元素。其中inline-block使用的最多,我们可以一起再来看一个将内联元素转换为行内快元素的例子,先上图:

  这样一个竖排的导航栏,一般我们用ul来实现,代码如下:

<ul>	<li id="li-01"> <a href="#"></a> </li>	<li id="li-02"> <a href="#"></a> </li>	<li id="li-03"> <a href="#"></a> </li>	<li id="li-04"> <a href="#"></a> </li>	<li id="li-05"> <a href="#"></a> </li></ul>

  通过给li设置背景图片和宽高等就能显示成图上的样子,li中包含了一个a标签,a标签里没有任何内容,作为一个内联元素,此时的a标签没有大小,所以我们在页面上根本点击不到它,我们希望达到的效果是用鼠标点击li的时候就能触发a标签的链接,所以此时我们给a标签做如下处理:

a{	display:inline-block;	width:40px;	height:40px;}

  通过把a标签转换为行内块元素,再给它设置和li一样的宽高,就能够实现效果。这里直接把a标签转换为块元素的效果也是一样的。

  最后补充一点,display的block值不仅有将元素转换为块元素的作用,还有显示元素的作用,如果你在样式初始化的时候写了这样一句代码:*{display:block;},通过通配符把所有标签的display值设为block,你就会发现你写在head标签里的titile标签和style标签等的内容都会被显示在页面上。这个属性值,我们一般是和display:none(不显示),配合起来用的。比如我们常常看到一些导航栏,当鼠标放上去的时候,会出现一个二级导航栏,鼠标移开的时候二级导航栏又会消失不显示,就是通过display的这两个属性值来控制的。

  display这个属性非常强大,相当于能把元素打回娘胎重造,上面讲到的只是它的冰山一角,在css3中又引入了很多新的用法,比如display:flex将元素设置为一个弹性盒子,在这里就不一一介绍了。