CSS left 属性

在 web 开发中，left 属性用于指定元素相对于其包含块左边缘的位置。该属性通常与 position 属性一起使用，常见的取值有像素值、百分比和关键字等。

语法

element {
  left: value;
}

• value：指定元素距离其包含块左边缘的距离，可以为正数、负数、百分比或关键字等。

取值

• 长度值：可以为正数或负数，表示距离左边缘的距离，常见单位有像素（px）、英寸（in）、厘米（cm）等。

  .box {
    position: absolute;
    left: 20px;
  }

• 百分比：相对于包含块的宽度进行定位，取值范围为 0% 到 100%。

  .box {
    position: relative;
    width: 50%;
    left: 25%;
  }

• 关键字：常见的关键字有 auto，表示使用浏览器默认的布局方式进行定位。

  .box {
    position: relative;
    left: auto;
  }

注意事项

• 当元素的 position 属性值为 static 时，left 属性不会生效。
• 使用百分比值进行定位时，元素的包含块必须有明确的宽度。
• 当元素的 position 属性值为 absolute 或 fixed 时，left 属性相对于最近的具有定位属性的父元素进行定位，如果没有则相对于初始包含块进行定位。

通过合理使用 left 属性，可以实现元素在页面中的精确定位，为页面布局提供更多的灵活性。