CSS left 属性

谁践踏了优雅 2022-06-01 02:06 143阅读 0赞

# CSS left 属性 #

[CSS 参考手册][CSS]

## 实例 ##

把图像的左边缘设置在其包含元素左边缘向右 100 像素的位置：

img
      {
      position:absolute;
      left:100px;
      }

[亲自试一试][Link 1]

## 浏览器支持 ##

所有主流浏览器都支持 left 属性。

**注释：**任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

## 定义和用法 ##

left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。

**注释：**如果 "position" 属性的值为 "static"，那么设置 "left" 属性不会产生任何效果。

### 说明 ###

对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。

对于相对定义元素，left 的计算值始终等于 right。

<table style="margin:15px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:809px"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255); width:181px"> 默认值：</th> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; width:584px"> auto</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 继承性：</th> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> no</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 版本：</th> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> CSS2</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> JavaScript 语法：</th> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> <span style="margin:0px; padding:0px; border:0px">object</span>.style.left="100px"</td> 
  </tr> 
 </tbody> 
</table>

## 可能的值 ##

<table style="margin:15px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:809px"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 值</th> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 描述</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> auto</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 默认值。通过浏览器计算左边缘的位置。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> <span style="margin:0px; padding:0px; border:0px">%</span></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 设置以包含元素的百分比计的左边位置。可使用负值。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> <span style="margin:0px; padding:0px; border:0px">length</span></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 使用 px、cm 等单位设置元素的左边位置。可使用负值。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> inherit</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 规定应该从父元素继承 left 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

## TIY 实例 ##

[使用固定值设置图像的左边缘][Link 2]

本例演示如何使用固定值设置图像的左边缘。

[使用百分比设置图像的左边缘][Link 3]

本例演示如何使用百分比值设置图像的左边缘。

[CSS]: http://www.w3school.com.cn/cssref/index.asp
[Link 1]: http://www.w3school.com.cn/tiy/t.asp?f=csse_position_left_test
[Link 2]: http://www.w3school.com.cn/tiy/t.asp?f=csse_position_left
[Link 3]: http://www.w3school.com.cn/tiy/t.asp?f=csse_position_left_percent