<!DOCTYPE html>
<html>
<head>
<title>HTML Display 示例</title>
<style>
/* display 属性定义元素应该生成的框的类型 */
.block {
display: block;
width: 100px;
height: 100px;
background-color: lightblue;
}
.inline {
display: inline;
background-color: lightcoral;
}
.none {
display: none;
}
.flex-container {
display: flex;
background-color: lightgreen;
}
.flex-item {
flex: 1;
margin: 5px;
background-color: lightyellow;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<h2>display: block;</h2>
<div class="block">这是一个块级元素。</div>
<h2>display: inline;</h2>
<span class="inline">这是一个行内元素。</span>
<h2>display: none;</h2>
<p>这个段落下面有一个 display 设置为 none 的元素,所以你看不到它。</p>
<div class="none">你不会看到我。</div>
<h2>display: flex;</h2>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>
display: block;
:使元素作为块级元素显示,独占一行。display: inline;
:使元素作为行内元素显示,不独占一行,与其他内容在同一行排列。display: none;
:隐藏元素,元素不会被渲染在页面上,也不会占用空间。display: flex;
:使用弹性布局(Flexbox),可以方便地对容器内的子元素进行排列和对齐。上一篇:html rem
下一篇:html 空格代码
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站