display布局
block
display
是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值,这与元素的类型有关。对于大多数元素它们的默认值通常是 block
或 inline
。一个 block
元素通常被叫做块级元素。一个inline
元素通常被叫做行内元素。div
是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p
、 form
和HTML5中的新元素: header
、 footer
、 section
等等。
inline
span
是一个标准的行内元素。一个行内元素可以在段落中包裹一些文字而不会打乱段落的布局。 a
元素是最常用的行内元素,它可以被用作链接。
none
另一个常用的display值是 none
。一些特殊元素的默认 display 值是它,例如 script
。 display:none
通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
它和 visibility
属性不一样。把 display
设置成 none
元素不会占据它本来应该显示的空间,但是设置成 visibility: hidden;
还会占据空间。
其他display值:
/* <display-outside> values */
display: block;
display: inline;
display: run-in;
/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;
/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;
/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
/* <display-box> values */
display: contents;
display: none;
/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;
/* Global values */
display: inherit;
display: initial;
display: unset;