Display

块级元素

block 工具类生成一个块级元素盒子,在常规流中的该元素前后生成换行符。

CSS

行内块级元素

inline-block 工具类生成一个块级元素盒子,该元素将和周围的内容一起浮动,就像是一个单独的行内盒子一样(它表现的更像一个被替代的元素)。

CSS

行内元素

inline 工具类生成一个或多个行内元素盒子并且不会在它们前后生成换行符,在常规流中,如果同行内有空间,下一个元素将在同一行上。

inline
inline-block
CSS

Flow Root

flow-root 工具类生成一个块级元素盒子,它用于建立一个新的 块级格式上下文,定义格式化根元素的所在位置。

ClassProperties
flow-rootdisplay: flow-root;
CSS

内容

contents 工具类不会使它们自己生成特定的盒子,它们会被自己的伪盒子和次级盒子代替。

block
contents
CSS

隐藏

失效一个元素的 display ,布局中不产生影响(文档渲染为该元素不存在)。 所有后代元素均不会显示。 如果仍在布局中保留元素的占用空间,请使用 visibility 属性代替。

block
hidden
CSS

Visibility

用于控制一个元素的可见性的工具类。 visibility CSS 属性会在不改变文档布局的情况下显示或隐藏元素。 该属性也可以隐藏位于 <table> 中的行和列。

visible
invisible
CSS

Backface Visibility

backface 工具类可设置元素背面朝向用户时,它是否可见。

visible
hidden
CSS

List Item

list-item 工具类生成一个 ::marker 伪元素,其内容由它的 list-style 属性(例如着重号(bullet point))指定,并为它的内容生成一个指定类型的盒子。

block
list-item
CSS