0

0

css中display属性是什么意思?怎么用?【示例总结】

藏色散人

藏色散人

发布时间:2018-08-29 11:43:41

|

20467人浏览过

|

来源于php中文网

原创

我们在进行网页前端开发的时候,为了使网站在视觉上显得更加美观,效果更加丰富,css的强大属性自然是功不可没。那么这里就要提到 一个至关重要的属性,css display属性。那么有的新手可能就会问,css中display是什么意思?css display怎么用?

本篇文章就给大家详细的介绍css display属性的具体用法,希望能解决大家的疑问。(为了便于大家理解本篇文章,推荐阅读我的这篇文章【html元素是怎么区分的?】其中有关于块级元素和行内元素的具体介绍)

首先我给大家列举出 css display常用的几个值:none、block、inline、inline-block

接下来我们通过具体的代码实例来一一详解css display属性用法。

一、css display block属性具体示例介绍

立即学习前端免费学习笔记(深入)”;




    
    css display:block属性实例
    


以上代码通过浏览器访问,效果如图1:

eb43f3f17448da89e19b35d8d70e4b7.png

我们把a标签中的display:block;属性注释掉,其效果如图2:

1b897a81fdb8a9e72c12eec7d6c0f42.png

那么大家通过图1 和图2的比较可以发现,图1中因为设置了display:block属性,a中元素块能显示宽高以及内外边距设置。而图2中只是把display block属性去掉,就导致全部元素块不能设置宽高。

也就是说display block属性可以将行内元素设置为块级元素,随后设置它的宽高和上下左右的内外边距padding和margin。可以通过这个属性进而达到我们想要的效果。

二、css display none属性具体示例介绍




    
    css display:none属性实例
    


a元素不会显示出来

效果如下图3:

Article Forge
Article Forge

行业文案AI写作软件,可自动为特定主题或行业生成内容

下载

ad0cb1f3cb1e3fd0fe8a8d9550f354a.png

从图3可以发现,我们在给a设置了display:none;属性后,其所有元素就隐藏了不会显示出来。所以显然决定display 隐藏 显示的属性值就是none属性。display none通常会被用在导航栏一二级栏目的设计上。

三、css display inline属性介绍




    
    css display:inline属性实例
    


    

p标签是块级元素。

此时显示为内联元素,不换行。

效果如下图4:

8f3c1534313d72a1cdc84a113497046.png

从图4可以知道,css display inline属性就是可以将元素变成内联元素也就是行内元素,并且元素前后没有换行符。

四、css  display inline-block属性介绍

顾名思义,inline-block属性肯定是结合了inline和block属性的特性,也就是说此属性可以将元素变成行内块元素显示。既可以让指定在同一行内显示,又可以设置其元素的宽度和高度。

那么本篇文章就是关于css display属性的具体用法介绍,其中包括none、block、inline、inline-block的具体使用示例。具有一定的参考价值,希望对有需要的朋友有所帮助。

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

150

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

88

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

90

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

61

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

493

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

16

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

12

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

5

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
AngularJS教程
AngularJS教程

共24课时 | 2.2万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 0.9万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号