前端开发：如何设置顶部和左侧 CSS 属性

在前端开发中，设置元素的位置和尺寸是一项基本操作。本文将介绍如何使用 CSS 属性设置元素的顶部和左侧位置，包括定位、浮动等多种方法，并提供相关示例代码。

1. 盒子模型

在开始之前需要了解盒子模型的概念。每个 HTML 元素都可以看作一个矩形区域，该区域由四个边界（上、下、左、右）确定，这些边界与元素的内容、内边距和边框组成了盒子模型。

2. 定位

通过定位属性来设置元素在页面中的位置是最基本的方法之一。CSS 中有三种定位属性：relative、absolute 和 fixed。

2.1 relative

相对定位是指元素相对于其原始位置进行移动，但不会影响其他元素的位置。使用 position: relative 可以实现相对定位，并通过 top 和 left 属性来设置元素相对于原始位置的偏移量。

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

2.2 absolute

绝对定位是指元素相对于最近的定位祖先元素进行移动，若无定位祖先则相对于页面的 body 元素。使用 position: absolute 可以实现绝对定位，并通过 top、left、bottom 和 right 属性来设置元素与其定位祖先或页面边界的距离。

.box {
  position: absolute;
  top: 50px;
  left: 100px;
}

2.3 fixed

固定定位是指元素相对于浏览器窗口进行移动，不会随页面滚动而改变位置。使用 position: fixed 可以实现固定定位，并通过 top、left、bottom 和 right 属性来设置元素与浏览器窗口的距离。

.box {
  position: fixed;
  top: 10px;
  left: 20px;
}

3. 浮动

除了定位属性外，还可以使用浮动属性设置元素在页面中的位置。CSS 中有两种浮动属性：float 和 clear。

3.1 float

浮动是指元素脱离文档流并向左或向右移动，直到遇到父级容器或前面的浮动元素为止。使用 float: left 或 float: right 可以实现浮动，并通过 margin 属性来设置元素与周围元素的距离。

.box1 {
  float: left;
  margin-right: 20px;
}
.box2 {
  float: right;
  margin-left: 20px;
}

3.2 clear

浮动会对后续元素的位置产生影响，使用 clear 属性可以清除浮动效果。clear 属性有四个取值：none、left、right 和 both。其中，none 表示不清除任何浮动；left 表示不允许元素左侧出现浮动元素；right 表示不允许元素右侧出现浮动元素；both 表示不允许元素左右两侧出现浮动元素。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/14179) ，转载请注明来源
[https://www.javascriptcn.com/post/14179](https://www.javascriptcn.com/post/14179)