css中display的属性

本文详细介绍了 CSS 中 display 属性的功能及其使用方法。该属性用于指定元素的渲染盒类型,包括 block、inline 和 none 等多种选项。此外还探讨了 display 在 HTML 和 XML 中的默认行为。

display

« CSS « CSS Reference

Summary

The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.

In addition to the many different display box types, the value none allows the display of an element to be turned off; all child elements also have their display turned off. The document is rendered as though the element did not exist in the document tree.

Syntax

display:  <display-value> | 

inherit

Values

<display-value> can be any of the following values:

none
Turns off the display of an element (it has no effect on layout); all child elements also have their display turned off. The document is rendered as though the element did not exist.  
To render an element box's dimensions, yet have its contents be invisible, see the   visibility  property.
inline
The element generates one or more inline element boxes.
block
The element generates a block element box.
inline-block   Requires Gecko 1.9
Introduced in CSS 2.1. The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).
list-item
The element generates a block box for the content and a separate list-item inline box.
compact
(Unsupported, dropped from the CSS 2.1 standard)
run-in
Unimplemented  in Gecko/Firefox,   bug 2056.
  1. If the run-in box contains a block box, same as block.
  2. If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.
  3. If a inline box follows, the run-in box becomes a block box.
table
Behaves like the  <table> HTML element.
inline-table   New in Firefox 3
The  inline-table value does not have a direct mapping in HTML.
table-caption
Behaves like the  <caption> HTML element.
table-column | table-column-group
These elements behave like the corresponding  <col> and  <colgroup> HTML elements.
table-header-group | table-row-group | table-footer-group
These elements behave like the corresponding  <thead> | <tbody> | < tfoot> HTML elements.
table-row
Behaves like the  <tr> HTML element.
table-cell
Behaves like the  <td> HTML element.
摘自: https://developer.mozilla.org/en/CSS/display
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值