是否有关于“何时使用 display:block when :inline 和when :inline-block”的指南？为什么？
您知道关于“何时使用 display:block 当 :inline 和何时 :inline-block”的好文章吗？为什么？
当我们必须覆盖显示时：??通过任何 HTML 标签/元素的 css？
Do you know any good article on "When to use display:block when :inline and when :inline-block" and why?
and when we will have to override display:?? through css for any HTML tag/element?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
inline- 将元素视为内联文本块。width和height没有意义block- 将元素视为矩形。可以指定width和heightinline-block- 使元素与文本内联流动，但允许width和要指定的高度。无论如何，元素默认为其中之一。例如：
、、->内联、->块inline- Treats the element as though it were an inline chunk of text.widthandheightare meaninglessblock- Treats the element as as rectangle.widthandheightcan be specifiedinline-block- Flows a element inline with the text, but allowswidthandheightto be specified.Elements default to one of these anyway. For example:
<span>,<em>,<strong>->inline<div>,<p>->block块和内联的用例非常明显。如果您想将样式应用于一小段文本（例如几个单词），请使用内联，并为具有宽度/高度的矩形区域使用块。
至于内联块，它自然地用于图像。当您想让小块像常规文本一样从左到右、从上到下流动，但仍然像块一样时，它非常有用。
注意：在 90% 的情况下，您不需要指定
display属性，只需使用带有类的适当元素，例如或<; em>表示内联，或表示块。它发挥作用的主要方式是当使用 Javascript 隐藏内容时，您只需将元素恢复为其原始/自然显示属性。The use cases for block and inline are pretty obvious. Use inline if you want to apply a style to a short span of text (e.g. a few words), and use block for rectangles areas with width/height.
As for inline-block, it's used naturally for images. It's useful when you want to have small blocks flowing left-to-right, top-to-bottom like regular text, but still have them like blocks.
Note: in 90% of cases you don't need to specify the
displayproperty, just use appropriate elements with classes, like<strong>or<em>for inline,<div>or<p>for blocks. The main way it comes into play is when hiding stuff with Javascript, you just need to revert the element to its original/natural display attribute.quirksmode.org 有一个很好的解释和屏幕截图：
http://www.quirksmode.org/css/display .html
quirksmode.org has a good explanation with screenshots:
http://www.quirksmode.org/css/display.html
默认情况下，分区显示为块。这会将其放在自己的线上并扩展以填充其容器。内联元素基本上将其划分为一个跨度（在默认状态下）。您无法再对其应用太多任何内容，并且它会与任何文本内联显示。你可以得到两者之间的中位数：inline-block。这允许在分区上完成更多样式设置，包括设置宽度和高度，但仍然显示与文本内联的“块”，有点像图像。
因此，内联、内联块和块更像是元素的级别，每个级别都具有可以/不能应用于该元素的某些样式。
By default a division displays as a block. This puts it on its own line and expands to fill its container. An inline element basically makes a division into a span (in its default state). You can't apply much anything to it anymore and it displays inline with any text. You can get a median between the two: inline-block. This allows more styling to be done on the division, including setting a width and height, but still displays the 'block' inline with the text, sort of like an image.
So, inline, inline-block, and block are more like levels of an element, each with certain styles that can/cannot be applied to the element.