(十二)学习CSS之display属性

参考:http://www.w3school.com.cn/cssref/pr_class_display.asp

浏览器支持

所有主流浏览器都支持 display 属性。

注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table- column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。

定义和用法

display 属性规定元素应该生成的框的类型。

说明

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。

值               描述
none             此元素不会被显示。
block            此元素将显示为块级元素,此元素前后会带有换行符。
inline            默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block         行内块元素。(CSS2.1 新增的值)
list-item             此元素会作为列表显示。
run-in            此元素会根据上下文作为块级元素或内联元素显示。
compact           CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker            CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table            此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table        此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group      此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group    此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group    此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row          此元素会作为一个表格行显示(类似 <tr>)。
table-column-group    此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column         此元素会作为一个单元格列显示(类似 <col>)
table-cell          此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption        此元素会作为一个表格标题显示(类似 <caption>)
inherit           规定应该从父元素继承 display 属性的值。

默认值:inline。

时间: 2024-10-20 18:38:28

(十二)学习CSS之display属性的相关文章

(二)学习CSS之cursor属性

参考:http://www.w3school.com.cn/tiy/t.asp?f=csse_zindex cursor 属性规定要显示的光标的类型(形状). <html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p> <span style="cursor:auto"> Auto</span><br /> <span style="cursor:cros

还需要学习的十二种CSS选择器

在前面的文章中,我们在介绍了<五种你必须彻底了解的CSS选择器>,现在向大家介绍,还需要学习的另外十二种CSS选择器.如果你还没有用过,就好好学习一下,如果你已经熟知了就当是温习. 一.X:link X:visited X:hover X:active 伪类 a:link { color: red; }a:visted { color: purple; } 伪类选择器,visted已被访问过的样式,hover鼠标经过的样式,link未被访问的样式.三种伪类选择器常用于链接,但不是说只适用于链接

CSS中display属性:block、inline和inline-block的区别

最近写HTML遇到一个问题:我想设置span的宽度和高度,但是在IE9和chrome下总是不起效果.代码和效果图如下: <head> <style> span{ background-color:#43be60; width:100px; height:50px; margin-top:20px; margin-left:20px; } </style> </head> <body> <div style="background-

CSS的display属性

网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 1.把元素显示为内联元素和把元素显示为块级元素 <style type="text/css"> div{ display:inline; background:red;}/*区块元素将转换为内联元素*/ span{ display:block; background:green;}/*将内联元素转换为区块元素*/ </style> </head> <bo

css笔记-display属性

css笔记-display属性 display属性可取值 display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | co

CSS里display属性

css里display属性 在了解css的display属性之前,我想先介绍一下display属性所能改变的元素都有什么. 元素类型 元素类型可分为三种,分别是: 块状元素(例如div.dl.form.p等) 内联元素(例如a.b.br.img.input等) 可变元素 也可以分为:块状元素.内联元素.内联块元素 而在盒子模型可通过display属性改变默认的显示类型. display的属性 盒子模型可通过display属性来改变默认的显示类型 display的属性值 display的属性值有许

如何理解CSS的display属性

在布局中, display 属性是最重要的CSS属性之一.其最常见的属性值有 block , inline , none , table 以及 inline-block .最近的新宠为 flex ,因为它是专门为布局创建的 display 属性.新出现的 grid (最近仍比较活跃)是另外一个指定的布局属性,其很快就会广泛被使用. 这篇文章比我预期的要长很多,你可以选择性进行阅读,但是我更希望你可以静下心来阅读整篇文章. 表内容 通过创建各种响应式设计,对于 display 以及 positio

CSS中display属性

一开始觉得挺简单的,要么是块的,自己在这个桌上吃饭了了,别人就不能在这个桌上吃饭了,要么是内联的,自己在这个桌上吃饭,只要桌上有空座,别人还是可以坐到这儿的.等到了使用的时候发现并没有那么简单啊~  一.HTML元素分类 1.内联元素(inline) ①元素显示方式:“文本方式”,1个接着1个,不单独占一个桌吃饭. ②内嵌元素也必须是内联元素:如<a></a>,不能在里面嵌套<div></div>等块级元素. ③常见的标签有:<a>,<in

(转)CSS的display属性

原文链接:http://www.cnblogs.com/xieon1986/articles/1424022.html display属性中:block:块状显示,在元素后面添加换行符,也就是说其他元素不能在其后面并列显示.inline:内联显示,在元素后面删除换行符,多个元素可以在一行内并列显示. 重点:display属性的浏览器兼容表及用法详解 该CSS属性用来设定对象如何显示. 值:block | none | inline | inline-block | list-item | tab