关于display的block、inline、inline-block的联系和区别
来源:互联网 发布:怎么入驻淘宝网 编辑:程序博客网 时间:2024/04/29 03:56
display:block就是将元素显示为块级元素.
block元素的特点是:
总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
display:inline就是将元素显示为行内元素.
inline元素的特点是:
和其他元素都在一行上;
高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
inline和block可以控制一个元素的行宽高等特性,需要切换的情况如下:
让一个inline元素从新行开始;
让块元素和其他元素保持在一行上;
控制inline元素的宽度(对导航条特别有用);
控制inline元素的高度;
无须设定宽度即可为一个块元素设定与文字同宽的背景色。
display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。
inline-block的元素特点:
将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)
并不是所有浏览器都支持此属性,目前支持的浏览器有:Opera、Safari在IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析,也不难理解为什么IE下,对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。
IE下块元素如何实现display:inline-block的效果?
有两种方法:
1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回inline或block,layout不会消失)。代码如下(...为省略的其他属性内容):
div {display:inline-block;...}
div {display:inline;}
2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如下:
div {display:inline; zoom:1;...}
<!--------示例代码演示----------->
<title>区别dispaly的inline、block、inline-block</title><style>.i1{ display:inline; background-color:#9FC; height:30px;}.ib{display:inline-block; background-color:#FF3; height:30px;}.sb{display:block;}.sib{display:inline-block; background-color:#FF3; height:30px;}.v{padding:0;margin:0;border:0;vertical-align:middle;height:100%}</style></head><body><div>div display:block</div> <div class="i1">div class display:inline</div> <div class="ib">div class display:inline-block</div><!---使用span测试行内样式---> <span class="s1">span class display:inline</span> <span class="sb">span class display:block</span> <span class="sib">span class display:inline-block</span> <span>这是一个span 的行内元素</span><br /> <div><span class="v"></span>vertical-align:middle</div> </body>
更详细解释:http://ued.taobao.org/blog/2012/08/inline-block/
- 关于display的block、inline、inline-block的联系和区别
- display:inline、display:block和display:inline-block的区别
- display:inline block inline-block 的区别
- display:inline block inline-block 的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- html表单新增的好用的小属性总结
- Torque 3.0使用指南
- Linux查看系统信息
- 小记css的margin collapsing
- Android Listview 加载图片优化--本地加载大量图片,解决滑动卡顿现象(滑动停止加载图片)
- 关于display的block、inline、inline-block的联系和区别
- CWnd::OnActivate
- Oracle中静态注册监听的问题
- ORA-01747: invalid user.table.column, table.column, or column specification
- 移动端js触摸事件
- 【啊哈!算法】算法10:二叉树
- Android Toast 重复显示问题
- js定时
- 新开一个线程易错点