Display-inline,block,inline-block的区别
发布时间：2018-09-01 15:08:49 所属栏目：运营 来源：站长网
导读：display:block就是将元素表现为块级元素. block元素的特点是： 老是在新行上开始； 高度，行高以及顶和底边距都可节制； 宽度缺省是它的容器的100%，除非设定一个宽度 div, p, h1, form, ul 和 li是块元素的例子。 display:inline就是将元素表现为行内元素.
|
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;...} （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
