display的inline、block、inline-block的实际应用

xiaoxiao2024-10-31  15

inline与block经常用到,一个是以内联方式呈现,一个是以块级方式呈现。

那么inline-block是什么意思呢?

inline-block在IE下是不被解析的,但是IE下可以用其他的方式达到此效果。

inline是不可以定义高度的,block可以定义高度,但是应用此样式元素周围的其他元素必须要换行了,如果即想某个元素的周围不换行(内联方式呈现),又想定义其高度,那么inline-block就是最好的选择。

 

IE下如果想达到一样效果,可以将某个元素设置为inline,并定义其高度为1(也可以用zoom:1的方式,不过这样表达CSS的方式会通不过w3c的标准,但不影响实际效果)。

 

代码:

<style> div,span{background-color:green;margin:5px;border:1px solid #333;padding:5px;height:52px;color:#fff;} .b{display:block;} .i{display:inline;} div.ib{display:inline-block;} * html div.ib{display:inline; height:1px} a.ib{display:inline-block;} span.v{padding:0;margin:0;border:0;vertical-align:middle;height:100%} </style> <div>div display:block</div> <div class="i">div display:inline</div> <div class="ib">div display:inline-block <span>inline-block child1</span> <span>inline-block child2</span> </div> <span>span display:inline</span> <span class="b">span display:block</span> <span><a class="ib">a display:block</a></span> <br /> <div><span class="v"></span>vertical-align:middle</div>  

 

转载请注明原文地址: https://www.6miu.com/read-5018864.html

最新回复(0)