css中left属性,CSS left属性用法及代码示例
CSS中的left屬性用于指定定位元素的水平位置。它對未定位的元素沒有影響。
注意：
如果position屬性是絕對或固定的，則left屬性指定元素左邊與其包含塊的左邊之間的距離。
如果position屬性是相對的，則left屬性指定元素左邊從其正常位置向右移動的距離。
如果position屬性是粘滯性，則left屬性的行為就像當元素在視口內部時它的位置是相對的，而當它在視口外部時一樣。
如果position屬性是靜態的，則left屬性無效。
如果同時定義了left和right屬性，則當容器從左到右時，left值優先；當容器從右到左時，right值優先。
用法:
left:length|percentage|auto|initial|inherit;
屬性值：
length:用于指定left屬性的長度。它接受正值和負值。
percentage:它以百分比指定包含塊的寬度。
auto:它用于將left屬性設置為其默認值。
initial:用于將left屬性指定為其默認值。
inherit:它從其父級設置left屬性。
范例1：本示例將position屬性描述為絕對。
CSS left Property
body {
color:Green;
text-align:center;
}
.GFG1 {
position:absolute;
left:129px;
width:500px;
height:200px;
border:5px solid orange;
}
.GFG2 {
position:absolute;
left:77%;
width:140px;
height:70px;
border:5px solid red;
}
.GFG3 {
position:absolute;
left:auto;
width:350px;
height:170px;
border:5px solid green;
}
.GFG4 {
position:absolute;
left:initial;
width:200px;
height:100px;
border:5px solid maroon;
}
.GFG5 {
position:absolute;
left:inherit;
width:200px;
height:100px;
border:5px solid black;
}
The left Property
lengthpercentageautoinitialinherit輸出：
注意：初始容器和繼承容器重疊，因為它們具有相似的尺寸和默認值。
范例2：本示例將position屬性描述為relative。
CSS left Property
body {
color:Green;
text-align:center;
}
.GFG1 {
position:relative;
left:129px;
width:500px;
height:200px;
border:5px solid orange;
}
.GFG2 {
position:relative;
left:77%;
width:140px;
height:70px;
border:5px solid red;
}
.GFG3 {
position:relative;
left:auto;
width:350px;
height:170px;
border:5px solid green;
}
.GFG4 {
position:relative;
left:initial;
width:200px;
height:100px;
border:5px solid maroon;
}
div.e {
position:relative;
left:inherit;
width:200px;
height:100px;
border:5px solid blue;
}
The left Property
lengthpercentageautoinitialinherit輸出：
支持的瀏覽器：left屬性支持的瀏覽器如下：
谷歌瀏覽器1.0
Internet Explorer 5.5
Firefox 1.0
Safari 1.0
Opera 5.0
總結
以上是生活随笔為你收集整理的css中left属性,CSS left属性用法及代码示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用MATLAB求解方程求根——学习笔记
- 下一篇： 金色css颜色代码大全,CSS颜色代码大