css display属性怎么用

silencement

发布时间：2019-05-26 16:45:49

4205人浏览过

来源于php中文网

原创

css display属性怎么用

display属性定义及用法

display属性在网页布局中用的非常之多，它的属性值也比较多，但是用的多的就block、inline-block、inline和none属性值，其它属性值很少见，所有在这就重点介绍一下常用的这几个属性值的用法；

在css中，display属性是用来定义元素应该生成的框的类型，经常用来将块状元素转换为内联元素、将内联元素转换为块状元素或者将块状元素/内联元素转换为inline-block元素，inline-block元素既有块状元素的特性已有内联元素的特性。

display属性语法格式

立即学习“前端免费学习笔记（深入）”；

1.css语法：display:none/inline/block/inline-block/list-item/run-in/table/inline-table/table-row-group/table-header-group/table-footer-group/table-row/table-colume-group/table-column/table-cell/table-caption/inherit

2.JavaScript 语法： object.style.display="inline"

display属性值说明

none：设置元素不显示

block：设置元素为块级元素

inline：设置元素为内联元素

inline-block：行内块元素，既有块状元素的特性已有内联元素的特性

Dompdf

dompdf是一个HTML到PDF转换器。在其核心，dompdf是一个（大部分）符合CSS 2.1标准的HTML布局和渲染引擎，使用PHP编写。它是一个以样式驱动的渲染器，它会下载并读取外部样式表，内联样式标签和单个HTML元素的样式属性。它还支持大多数表现性HTML属性。PDF渲染目前由PDFLib或由Wayne Munro编写的捆绑版本的R&OS CPDF类提供。（对R&OS类进行了一些重要的更改，但是）。为了使用dompdf与PDFLib，需要安装PDFLib PECL扩展。使用PD

下载

list-item：设置元素为列表

run-in：根据上下文作为块级元素或内联元素显示

compact / marker：已经从CSS2.1中删除

table：设置元素为块级表格来（类似

），表格前后有换行符

inline-table：设置元素为内联表格（类似

），表格前后没有换行符

table-row-group：设置元素为一个或多个行的分组（类似

）

table-header-group ：类似

标签

table-footer-group：类似

标签;table-row ：类似标签

display属性的none属性值

元素的display属性的属性值设置为none时，该元素将隐藏不显示，而其会脱离文档流，不占据网页空间；非常相关：css隐藏元素之display和visibility属性的用法笔记

实例





display属性的none属性值



元素1
元素2
元素3

css 想在布局中保持固定间距怎么办_使用 css flex gap 或 grid gap 控制间距

csshover背景渐变和文字颜色过渡卡顿怎么办_使用transition-background-color和transition-color同步

css渐变颜色在旧浏览器不显示怎么办_提供纯色作为降级方案

css 想让元素移动到指定位置有动画怎么办_设置 left/top 属性结合 keyframes 动画

css grid 布局_如何使用网格系统创建复杂布局

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：css font属性怎么用下一篇：css transform-origin属性怎么用

作者最新文章

TP6验证码验证失败的原因以及解决办法

2020-01-26 22:16

PHP7.4新特性汇总

2020-01-26 22:25

mysql正则匹配模糊查询某个字段

2020-01-27 21:18

PHP中字符串处理的一些常用函数

2020-01-27 21:32

PHP中的global关键字用法

2020-01-27 21:42

PHP中Trait的用法及示例

2020-01-29 22:21

php中常用的正则表达式使用方法

2020-01-30 22:30

ThinkPHP5.1中使用redis缓存

2020-01-30 22:43

ThinkPHP5中的事务操作

2020-01-30 22:49

如何设置cookie和删除cookie

2020-02-27 16:50

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机（JVM）的核心工作原理与性能调优方法，包括 JVM 内存结构、对象创建与回收流程、垃圾回收器（Serial、CMS、G1、ZGC）对比分析、常见内存泄漏与性能瓶颈排查，以及 JVM 参数调优与监控工具（jstat、jmap、jvisualvm）的实战使用。通过真实案例，帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

2026.01.20

PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.19

java用途介绍

本专题整合了java用途功能相关介绍，阅读专题下面的文章了解更多详细内容。

2026.01.19

java输出数组相关教程

本专题整合了java输出数组相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.19

java接口相关教程

本专题整合了java接口相关内容，阅读专题下面的文章了解更多详细内容。

2026.01.19

xml格式相关教程

本专题整合了xml格式相关教程汇总，阅读专题下面的文章了解更多详细内容。

2026.01.19

PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践，涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例，帮助开发者掌握使用 PHP 构建实时通信与推送服务的完整开发流程，适用于即时消息与高互动性应用场景。

2026.01.19