display

最新推荐文章于 2024-08-31 21:49:18 发布

程序卡拉米

最新推荐文章于 2024-08-31 21:49:18 发布

阅读量72

点赞数

分类专栏： HTML 文章标签： html 前端 css

本文链接：https://blog.csdn.net/haofeng___/article/details/131503236

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的display属性及其在布局中的应用，包括隐藏元素、块级元素、行内元素等基本概念。重点讨论了flex布局的justify-content属性和align-items属性，以及网格布局和table布局的实现示例，展示了各种布局方式在网页设计中的使用方法。

摘要由CSDN通过智能技术生成

定义

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>

效果显示