CSS left 属性-之路教程

语法

left: auto | length | initial | inherit;

左属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        left: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Left 属性示例</h2>
    <p>Here the left property is defined as 35px.</p>
    <img src="/build/images/onitroad-logo-black.png" alt="CSS left property">
  </body>
</html>

当图像位于 <div> 元素内时，使用 left 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 150px;
        width: 400px;
        background-color: #ccc;
        color: #666;
        padding: 10px;
      }
      img {
        position: absolute;
        left: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Left 属性示例</h2>
    <div>
      <img src="onitroad.png" alt="CSS left property"> 
      这是一些左侧定义为 150px 的 div 元素。
    </div>
  </body>
</html>

用百分比指定的 left 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        position: absolute;
        left: 20%;
        top: 20%;
        width: 100px;
        height: 100px;
        background-color: #ccc;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Left 属性示例</h2>
    <div class="example">left: 20%</div>
  </body>
</html>

包含所有值的 left 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        position: absolute;
        left: auto;
        width: 100px;
        height: 100px;
        background-color: #ccc;
      }
      .box2 {
        position: absolute;
        top: 190px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: #444;
        color: #fff;
      }
      .box3 {
        position: absolute;
        left: 10%;
        top: 50%;
        width: 100px;
        height: 100px;
        background-color: #666;
        color: #fff;
      }
      .box4 {
        position: absolute;
        left: 20%;
        top: 70%;
        width: 100px;
        height: 100px;
        background-color: #777;
        color: #fff;
      }
      .box5 {
        position: absolute;
        left: -20px;
        top: 90%;
        width: 100px;
        height: 100px;
        background-color: #999;
        text-align: right;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Left 属性示例</h2>
    <div class="box1">left: auto</div>
    <div class="box2">left: 50px</div>
    <div class="box3">left: 10%</div>
    <div class="box4">left: 20%</div>
    <div class="box5">left: -20px</div>
  </body>
</html>

CSS left 属性

left 属性指定定位元素的位置部分。

left 属性用于为绝对或者固定定位元素设置元素的左边距边缘和其包含块的左边缘。
如果 position 被选择为“static”，则 left 属性不会有任何影响。

left 的效果取决于元素的定位方式（参见 position 属性）。

如果 position 设置为“absolute”或者“fixed”，则 left 属性指定元素的左边缘与其包含块的左边缘之间的距离。
如果 position 设置为“relative”，则 left 属性指定元素的左边缘从其正常位置向右移动的距离。
如果 position 设置为“sticky”，则当元素在视口内时，left 属性将其位置更改为相对位置，当元素在视口外时更改为固定位置。
如果 position 设置为“static”，则不会有任何效果。

初始值	auto
应用于	定位元素。
继承	无效
可动画的	是的。元素的位置是可动画的。
版本	CSS2.
DOM 语法	object.Style.Left =“50px”;

CSS left 属性值说明

值	描述
auto	浏览器将设置左边缘位置。这是此属性的默认值。
length	设置PX，CM等的左边缘位置。允许负值。
%	设置包含元素％的左边缘位置。允许负值。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

日期：2020-06-02 22:14:37 来源：oir作者：oir

←CSS :last-of-type 伪类

CSS letter-spacing 属性→

语法

左属性示例：

当图像位于 <div> 元素内时，使用 left 属性的示例：

用百分比指定的 left 属性示例：

包含所有值的 left 属性示例：

CSS left 属性值说明

目录