css中的display:block和 inline-block以及inline的区别-个人博客网站搭建

在我们开发网站过程中,这个display用的太多了,几乎每一个div和san都要用到这个display,这不,万书涛在开发个人博客模板时就遇到这个问题,代码演示如下:

我是用了一对<span></span>标签,写法如下:<span class="wstformsz">

[时间:10-10]    [浏览:]    [放入收藏夹]    [查看详情]
在我们开发网站过程中,这个display用的太多了,几乎每一个div和san都要用到这个display,这不,万书涛在开发个人博客模板时就遇到这个问题,代码演示如下:
 
我是用了一对<span></span>标签,写法如下:<span class="wstformsz">文字填写:<input type="text" name="wsttoptxt" value="欢迎光临万" /></span>,然后后面紧跟着 <label>这里主要是填写你的博客名字</label>,效果是想让span后面紧跟label说明。
 
本来span标签就是行内元素,没必要用display属性,可是默认我想给span设置高度,怎么设置也不起作用,如下图一
display实例截图一
上图中红色箭头可以看出,默认什么都不加,height都到了125px了,左边红色箭头高度根本没有变,后来修改了width宽度也是不行,于是马上想到了display:block属性,这个是默认让span变成块级元素,会独占一行,要想让别的元素和他一行,就得设置float:left,可是这样一浮动,后面别的元素格式可能会乱,还要清浮动什么的,比较繁琐。

于是就试了试 display:inline-block,发现这个起作用了,原来这个属性是表示行内块元素,即有块级元素的width,height等属性,也能和别的元素共处与一行中。效果如图二
display实例截图二
如上图二所示,在span元素设置display:inline-block以后,再设置高度就能被撑开了。
 
总结如下:经过实际操作以及结合官方资料,display各个属性区别如下:
 
inline:行内元素,拥有行内元素的特性,即与其他行内元素可以共处于一行中,但是width,height等属性不起作用,而针对本例中的span元素的padding属性 只有左右有效果,其他上下无效果;同样margin属性也只有left、right设置有效。
 
block和inline-block都是块级元素,width和heigth都有效,并且padding和margin也都有效,不同的是inline-block这个块元素可以和行内元素处于一行之中,而block却是单独一行。


PS:本文来自万书涛的个人博客,感谢分享。


标签: