`
bulote
  • 浏览: 1307647 次
文章分类
社区版块
存档分类
最新评论

display属性的block,inline和inline-block

 
阅读更多

none<wbr> 此元素不会被显示。<wbr><br></wbr></wbr>

block 此元素将显示为块级元素,此元素前后会带有换行符。<wbr><br></wbr>

inline 默认。此元素会被显示为内联元素,元素前后没有换行符。<wbr><br></wbr>

inline-block 行内块元素。(CSS2.1 新增的值)<wbr><br></wbr>

<wbr></wbr>

在css中,inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。

<wbr></wbr>

旁边的内联对象会被呈递在同一行内,允许空格。但是这个属性目前不是所有的浏览器都支持,只有Opera和Safari支持,FireFox3和IE8据说将会支持,Firefox2和IE使用特殊办法可以实现这种效果

分享到:
评论

相关推荐

    深入解析CSS的display:inline-block属性的使用

    但是,由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与文字,图片混排,可内嵌block属性元素,可以可以置身于inline水平的元素中。...

    display:inline、block、inline-block的区别(转的)

    NULL 博文链接:https://tianqiushi.iteye.com/blog/2101378

    关于css display: inline block inline-block的区别分析

    但很遗憾,最流行的 IE 和 Firefox 却不支持这个属性(在 Firefox3 版本中将会支持 display:inline-block)。不过 Firefox 下却有私有属性 -moz-inline-box 和inline-block 形似,为什么是“形似”而不是“神似”呢...

    css之display属性之inline-block布局实现详解

    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,inline-block 的详细应用

    NULL 博文链接:https://hc24.iteye.com/blog/832493

    CSS属性display:inline-block用法深入理解

    在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性,它可以将对象呈递为内联对象,但是对象的内容作为块对象呈递,旁边的内联对象会被呈递在同一行内,允许空格。本文向大家描述一下CSS属性...

    带你深入剖析inline-block属性值的前世今生

    本文将带你深入剖析该属性值的前世今生,让你更好的理解和运用 inline-block。(本文约定 display:inline-block 简写为 inline-block) 开篇我们来看几个问题: IE6、7 真的不支持 display:inline-block 吗?di

    IE6的inline-block

    1、display:inline-block 让一个元素具有“区块元素”的属性(可以设置width和height),又具有“内联元素”的属性(不产生换行)。 2、IE中的inline-block IE6不支持这个属性,但IE8开始支持这个属性。 让IE6...

    兼容性的 inline-block 属性

    一年前网上还找不到关于 inline-block 属性的文章,为了方便大家更好的理解该属性,当时总结整理了篇《display:inline-block的深入理解》。 而现在对于 inline-block 属性运用的需求也越来越多,可惜依旧只有 Fire...

    有关display:inline-block在FF出现空白的解决方案

    NULL 博文链接:https://qiyan86-163-com.iteye.com/blog/551754

    display:inline-block的原理分析

    在使用 CSS 实现表现的时候,会经常接触到 display:inline-block 这一属性,无论是初接触 Web 标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊。 复制代码代码如下: display:inline-block 将对象...

    CSS inline-block属性概述及其使用示例

    Inline-block是元素display属性的一个值。这个名字的由来是因为,可以简单的解释为inline+block ;display设置这个值的元素,兼具行内元素( inline elements)跟块级元素(block elements)的特征。块级元素(block...

    让IE6/IE7支持display:inline-block属性的两种方法

    在IE6和IE7中这个版本的IE流量器中,对display:inline-block属性支持不佳,这也是一个经典的BUG。 有两种方式解决这个问题,让IE6/IE7 支持 display:inline-block 的方法。 复制代码代码如下:&lt;ul&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/...

    使用display:inline-block居中没有宽度的元素

    为要居中元素的父元素应用text-align:center,为要居中的元素设定display:inline-block.这样设定就可以得到我们想要的结果

    深入display:inline-block

    在使用 CSS 实现表现的时候,会经常接触到 display:inline-block 这一属性,无论是初接触 Web 标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊。display:inline-block 将对象呈递为内联对象,但是...

    css几种解决inline-block间隙的方案(整理)

    为了弥补inline和block的不足,又扩充了inline-block属性; inline-blcok可以将对象呈递为内联对象,而内容作为块对象呈递。 通俗点讲就是“可定宽高的堆在一起”显示 为什么会有间隙 inline-blcok块之间的不可见...

Global site tag (gtag.js) - Google Analytics