CSS display属性 – 不显示、显示表格、内联块等
在 CSS 中,display 属性决定了元素的外观。它也是 HTML 代码呈现的关键部分,因为它对布局有重大影响。
事实上,要使用现代 Flexbox 和 Grid 模型,您需要先使用 display 属性,然后才能访问它们的各种属性和值。这就是为什么 display 属性在 CSS 中如此重要的原因之一。
让我们深入了解如何使用该display
属性及其所有不同的值。
基本display
属性语法
element {display: value;}
在 CSS 中显示属性值
CSS 中有内联和块级元素。两者之间的区别在于,内联元素不会占用整个空间——也就是说,它们不会从新行开始——但块元素会。
display 属性采用许多不同的值,例如inline
、inline-block
、block
、table
等,它们都会影响网页上元素的布局和呈现。此外,要实现 flex 和 grid 布局,您需要使用 display 属性。
您可以使用此显示属性将元素更改inline
为 ,将元素更改为block
,将block
元素更改为inline
,block
等等。inline
inline-block
display: inline
显示属性设置为的元素inline
不会从新行开始,它将占用剩余/可用的屏幕宽度。它只占用了这样一个元素通常会占用的空间。
因此,您不能设置显示为 的元素的width
and ,因为它不会占用整个屏幕宽度。height
inline
有些元素默认是内联的,例如<span>
, <a>
, <i>
, 和<img>
.
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.<span>This is an inline lement</span> Modi eaque debitis eos quod laboremaiores delectus asperiores voluptatem voluptas soluta!
</div>
body {display: flex;align-items: center;justify-content: center;height: 100vh;font-size: 2rem;}
div {max-width: 600px;}
span {background-color: #006100;}
display: block
block
将 display 属性设置为从新行开始并占用可用屏幕宽度的元素。
您可以为此类元素指定width
和height
属性。默认情况下处于块级的元素示例包括<div>
、<section>
、<p>
等等。
您可以将span
之前的 HTML 代码设置为block
显示,它的行为类似于块级元素。
span {display: block;background-color: #006100;}
你可以看到它<span>
占据了整个宽度。那是因为它有一个显示属性设置为阻止。
display: inline-block
除了块和内联显示,还有内联块。
您分配显示的元素inline-block
是按演示内联的。但它还有一个额外的优势,即您可以应用它,width
而height
当元素被分配一个显示时,您无法做到这一点inline
。
因此,您可以将inline-block
显示视为一个包中的内联元素和块元素。
span {display: inline-block;background-color: #006100;width: 140px;height: 140px;}
display: none
当您将元素的 display 属性设置为 时none
,该元素会完全脱离页面,并且不会影响布局。
这也意味着像屏幕阅读器这样使盲人可以访问网站的设备将无法访问该元素。
不要display: none
与visibility: hidden
. 后者也隐藏了元素,但留下了通常打开或空的空间。
span {display: none;background-color: #006100;width: 140px;height: 140px;}
Visibility hidden 使 span 元素占用的空间保持打开状态,如下所示:
span {visibility: hidden;background-color: #006100;width: 140px;height: 140px;}
display: table
这些天你很少使用显示值table
,但知道它仍然很重要。它在过去更有用,因为您会在浮动、Flex 和 Grid 出现之前将其用于布局。
将显示设置为table
使元素表现得像一个表格。因此,您可以制作 HTML 表格的副本,而无需使用表格元素和相应的元素,例如tr
和td
。
例如,在 HTML 中,您可以使用<table>
元素创建一个表格,也可以创建一个<div>
,或您选择的任何容器。
您使用 HTML<table>
元素制作一个表格,如下所示:
<table><tr><td>Fruits</td><td>Lemurs</td><td>Pets</td></tr><tr><td>Cashew</td><td>Hua hua</td><td>Dog</td></tr><tr><td>Apple</td><td>Diadem Sifaka</td><td>Cat</td></tr><tr><td>Mango</td><td>Rig-tailed</td><td>Chicken</td></tr>
</table>
body {display: flex;align-items: center;justify-content: center;height: 100vh;font-size: 2rem;
}div {max-width: 600px;
}span {display: inline-block;background-color: #006100;width: 140px;height: 140px;
}tr,
td {padding: 10px;
}
上面的 HTML 和 CSS 代码片段的结果如下所示:
<div>
但是您可以通过将相应的显示设置为 、 和 来制作与元素table
相同table-row
的表格table-cell
。您将获得与如下所示相同的结果:
<div class="table"><div class="row"><div class="cell">Fruits</div><div class="cell">Lemurs</div><div class="cell">Pets</div></div><div class="row"><div class="cell">Cashew</div><div class="cell">Hua hua</div><div class="cell">Dog</div></div><div class="row"><div class="cell">Apple</div><div class="cell">Diadem Sifaka</div><div class="cell">Cat</div></div><div class="row"><div class="cell">Mango</div><div class="cell">Ring-tailed</div><div class="cell">Chicken</div></div>
</div>
body {display: flex;align-items: center;justify-content: center;height: 100vh;font-size: 2rem;
}div {max-width: 600px;
}span {display: inline-block;background-color: #006100;width: 140px;height: 140px;
}.table {display: table;
}.row {display: table-row;
}.cell {display: table-cell;
}.row,
.cell {padding: 10px;
}
你仍然得到你的桌子:
显示属性的其他值
除了inline
, block
,none
和table
, 非常重要,因为它们会显着影响网页的外观,还有其他display
值得您注意的属性值。
其中一些你会一直使用,却没有真正意识到它们也是显示属性的一部分。还有一些你根本不会经常使用的。
现在让我们来看看其中的一些。
display: flex
显示flex
使您可以访问 Flex 布局系统,它简化了我们设计和布局网页的方式。
<div class="container"><div class="child">Lorem ipsum dolor sit amet consectetur adipisicing elit.<span>This is an inline element</span> Modi eaque debitis eos quodlabore maiores delectus asperiores voluptatem voluptas soluta!</div><div class="child">Lorem ipsum dolor sit amet consectetur adipisicing elit.<span>This is an inline element</span> Modi eaque debitis eos quodlabore maiores delectus asperiores voluptatem voluptas soluta!</div>
</div>
.container {display: flex;align-items: center;justify-content: center;height: 100vh;font-size: 2rem;
}span {visibility: hidden;background-color: #006100;width: 140px;height: 140px;
}.child {border: 2px solid crimson;margin: 4px;
}
display: grid
显示集grid
允许您使用网格系统构建布局,这就像 flex 的高级形式。
<div class="container"><div class="child">Lorem ipsum dolor sit amet consectetur adipisicing elit.<span>This is an inline element</span> Modi eaque debitis eos quodlabore maiores delectus asperiores voluptatem voluptas soluta!</div><div class="child">Lorem ipsum dolor sit amet consectetur adipisicing elit.<span>This is an inline element</span> Modi eaque debitis eos quodlabore maiores delectus asperiores voluptatem voluptas soluta!</div>
</div>
.container {display: grid;place-items: center;height: 100vh;font-size: 2rem;}span {visibility: hidden;background-color: #006100;width: 140px;height: 140px;
}.child {border: 2px solid crimson;margin: 4px;
}
display: inherit
这使得元素继承其父元素的显示属性。因此,如果您<span>
在 div 中有一个标签,并且您给 span 标签显示inherit
,它会将其从内联元素变为块元素。
<div>Lorem ipsum dolor sit amet consectetur<span>Inline element</span> adipisicing elit. Cumque cupiditate harumconsectetur a exercitationem laboriosam nobis eos pariatur expedita iure.
</div>
body {display: flex;align-items: center;justify-content: center;height: 100vh;font-size: 2rem;
}span {display: inherit;background-color: crimson;
}
display: initial
这会将元素的显示属性设置为其默认值。因此,如果您将 span 的 display 属性设置为 initial,它仍然是内联的,如果您为 div 设置相同的值,它仍然是块状的。
<div>Lorem ipsum dolor sit amet consectetur<span>Inline element</span> adipisicing elit. Cumque cupiditate harumconsectetur a exercitationem laboriosam nobis eos pariatur expedita iure.
</div>
body {display: flex;align-items: center;justify-content: center;height: 100vh;font-size: 2rem;
}span {display: initial;background-color: crimson;
}
结论
很好地掌握 display 属性将有助于您的页面布局看起来很棒。它还使您可以在使用 CSS 时更好地控制呈现元素的方式。
您也可以继续返回本文以供参考,因为 display 属性一开始总是令人困惑,直到您使用它足以完全理解它。
我希望本文为您提供了充分利用 display 属性所需的背景知识。
感谢您阅读,并继续编码。
CSS display属性 – 不显示、显示表格、内联块等相关推荐
- html 图片是块元素吗,HTML+CSS:html元素分类之块级元素、内联元素、内联块级元素...
原标题:HTML+CSS:html元素分类之块级元素.内联元素.内联块级元素 html元素主要分为3类,块级元素.内联元素以及内联块级元素,本篇文章我们来就详细介绍一下各个分类的含义以及对应的特点. ...
- 表格、表格CSS属性及HTML属性、表单元素、type类型、内联块的对齐方式
表格 table thead tbody tfoot table>tr>td(th加粗居中显示) css属性 border-sapcing:数值px; 表格边框设置为细线 borde-co ...
- CSS显示:内联vs内联块[重复]
本文翻译自:CSS display: inline vs inline-block [duplicate] Possible Duplicate: 可能重复: What is the differen ...
- 【css】css display属性的值及用法
浏览器支持 表格中的数字注明了完全支持该属性的首个浏览器版本. 如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-tabl ...
- CSS display 属性的重叠覆盖
原文详解:CSS display 属性的重叠覆盖 原文链接: http://licocom.com/archives/1168 CSS display属性,一般为隐藏某个标签的显示, 并列N个div或 ...
- CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解
原文网址:CSS之排列系列--块级元素.内联元素.内联块元素--区别/详解_IT利刃出鞘的博客-CSDN博客 简介 本文介绍CSS的块级元素(block).内联元素(inline)和内联块元素(inl ...
- html 内联 块级元素,浏览器内核,css继承性
块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...
- css块元素,内联元素,内联块元素
一.块元素,内联元素,内联块元素 1.块元素: 也称行元素, 布局中常用的标签如:div,p, h1-h6,ul,li... 支持全部的样式 可以设置元素的大小,并且元素是独占一行显示,如果 ...
- 玩转CSS中块元素、内联元素、内联块元素
元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 1.块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li. ...
- CSS中的块元素,内联元素,内联块元素
块元素,内联元素,内联块元素 元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素 块元素,也可以称为行元素,布局中常用的标签如: ...
最新文章
- 现代NLP中的零样本学习
- 专家解释即将到来的BCH网络升级
- mysql忘记设置用户_MySQL数据库为用户设置密码,Mysql修改密码。Mysql忘记密码解决方法...
- 【Python进阶】实战Python面向对象基本编程
- (转)【前端模板之路】一、重构的兄弟说:我才不想看你的代码!把HTML给我交出来!...
- 剑指OFFER之跳台阶(九度OJ1388)
- Spring @Autowired Annotation教程
- 系统分析师资料_超全的“数据分析”自学资料,数据时代必get技能!
- IOS第五天(2:用户登录,回车的监听(代理模式UITextFieldDelegate)) 和关闭键盘
- Win7+keras+tensorflow使用YOLO-v3训练自己的数据集
- nagios无法通过web访问
- CentOS6.5 安装Tomcat6
- esphome 中使用bme280读取温度、湿度、气压信息
- iterm2新技能-用不同的颜色创建新标签
- firebase 推送_使用Firebase Cloud Messaging发送推送通知
- Android 记录自己的错误(Fatal signal 6 (SIGABRT), code -6 in tid 16701 (RenderThread))
- Python----CSV 一般写入, 追加改模式w 为a
- 我是江西人 (二)江右商帮
- element 复杂表格渲染(1)
- git本地仓库与GitHub的同步
热门文章
- Selenium无法定位元素的九种解决方案
- TL9000 电信业质量体系管理标准
- UG模具设计工程师需要哪些条件?潇洒UG模具设计
- 通达信画线文件是在服务器吗,通达信画线工具的使用说明★★★★
- 如何让阿三 Windows 10、11 的恢复分区(Recovery Partition)恢复到 “盖茨” 模式
- 工程力学和计算机专业,工程力学本科专业介绍
- 食品行业十大进销存软件功能大对比,我教你怎么选
- 好用的PC端wifi分析工具NetSpot免费版
- 2020高压电工考试软件及高压电工模拟考试题库
- MCS-51单片机寻址方式详解