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>
分享到:
相关推荐
NULL 博文链接:https://hc24.iteye.com/blog/832493
NULL 博文链接:https://tianqiushi.iteye.com/blog/2101378
display:inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。 但对于这个属性不是所有浏览器都识别。 支持的浏览器有:Opera、Safari。 但很遗憾,最...
NULL 博文链接:https://qiyan86-163-com.iteye.com/blog/554746
在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性,它可以将对象呈递为内联对象,但是对象的内容作为块对象呈递,旁边的内联对象会被呈递在同一行内,允许空格。本文向大家描述一下CSS属性...
但是,由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与文字,图片混排,可内嵌block属性元素,可以可以置身于inline水平的元素中。...
曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码只是为了兼容 IE6、7 而已...
1、display:inline-block 让一个元素具有“区块元素”的属性(可以设置width和height),又具有“内联元素”的属性(不产生换行)。 2、IE中的inline-block IE6不支持这个属性,但IE8开始支持这个属性。 让IE6...
NULL 博文链接:https://qiyan86-163-com.iteye.com/blog/551754
DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 ...
基本方法是使用 display: inline-block, vertical-align: middle样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。 内容区声明的宽度不能大于容器的100% 减去0.25em...
display:block就是将元素显示为块级元素. block元素的特点是:总是在新行上开始;高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度, , , <form>, <ul> 和 是块元素的例子。
今天在写布局的时候发现的一个bug,如果不这样就达不到预期的效果,无法两行排列,原来ie6、ie7下对display:inline-block不支持,所以需要用到css hack才可以
为要居中元素的父元素应用text-align:center,为要居中的元素设定display:inline-block.这样设定就可以得到我们想要的结果
在使用 CSS 实现表现的时候,会经常接触到 display:inline-block 这一属性,无论是初接触 Web 标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊。 复制代码代码如下: display:inline-block 将对象...
建立一个宽度很长的一个页面,里面包含许多列,外面的div块的宽度不能确定,若是外面的div块的宽度不够 就会导致部分子div块移动到下面的一行,下面与大家分享下display:inline-block的使用示例
结果如下: FF3: IE6(使用IE Tester): ...display:inline-block;}.mt-inline-block{position:relative;display:inline-block}* html .mt-inline-block{display:inline}*:first-child+html .mt-inline-b