深入理解display属性_html/css_WEB-ITnose-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

深入理解display属性_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:26 AM

目录 [1]block [2]inline [3]inline-block [4]none [5]list-item [6]run-in [7]table [8]inline-table [9]table-cell [10]table-caption

前面的话

　　display属性在网页布局中非常常见，但经常用到的仅仅是block、inline-block、inline和none等寥寥几个属性值，本文将详细介绍display属性的各个方面

定义

　　display属性用于规定元素生成的框类型，影响显示方式

　　初始值: inline

　　应用于: 所有元素

　　继承性: 无

　　[注意]IE7-浏览器不支持table类属性值及inherit

分类

block

【特征】

　　[1]不设置宽度时，宽度撑满一行

　　[2]独占一行

　　[3]支持宽高

【标签】

<address><article><aside><blockquote><body><dd><details><div><dl><dt><fieldset><figcaption><figure><footer><form><h1><header><hgroup><hr><html><legend><menuitem><nav><ol><optgroup><option><p><section><summary><ul>

　　[注意]menuitem标签只有firefox支持

【不支持的样式】

　　[1]vertical-align

inline

【特征】

　　[1]内容撑开宽度

　　[2]非独占一行

　　[3]不支持宽高

　　[4]代码换行被解析成空格

【标签】

<a><abbr><area><b><bdi><bdo><br><cite><code><del><dfn><em><i><ins><kbd><label><map><mark><output><pre class="brush:php;toolbar:false"><q><rp><rt><ruby><s><smap><small><span><strong><sub><sup><time><u><var><wbr>

【不支持的样式】

　　[1]background-position

　　[2]clear

　　[3]clip

　　[4]height | max-height | min-height

　　[5]width | max-width | min-width

　　[6]overflow

　　[7]text-align

inline-block

【特征】

　　[1]不设置宽度时，内容撑开宽度

　　[2]非独占一行

　　[3]支持宽高

　　[4]代码换行被解析成空格

【标签】

<audio><button><canvas><embed><iframe><img  alt="深入理解display属性_html/css_WEB-ITnose" ><input><keygen><meter><object><progress><select><textarea><video>

【不支持的样式】

　　[1]clear

　　[2]text-align

none

【特征】

　　隐藏元素并脱离文档流

【标签】

<base><link><meta><title><datalist><dialog><param><script><source><style>

list-item

【特征】

　　[1]不设置宽度时，宽度撑满一行

　　[2]独占一行

　　[3]支持宽高

run-in

　　run-in是一个有意思的块/行内元素混合，可以使某些块级元素成为下一个元素的行内部分。如果一个元素生成run-in框，而且该框后面是一个块级框，那么该run-in元素将成为块级框开始处的一个行内框，run-in框格式化成另一个元素中的行内框，但它们仍从文档中的父元素继承属性

　　[注意]只有safari和IE8+支持

<h3 id="run-in-test">run-in test</h3><p>paragraph</p>

　　若run-in框后面不是块级框时，run-in框本身将成为块级框

<span style="display:run-in">run-in test</span><span>paragraph</span>

表格类元素

table{display: table;}thead{display: table-header-group;}tbody{display: table-row-group;}tfoot{display: table-footer-group;}tr{display: table-row;}td,th{display: table-cell;}col{display: table-column;}colgroup{display: table-column-group;}caption{display: table-caption;}

　　表格类元素的display共有以上几种，

因为无法设置margin和padding用的较少，下面将着重介绍下、

这四个标签对应的display属性

table

**【特征】**

　　[1]不设置宽度时，宽度由内容撑开

　　[2]独占一行

　　[3]支持宽高

　　[4]默认具有表格特征，可设置table-layout、border-collapse、border-spacing等表格专有属性

inline-table

**【特征】**

　　[1]不设置宽度时，宽度由内容撑开

　　[2]非独占一行

　　[3]支持宽高

　　[4]默认具有表格特征，可设置table-layout、border-collapse、border-spacing等表格专有属性

table-cell

**【特征】**

　　[1]不设置宽度时，宽度由内容撑开

　　[2]非独占一行

　　[3]支持宽高

　　[4]垂直对齐

　　[5]同级等高

table-caption

**【特征】**

　　[1]不设置宽度时，宽度由内容撑开

　　[2]独占一行

　　[3]支持宽高

注意事项

【1】如果一个元素是绝对定位元素，float的值设置为none，对于浮动元素或绝对定位元素，计算值由声明值确定

【2】对于根元素，如果声明为值inline-table或table，都会得到计算值table，声明为none时则会得到同样的计算值none，所有其他display值都计算为block
、	、

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What is the viewport meta tag? Why is it important for responsive design?Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

See all articles