源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 1543|回复: 0

[CSS/Html] CSS display 属性详解及用法,举例说明

[复制链接]

3096

主题

3497

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
269266
发表于 2023-5-29 09:26:07 | 显示全部楼层 |阅读模式
属性定义及使用说明

display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局,例如流式布局、网格布局或弹性布局。

形式上,display 属性设置元素的内部和外部的显示类型。

实例

设置 display 不同属性:
  1. p.ex1 {display: none;}
  2. p.ex2 {display: inline;}
  3. p.ex3 {display: block;}
  4. p.ex4 {display: inline-block;}
复制代码

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


更多实例

实例

设置 display: contents; 显示:
  1. .a {
  2.   display: contents;
  3.   border: 2px solid red;
  4.   background-color: #ccc;
  5.   padding: 10px;
  6.   width: 200px;
  7. }

  8. .b {
  9.   border: 2px solid blue;
  10.   background-color: lightblue;
  11.   padding: 10px;
  12. }
复制代码

实例

设置 display: inherit; 显示,演示了如何使用继承属性的值:
  1. body {
  2.   display: inline;
  3. }

  4. p {
  5.   display: inherit;
  6. }
复制代码

实例

设置 display: flex; 显示:
  1. div {
  2.   display: flex;
  3.   flex-direction: row-reverse;
  4. }
复制代码

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-4-16 05:08 , Processed in 0.030365 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明