定义
display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局,例如流式布局、网格布局或弹性布局。(取自菜鸟教程)
常用属性
属性值 | 描述 |
display: none; | 隐藏元素 |
display: block; | 显示块级元素 |
display: inline; | 显示行级元素 |
display: inline-block; | 显示行内块级元素 |
display: list-item; | 列表显示,类似于ul |
display: run-in; | 此元素会根据上下文作为块级元素或内联元素显示。 |
display: flex; | 弹性盒子布局 |
display: grid; | 网格布局 |
display: table; | table布局 |
弹性盒子布局
原本样式
display: flex;
display: flex;
justify-content: flex-end;
display: flex;
justify-content: center;
还有
属性值 | 描述属性 |
justify-content: space-between; | 两端对齐 |
justify-content: space-evenly; | 间距相同 |
justify-content: space-around; | 元素间距相同 |
纵向样式
属性值 | 描述属性 |
align-items: center; | 纵向居中 |
align-items: flex-start; | 纵向头部 |
align-items: flex-end; | 纵向尾部 |
align-items: baseline; | 纵向容器基线 |
网格布局
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网格布局</title>
<style>
.grid-container {
display: grid;
grid: 160px 160px / auto auto auto;
grid-gap: 10px;
background-color: #ff0000;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 247, 0, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
</div>
</body>
</html>
显示效果
代码 | 代码解释 |
display: grid; | 网格布局 |
grid: 160px / auto auto auto; | grid: 格子的高度(带单位) / 有几个auto 就代表几列; |
grid-gap: 10px; | 格子中间边距是多少 |
table布局
<html>
<head>
<meta charset="utf-8">
<title>学习table</title>
<style type="text/css">
.table{
width:600px;
background-color: aqua;
display: table;
table-layout: fixed;
border: 1px;
}
/*tr*/
.table-row{
width:100%;
display: table-row;
}
/*col*/
.table-cell{
width:33.33%;
display: table-cell;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="table">
<div class="table-row">
<div class="table-cell">数据11</div>
<div class="table-cell">数据12</div>
<div class="table-cell">数据13</div>
</div>
<div class="table-row">
<div class="table-cell">数据21</div>
<div class="table-cell">数据22</div>
<div class="table-cell">数据23</div>
</div>
</div>
</body>
</html>
效果显示
属性值 | 描述属性 |
display: table; | 类似标签<table> |
display: table-row; | 类似标签<ul> |
display: table-cell; | 类似标签<li> |