好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

left

CSS left 属性用来指定被定位元素左侧边缘的位置。该属性定义了被定位元素左侧外边距边界与其包含块元素左侧边界之间的偏移。

left 是一个偏移属性,偏移属性用于指定一个被定位元素的精确位置,对于 static 的元素没有效果。要使用这个CSS属性,必须为元素设置一个值,而不能是默认的 static 定位方式。

在CSS中,可用的偏移属性有四个,包括 top 、 right 、和 left 。

对于绝对定位的元素,即属性设置为 absolute 的元素, left 属性指定元素左侧边距边缘和包含该元素的容器的左侧边缘的距离。

对于相对定位的元素,即属性设置为 relative 的元素, left 属性指定元素的左侧边界离开其正常位置的距离。

对于固定定位或sticky定位的元素, left 属性指定元素到视口左侧边缘的距离。

官方语法
left: <length> | <percentage> | auto                     
                            

参数:

<length> :使用固定的长度值指定元素的左侧偏移。长度值可以参考数据类型。长度值允许为负数。 <percentage> :使用元素的包含块的百分比值来指定左侧偏移值。百分比值可以参考数据类型。百分比值允许为负数。 auto :当 left 属性设置为 auto 的时候,分为两种情况: 如果元素是相对定位的,在水平方向上会根据 right 属性的值来定位。如果 right 属性也设置为 auto ,那么元素在水平方向上不会移动。 如果元素是绝对定位的,在垂直方向上会根据 right 属性的值来定位。如果元素的宽度设置为 auto ,那么元素的宽度会随着内容的增加而增长。

left 属性的初始值为 auto 。

left 属性可以使用 inherit 属性从它的父元素中继承左侧偏移值。它的父元素不一定是它的定位上下文。

应用范围

left 属性可以应用在所有可以被定位的元素上。

示例代码
/* 使用长度值 */
left: 3px;
left: 2.4em;

/* 使用元素包含块的百分比值 */
left: 10%;

/* 使用关键字 */
left: auto;
left: inherit;                              
                            
在线演示

1、在相对定位的元素上使用 left 属性:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

2、在绝对定位的元素上使用 left 属性:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

3、left值设置为auto的情况:这个demo中,元素的 left 属性设置为 auto ,元素的定位方式为绝对定位,此时它会根据 right 属性来在水平方向上移动元素,这里设置 right 的值为30像素,所以元素会定位在距离父元素右侧边框30像素的地方。(垂直方向上的偏移通过 top 和 bottom 属性来控制)

浏览器支持

所有的现代浏览器都支持 left 属性,包括Chrome,Firefox,Safari,Opera,IE 以及 Android 和 iOS。

查看更多关于left的详细内容...

  阅读:49次

上一篇: line-height

下一篇:column-fill

CopyRight:2016-2025好得很程序员自学网 备案ICP:湘ICP备09009000号-16 http://haodehen.cn
本站资讯不构成任何建议,仅限于个人分享,参考须谨慎!
本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。
本网站刊载的所有内容(包括但不仅限文字、图片、LOGO、音频、视频、软件、程序等)版权归原作者所有。任何单位或个人认为本网站中的内容可能涉嫌侵犯其知识产权或存在不实内容时,请及时通知本站,予以删除。

网站内容来源于网络分享,如有侵权发邮箱到:kenbest@126.com,收到邮件我们会即时下线处理。
网站框架支持:HDHCMS   51LA统计 百度统计
Copyright © 2018-2025 「好得很程序员自学网
[ SiteMap ]