<div>
默认为 block
<span>
默认为 inline
有没有默认的inline-block
?
如果不是,那么什么特殊的标记名称适合我使用CSS来应用“内联块”?
还是我应该坚持使用课程?
<div>
默认为 block
<span>
默认为 inline
有没有默认的inline-block
?
如果不是,那么什么特殊的标记名称适合我使用CSS来应用“内联块”?
还是我应该坚持使用课程?
Answers:
据我所知,<img>
标签是inline-block
默认情况下唯一的标签。为了安全起见,我建议您上一堂课,您永远都不知道何时更改某个特定类型的所有元素会再次咬住您。或者,您始终可以组成自己的标签并为其分配标签display:inline-block;
。这样,您就不会更改标准元素的默认功能...
编辑
还可以看出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中进行了测试:
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
有没有默认的
inline-block
?
严格来说,没有。W3 HTML规范从未为任何元素指定默认的CSS属性值。他们的确为HTML 4提供了“默认样式表”,但是仅鼓励开发人员使用它-这不是要求,也不是任何强制性要求。HTML 5规范指示“典型的默认显示属性”,但同样,这些属性不是必需的(还要记住,HTML 5仍然是有效的草案)。
这样一来,所有默认值都将留给浏览器,以及开发人员实际如何将元素显示给用户。没有人可以保证特定元素会inline-block
在某人的浏览器中显示为或以其他方式显示。如果您希望发生这种情况,则应始终明确设置。不要依赖“默认值”。
如果不是,那么什么特殊的标记名称适合我使用CSS来应用“内联块”?还是应该坚持使用课程?
这取决于您以及您如何设计页面。您应该始终使用语义上适合其中包含的内容的元素。如果该元素将始终在需要inline-block
显示的上下文中使用,请务必将其设置为样式表中的元素。否则,您将不得不诉诸类或更具体的选择器,以使元素正确显示。
原则上,它取决于浏览器的默认值 display
每个元素属性是。即使HTML5草案也没有规定必须使用什么值,尽管它以CSS的形式呈现了元素的“预期呈现”。
根据该默认样式表中的CSS 2.1规范的HTML,该具备的要素display: inline-block
在默认情况下是button
,input
,select
,和textarea
。浏览器使用此类设置,但在Firefox中除外,该设置仅适用于button
和select
。
在HTML5 CR的“渲染”部分中,meter
和progress
元素还被描述为具有内联块作为“预期的渲染”,并且实现了这些元素的浏览器似乎具有这种行为。该keygen
元件也被描述为是内联块,但Firefox没有做到这一点(它实现keygen
在内部作为select
在DOM); IE完全不支持keygen
。Chrome根据建议实施。
由于所有这些元素都具有相当特殊的含义,功能和渲染特质,因此它们都不适合作为通用元素使用,默认情况下它是一个内联块,并且可能具有各种含义。对于此类元素,您可以正常使用span
或div
,具体取决于您是希望将内联还是块作为默认呈现。
现在,您可以创建一个Custom元素(例如:<inline-block>
或其他),其CSS属性默认display
设置为inline-block
。
customElements.define( 'inline-block', class extends HTMLElement {
constructor() {
super()
this.attachShadow( { mode: 'open' } )
.innerHTML = `<style> :host { display: inline-block } </style>
<slot></slot>`
}
} )
#hw { background-color: lightblue }
<inline-block id="hw">Hello World</inline-block>
目前,这并不是对这个问题的真正答案,但是有足够的支持,也许有一天会如此。
<seg>
“段”的缩写。如,线段。
使用polyfill:
<style> seg { display: inline-block; } </style>
如果有一个正式的名称,那真的很好,但是没有一个,所以这是我所知道的这种元素的最佳(IMO)建议名称。
是的,有一个默认为内联的元素。
答案是span元素。
<span>
inline-block
不要inline
<img>
。