前端position属性和display属性学习指南

2024-01-28 05:34:45

前言

在前端开发中，position和display是两个非常重要的属性，用于控制元素的位置和显示方式。掌握这两个属性的使用方法，可以帮助开发人员轻松实现各种复杂的布局。本文将对position和display属性进行深入浅出的讲解，并提供大量示例代码，帮助读者理解和掌握这两个属性的使用方法。

`position`属性

position属性用于指定元素在文档流中的位置。position属性有五个取值：static、relative、absolute、fixed和sticky。

static ：这是默认值，表示元素在文档流中处于正常的位置。
relative ：表示元素相对于其正常位置进行定位。元素的位置不会脱离文档流，但是可以相对于其正常位置进行移动。
absolute ：表示元素脱离文档流，并且相对于其最近的已定位父元素进行定位。
fixed ：表示元素脱离文档流，并且相对于视口进行定位。元素的位置不会随着滚动条的移动而改变。
sticky ：表示元素在滚动到一定位置时，会固定在视口上。

`display`属性

display属性用于指定元素的显示方式。display属性有许多取值，其中最常用的几个是：

block ：表示元素作为块级元素显示，占据整个可用宽度，并换行。
inline ：表示元素作为内联元素显示，不换行，与其他元素在同一行上。
inline-block ：表示元素作为内联块级元素显示，既可以不换行，又可以占据整个可用宽度。
flex ：表示元素作为弹性盒布局元素显示，可以控制元素的排列方式和大小。
grid ：表示元素作为网格布局元素显示，可以控制元素的排列方式和大小。

示例

下面是一个示例，演示了position和display属性的使用方法：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="container">
    <div id="header">这是头部</div>
    <div id="content">
      <p>这是正文</p>
      <div id="image">这是图片</div>
    </div>
    <div id="footer">这是页脚</div>
  </div>
</body>
</html>

#container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#header {
  background-color: #f00;
  color: #fff;
  height: 50px;
}

#content {
  flex-grow: 1;
  background-color: #fff;
}

#image {
  width: 100px;
  height: 100px;
  background-color: #00f;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#footer {
  background-color: #000;
  color: #fff;
  height: 50px;
}

在这个示例中，我们将容器元素#container设置为flex布局，并将其高度设置为100vh（视口高度）。我们将头部元素#header设置为block元素，并将其高度设置为50px。我们将正文元素#content设置为flex-grow: 1，使其占据剩余的可用空间。我们将图片元素#image设置为absolute定位，并将其置于容器元素的中心位置。我们将页脚元素#footer设置为block元素，并将其高度设置为50px。