display:inline、block、inline-block的区别

http://www.cnblogs.com/jdonson/archive/2011/06/10/2077932.html

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;...}

  以下用个例子来说明三者的区别和用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>display:inline、block、inline-block的区别</title> </head> <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;} div.ib{display:inline;} a.ib{display:inline-block;} a.ib{display:block;} span.v{padding:0;margin:0;border:0;vertical-align:middle;height:100%} </style> <body> <div>div display:block</div> <div class="i">div display:inline</div> <div class="ib">div display:inline-block</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> </body> </html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

初探css3

属性选择器:   1.完全匹配的属性选择器。 就是完全匹配的字符串。     [id=article]{       color:red;    ...

21190
来自专栏james大数据架构

jQuery方法position()与offset()区别

参考别人写得比较明白的,红色部分为重点吧: 使用jQuery获取元素位置时,我们会使用position()或offset()方法,两个方法都返回一个包含两个属性...

18860
来自专栏程序员的知识天地

H5学习从0到1-H5列表(8)

1.无序列表:使用标签 ul,li 属性:disc(默认实心圆) circle (空心圆)square (方块)

11430
来自专栏逸鹏说道

jQuery选择器大全(48个代码片段+21幅图演示)1

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就...

36270
来自专栏天天

面向对象编程(随机点名)

16020
来自专栏前端布道

CSS选择器详解

最近在做一些面试的工作,我经常会问的一个问题就是:CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊,再追问下去就没了,这让我很是意外!...

35940
来自专栏calmound

JavaScript基础2---控制权DOM操作

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。 DOM将HTML文档呈现为带有元素,属性和文本的树结构(...

35040
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(一)CSS3概述,选择器

CSS3是CSS(层叠样式表)技术的升级版本,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

12830
来自专栏前端知识分享

第70天:jQuery基本选择器(一)

jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发

8510
来自专栏前端技术总结

CSS基础:block,inline和inline-block

css的display属性是前端开发中非常常见的属性,本文简单介绍下其中比较常用的属性值,即block、inline和inline-block。

3.1K1050

扫码关注云+社区

领取腾讯云代金券