html left属性,CSS属性参考 | left
CSS left 屬性用來指定被定位元素左側(cè)邊緣的位置。該屬性定義了被定位元素左側(cè)外邊距邊界與其包含塊元素左側(cè)邊界之間的偏移。
left是一個(gè)偏移屬性，偏移屬性用于指定一個(gè)被定位元素的精確位置，對(duì)于static的元素沒有效果。要使用這個(gè)CSS屬性，必須為元素設(shè)置一個(gè)position值，而不能是默認(rèn)的static定位方式。
在CSS中，可用的偏移屬性有四個(gè)，包括top、right、bottom和left。
對(duì)于絕對(duì)定位的元素，即position屬性設(shè)置為absolute的元素，left屬性指定元素左側(cè)邊距邊緣和包含該元素的容器的左側(cè)邊緣的距離。
對(duì)于相對(duì)定位的元素，即position屬性設(shè)置為relative的元素，left屬性指定元素的左側(cè)邊界離開其正常位置的距離。
對(duì)于固定定位或sticky定位的元素，left屬性指定元素到視口左側(cè)邊緣的距離。
官方語(yǔ)法
left: | | auto
參數(shù)：
：使用固定的長(zhǎng)度值指定元素的左側(cè)偏移。長(zhǎng)度值可以參考數(shù)據(jù)類型。長(zhǎng)度值允許為負(fù)數(shù)。
：使用元素的包含塊的百分比值來指定左側(cè)偏移值。百分比值可以參考數(shù)據(jù)類型。百分比值允許為負(fù)數(shù)。
auto：當(dāng)left屬性設(shè)置為auto的時(shí)候，分為兩種情況：
如果元素是相對(duì)定位的，在水平方向上會(huì)根據(jù)right屬性的值來定位。如果right屬性也設(shè)置為auto，那么元素在水平方向上不會(huì)移動(dòng)。
如果元素是絕對(duì)定位的，在垂直方向上會(huì)根據(jù)right屬性的值來定位。如果元素的寬度設(shè)置為auto，那么元素的寬度會(huì)隨著內(nèi)容的增加而增長(zhǎng)。
left屬性的初始值為auto。
left屬性可以使用inherit屬性從它的父元素中繼承左側(cè)偏移值。它的父元素不一定是它的定位上下文。
應(yīng)用范圍
left屬性可以應(yīng)用在所有可以被定位的元素上。
示例代碼
/* 使用長(zhǎng)度值 */
left: 3px;
left: 2.4em;
/* 使用元素包含塊的百分比值 */
left: 10%;
/* 使用關(guān)鍵字 */
left: auto;
left: inherit;
在線演示
1、在相對(duì)定位的元素上使用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、在絕對(duì)定位的元素上使用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值設(shè)置為auto的情況：這個(gè)demo中，元素的left屬性設(shè)置為auto，元素的定位方式為絕對(duì)定位，此時(shí)它會(huì)根據(jù)right屬性來在水平方向上移動(dòng)元素，這里設(shè)置right的值為30像素，所以元素會(huì)定位在距離父元素右側(cè)邊框30像素的地方。(垂直方向上的偏移通過top和bottom屬性來控制)
瀏覽器支持
所有的現(xiàn)代瀏覽器都支持left屬性，包括Chrome，Firefox，Safari，Opera，IE 以及 Android 和 iOS。
相關(guān)閱讀
總結(jié)
以上是生活随笔為你收集整理的html left属性,CSS属性参考 | left的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
