CSS Display

初发布于 18 May 2015 | in CSS

display 是 CSS 用于控制布局最重要的属性。

对于要显示的大多数 HTML 元素，其 display 默认值取决于元素的类型，即 block 或者 inline。（这一点在 HTML Blocks章节已提到过）

注意：通过 display 属性仅改变元素显示的方式，而不改变元素的类型。因此，一个看起来是块级元素的 inline 元素，不允许包裹其他块级元素。

隐藏 HTML 元素

最常见的通过 JS 来隐藏和显示元素，不通过删除和重新创造它们的方法就是：

  • display: none; 隐藏以后不占据空间，看起来那个元素不在那里
  • visibility: hidden; 仍然占据着本来的空间，尽管看不见，还在影响着页面布局。

visibility

该属性还可以取值 visible，此为默认值。

针对表格元素，还可以取值为 collapse，删除一行或一列，仍然 take up space。如果该属性值被用在了其他元素上，效果同 hidden。

display

除了 block 和 inline 还可以取的值：

取值作用
inline-block使元素成为一个行内级别、可封装块级元素。使用该属性值可以轻松取代旧的利用 float:left; 方式实现的 a grid of boxes 填充满浏览器的效果
flexCSS3 新属性，将元素显示为块级 flex 元素
inline-flexCSS3 新属性，将元素显示为行内级 flex 元素
inline-table显示为行内级的表格
list-item使元素表现地像 <li> 元素，前面带默认小实心圆
run-in看环境决定是显示为 block 还是 inline 级别的样子
table使元素表现地像 <table> 元素
table-caption使元素表现地像 <caption> 元素
table-column-group使元素表现地像 <colgroup> 元素
table-header-group使元素表现地像 <thead> 元素
table-footer-group使元素表现地像 <tfoot> 元素
table-row-group使元素表现地像 <tbody> 元素
table-cell使元素表现地像 <td> 元素
table-column使元素表现地像 <col> 元素
table-row使元素表现地像 <tr> 元素

Overflow

overflow 属性定义了如果内容超出了一个元素的盒模型将会发生什么。

取值：

  • visible 默认值，会无视元素的边界限定，把内容全部显示出来。
  • hidden 超出部分被剪切掉，invisible
  • scroll 超出部分被剪切掉，但是会添加一个滚动条用于查看 the rest of the content
  • auto 如果有超出边界的内容，添加 scroll-bar

<body> 元素的 overflow 默认值是 auto。

overflow-x 属性定义了如果内容超出了一个元素的盒模型，内容的 left/right 边会怎么处理。取值同 overflow .

overflow-y 属性定义了如果内容超出了一个元素的盒模型，内容的 top/bottom 边会怎么处理。取值同 overflow .