CSS中inlineblock什么意思-block错位呈现?

如果不是的话,那么什么特殊的标签名称适合我使用CSS的“内嵌块”?
或者我应该坚持使用一个类?

从我可以告诉<img>标记默认情况下是唯一的inline-block 。 为了安全起见,我会推荐一个类,你永远不知道什么时候改变某种types的所有元素会回来咬你。 或者,您可以随时编写自己的标签并分配display:inline-block; 到它。 这样你就不会改变标准元素的默认function…

严格地说, 没有 。 W3 HTML规范不会为任何元素指定默认的CSS属性值。 他们确实为HTML 4提供了一个“默认样式表” ,但是只能鼓励开发者使用它 – 这不是一个要求或任何types的要求。 HTML 5规范指出了“典型的默认显示属性”,但同样,这些不是必需的(也要记住,HTML 5仍然是一个工作草案 )。

因此,所有默认值都保留在浏览器中,以及开发者如何感觉元素应该显示给用户。 没有人能够保证某个特定的元素会以行inline-block或其他方式显示在某人的浏览器中。 你应该总是明确地设置,如果你想它发生。 不要依赖“违约”。

如果不是的话,那么什么特殊的标签名称适合我使用CSS的“内嵌块”? 或者我应该坚持使用一个类?

这取决于你以及你如何devise你的网页。 您应该始终使用语义上适合其中包含的内容的元素。 如果元素将始终用于需要inline-block显示的上下文中,那么通过所有方法将其设置为样式表中的内容。 否则,你将不得不诉诸类或更具体的select器,以使您的元素正确显示。

这是一个获取大多数HTML标签的默认显示值的小提琴。

原则上,它取决于浏览器display属性的默认值是为每个元素。 即使HTML5草案也没有规定必须使用的值,尽pipe它以CSS的forms呈现了元素的“预期呈现”。

浏览器使用这样的设置,除了在Firefox中,这只适用于buttonselect

在HTML5 CR的Rendering部分中, meterprogress元素被另外描述为具有内嵌块作为“期望的呈现”,并且实现了这些元素的浏览器似乎performance得那样。

由于所有这些元素具有相当专业化的含义,function和渲染特性,因此它们都不足以作为默认的内联块的元素来使用,并且可能具有各种含义。 你可以用这样的元素通常是spandiv ,这取决于你是喜欢内嵌还是作为默认渲染块。

如果你想inline-blockdiv你会给它一个类的名字。

是的,有一个元素默认为内联。

真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子:

您可以狠狠地点击这里:

这种表现是符合规范的应该有的表现(如果有人认为是bug就太()ay ()oy 了)。

不过,这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它,该怎么办呢?以下展示N种方法(欢迎补充)!

元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。考虑到代码可读性,显然连成一行的写法是不可取的,我们可以:

或者是借助HTML注释:

margin负值的大小与上下文的字体和文字大小相关,其中,间距对应大小值可以参见我之前“”一文part 6的统计表格:

由于外部环境的不确定性,以及最后一个元素多出的父margin值等问题,这个方法不适合大规模使用。

注意,为了向下兼容IE6/IE7等喝蒙牛长大的浏览器,最后一个列表的标签的结束(闭合)标签不能丢。

在HTML5中,我们直接:

好吧,虽然感觉上有点怪怪的,但是,这是OK的。

您可以狠狠地点击这里:

这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加:

您可以狠狠地点击这里(去年制作的一个简单demo):

补充:根据小杜在评论中中的说法,目前Chrome浏览器已经取消了最小字体限制。因此,上面的-webkit-text-size-adjust:none;代码估计时日不多了。

根据我去年的测试,该方法可以搞定基本上所有浏览器,包括吃“东鞋”、“西毒(胶囊)”、“南地(沟油)”、“北钙(三鹿)”的IE6/IE7浏览器,不过Opera浏览器下有蛋疼的问题:最小间距1像素,然后,letter-spacing再小就还原了。

一个是字符间距(letter-spacing)一个是单词间距(word-spacing),大同小异。据我测试,word-spacing的负值只要大到一定程度,其兼容性上的差异就可以被忽略。因为,貌似,word-spacing即使负值很大,也不会发生重叠。

您可以狠狠地点击这里:

与上面demo一样的效果,这里就不截图展示了。如果您使用Chrome浏览器,可能看到的是间距依旧存在。确实是有该问题,原因我是不清楚,不过我知道,可以添加display: table;display:inline-table;让Chrome浏览器也变得乖巧。

下面展示的是 使用letter-spacingword-spacing去除格栅单元见间隔方法(注意,其针对的是block水平的元素,因此对IE8-浏览器做了hack处理):

以下是一个名叫的人提供的方法:

也就是上面一系列CSS方法的组组合合。

其他去除间距的方法肯定还有,欢迎大家通过方式进行补充。上文部分方法可能有测试不周全之处,因此,部分细节上可能会有纰漏,欢迎指正。

本文为原创文章,转载请注明来自[]

前言 原文是在前面对`transform引起的z-index“失效”`探究过程中找到的,非常棒,所以转载分享。本文大多摘自原文,进行了压缩,也加入了我自己的理解,希望对大

一: 继承 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法。那么我们现在主要研究css,css就是在设置属性的。不会牵扯到方法的层面

Css语法 一、标称名 \{ 属性:值;\} 一个样式的语法是由三部分构成:选择器、属性和属性值 二、id和class id和class是HTML元

层叠 什么选择器在层叠中胜出取决于三个因素。 重要性 专用性 源代码次序 重要性 CSS中的`!important`语句可以使让一条规则总是优

当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上? 其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关。 元素的最终样式可以在多个

前言 原文是在前面对`transform引起的z-index“失效”`探究过程中找到的,非常棒,所以转载分享。本文大多摘自原文,进行了压缩,也加入了我自己的理解,希望对大

一: 继承 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法。那么我们现在主要研究css,css就是在设置属性的。不会牵扯到方法的层面

当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上? 其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关。 元素的最终样式可以在多个

Css语法 一、标称名 \{ 属性:值;\} 一个样式的语法是由三部分构成:选择器、属性和属性值 二、id和class id和class是HTML元

层叠 什么选择器在层叠中胜出取决于三个因素。 重要性 专用性 源代码次序 重要性 CSS中的`!important`语句可以使让一条规则总是优

我要回帖

更多关于 inlineblock什么意思 的文章

 

随机推荐