HTML元素默认显示:inline-block?
<div>
默认为block
<span>
默认为inline
有没有一个默认为inline-block
?
如果不是的话,那么什么特殊的标签名称适合我使用CSS的“内嵌块”?
或者我应该坚持使用一个类?
从我可以告诉<img>
标记默认情况下是唯一的inline-block
。 为了安全起见,我会推荐一个类,你永远不知道什么时候改变某种types的所有元素会回来咬你。 或者,您可以随时编写自己的标签并分配display:inline-block;
到它。 这样你就不会改变标准元素的默认function…
编辑
也看起来, button
, textarea
, input
和select
元素也是inline-block
资料来源:
根据这个img
是inline-block
http://dev.w3.org/html5/markup/img.html#img-display
这里声称button
, textarea
等也是: http : //www.w3.org/TR/CSS2/sample.html
编辑#2
虽然上面的源声称, img
标签是inline-block
,似乎(感谢Alohci),他们只是inline
http://jsfiddle.net/AQ2yp/
以下在Firefox中进行了testing:
button
是inline-block
: http : //jsfiddle.net/GLS4P/
textarea
是inline
: http : //jsfiddle.net/235vc/
input
inline
: http : //jsfiddle.net/RFKe8/
select
是inline-block
: http : //jsfiddle.net/5B4Gs/
有没有一个默认为
inline-block
?
严格地说, 没有 。 W3 HTML规范不会为任何元素指定默认的CSS属性值。 他们确实为HTML 4提供了一个“默认样式表” ,但是只能鼓励开发者使用它 – 这不是一个要求或任何types的要求。 HTML 5规范指出了“典型的默认显示属性”,但同样,这些不是必需的(也要记住,HTML 5仍然是一个工作草案 )。
因此,所有默认值都保留在浏览器中,以及开发者如何感觉元素应该显示给用户。 没有人能够保证某个特定的元素会以行inline-block
或其他方式显示在某人的浏览器中。 你应该总是明确地设置,如果你想它发生。 不要依赖“违约”。
如果不是的话,那么什么特殊的标签名称适合我使用CSS的“内嵌块”? 或者我应该坚持使用一个类?
这取决于你以及你如何devise你的网页。 您应该始终使用语义上适合其中包含的内容的元素。 如果元素将始终用于需要inline-block
显示的上下文中,那么通过所有方法将其设置为样式表中的内容。 否则,你将不得不诉诸类或更具体的select器,以使您的元素正确显示。
这是一个获取大多数HTML标签的默认显示值的小提琴。
小提琴
在chrome中,默认的内联块元素是: "INPUT", "BUTTON", "TEXTAREA", "SELECT"
原则上,它取决于浏览器display
属性的默认值是为每个元素。 即使HTML5草案也没有规定必须使用的值,尽pipe它以CSS的forms呈现了元素的“预期呈现”。
根据CSS 2.1规范中默认的HTML 样式表 , 缺省 display: inline-block
的元素是button
, input
, select
和textarea
。 浏览器使用这样的设置,除了在Firefox中,这只适用于button
和select
。
在HTML5 CR的Rendering部分中, meter
和progress
元素被另外描述为具有内嵌块作为“期望的呈现”,并且实现了这些元素的浏览器似乎performance得那样。 keygen
元素也被描述为一个内联块,但是Firefox并没有这样做(它在DOM中内部实现了keygen
)。 IE根本不支持keygen
; Chrome按照build议执行它。
由于所有这些元素具有相当专业化的含义,function和渲染特性,因此它们都不足以作为默认的内联块的元素来使用,并且可能具有各种含义。 你可以用这样的元素通常是span
或div
,这取决于你是喜欢内嵌还是作为默认渲染块。
button
, textarea
, input
,并select
默认为inline-block
。
如果你想inline-block
的div
你会给它一个类的名字。
.inline-block { display: inline-block }
然后…
<div class="inline-block"></div>
更正
我误解了img
。 它似乎默认为inline
而不是inline-block
是的,有一个元素默认为内联。
答案是span元素。
<span>