一、块级元素
CSS的display属性可以将元素设置为块级元素，使其独占一行，并且可以设置宽度、高度、内边距和外边距。可以通过以下代码来设置：
/* HTML */
<div>这是一个块级元素</div>
/* CSS */
div {
display: block;
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
background-color: #f2f2f2;
}
以上代码将一个div元素设置为块级元素，并且设置了宽度、高度、内边距和外边距。最终结果如下：
这是一个块级元素
二、内联元素
CSS的display属性还可以将元素设置为内联元素，使其不会独占一行，而是可以和其他元素在一行内显示。但是内联元素无法设置宽度、高度、内边距和外边距。可以通过以下代码来设置：
/* HTML */
<span>这是一个内联元素</span>
/* CSS */
span {
display: inline;
background-color: #f2f2f2;
padding: 10px;
margin: 10px;
}
以上代码将一个span元素设置为内联元素，并且设置了背景色、内边距和外边距。最终结果如下：
这是一个内联元素三、内联块级元素
内联块级元素是具有内联元素的特性，但是可以设置宽度、高度、内边距和外边距。可以通过以下代码来设置：
/* HTML */
<span>这是一个内联块级元素</span>
/* CSS */
span {
display: inline-block;
width: 100px;
height: 100px;
background-color: #f2f2f2;
padding: 10px;
margin: 10px;
}
以上代码将一个span元素设置为内联块级元素，并且设置了宽度、高度、背景色、内边距和外边距。最终结果如下：
这是一个内联块级元素四、表格布局
CSS的display属性还可以将元素设置为表格，以实现表格布局。可以通过以下代码来设置：
/* HTML */
<div class="table">
<div class="table-row">
<div class="table-cell">单元格1</div>
<div class="table-cell">单元格2</div>
<div class="table-cell">单元格3</div>
</div>
</div>
/* CSS */
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid #000;
padding: 10px;
}
以上代码将一个div元素设置为表格，其中包含三个单元格。最终结果如下：
单元格1
单元格2
单元格3
五、弹性布局
CSS的display属性还可以将元素设置为弹性布局，以实现更灵活的布局方式。可以通过以下代码来设置：
/* HTML */
<div class="flex-container">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
</div>
/* CSS */
.flex-container {
display: flex;
flex-direction: row; /* 设置主轴方向为水平 */
justify-content: center; /* 子元素居中 */
align-items: center; /* 子元素垂直居中 */
}
.flex-item {
flex: 1; /* 平均分配空间 */
height: 100px;
background-color: #f2f2f2;
margin: 10px;
text-align: center;
line-height: 100px;
}
以上代码将一个div元素设置为弹性布局，其中包含三个项目。最终结果如下：
项目1
项目2
项目3
本文链接：https://my.lmcjl.com/post/20360.html
展开阅读全文
4 评论