第 12 讲：css 显示 – 控制元素的布局行为
在本次讲座中，我们将讨论最重要的 css 属性之一：display。 display 属性控制元素的布局行为，确定它们在页面上的相互渲染方式。
1.了解显示属性
display 属性定义元素在布局中的行为方式。它控制元素是否显示为块级元素、内联元素或两者都不是。
基本语法：
element { display: value;}
2.常用显示值
以下是一些最常用的显示值以及它们如何影响元素：
block：元素渲染为块级元素，占据其容器的整个宽度，并从新行开始。
立即学习“前端免费学习笔记（深入）”；
inline：元素以内联方式渲染，这意味着它只占用所需的宽度，并与其他元素保持在同一行。
inline-block：结合了内联和块的特点。该元素的行为类似于内联元素，但您可以像块级元素一样设置宽度和高度。
none：元素隐藏，不占用页面任何空间。
示例：
block elementinline elementinline-block element
.block-item { display: block; background-color: #4caf50; margin-bottom: 10px;}.inline-item { display: inline; background-color: #ff5722;}.inline-block-item { display: inline-block; background-color: #2196f3; padding: 10px;}
在此示例中：
块项目将占据其容器的整个宽度并开始新的一行。内联项目将与其他元素保持一致。inline-block-item 的行为类似于内联元素，但允许块级样式，如宽度、高度和填充。
3.块元素与内联元素
块元素（例如
、
等）自然会占据其容器的整个宽度并另起一行。您可以控制它们的宽度、高度、边距和填充。
内联元素（如 、、 等）仅占用必要的空间并保留在文本流中。您无法设置内联元素的宽度或高度。
4.内联块：两全其美
inline-block 值结合了内联元素和块元素的优点。您可以将元素放置在同一行，同时仍然控制它们的宽度和高度。
示例：
.inline-box { display: inline-block; width: 100px; height: 100px; background-color: #ffc107; margin: 5px;}
这允许您创建类似网格的布局或并排元素，而无需强制它们占据整个宽度。
5.显示隐藏元素：无
当您将元素的显示属性设置为 none 时，该元素根本不会被渲染 – 它会从文档中消失，并且不会为其保留空间。
示例：
.hidden-box { display: none;}
这对于创建切换或根据某些条件应可见的元素非常有用。
6.其他显示值
还有其他更高级布局的显示值，例如：
flex：将元素变成灵活的容器，允许对其子元素进行更多控制（我们将在后面的讲座中详细讨论这一点）。网格：为容器启用网格布局，允许子元素按行和列排列（也会在以后的讲座中介绍）。
7.实际例子：
这是一个结合使用 block、inline 和 inline-block 的实际示例：
this is a block element.this is an inline element.this is an inline-block element.
.block-item { display: block; width: 100%; background-color: #4CAF50; color: white;}.inline-item { display: inline; background-color: #FF5722; padding: 5px; color: white;}.inline-block-item { display: inline-block; width: 200px; height: 50px; background-color: #2196F3; margin: 5px; color: white;}
此示例演示如何使用元素的不同显示属性来控制布局和间距。
结论
display 属性是 css 中最强大的工具之一。了解 block、inline、inline-block 和 none 之间的差异可以让您更好地控制元素在页面上的布局方式。
在 linkedin 上关注我
里多伊·哈桑
以上就是CSS 显示 – 控制元素的布局行为的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629904.html
微信扫一扫 
支付宝扫一扫 
