CSS样式属性单词之Left
通常left單獨(dú)在CSS中設(shè)置無(wú)效，需要在使用position屬性下使用才能生效起作用。left左靠多少距離（距離左邊多少）的作用。
left
一、left認(rèn)識(shí)與語(yǔ)法
left翻譯：左邊，左
在CSS選擇器代碼中有時(shí)也需要設(shè)置left，設(shè)置對(duì)象盒子靠左距離多少，就需要position設(shè)置同時(shí)再設(shè)置left進(jìn)行實(shí)現(xiàn)對(duì)象靠左需求。
1、使用說(shuō)明
如果單獨(dú)對(duì)盒子對(duì)象設(shè)置left，是無(wú)效的，需要同時(shí)設(shè)置position:relative或者position:absolute
2、語(yǔ)法
left值可以為正數(shù)值，可以為負(fù)數(shù)值，也可以為百分比。
left:10px
left:-20px
left:12%
以上具體值為正數(shù)、負(fù)數(shù)、百分比值。
3、css left使用范例
.abc{left:10px;position:relative}或.abc{left:10px;position:absolute}設(shè)置class=abc對(duì)象盒子靠左10px
.abc{left:-10px;position:relative}或.abc{left:-10px;position:absolute}設(shè)置class=abc對(duì)象盒子靠左-10px
.abc{left:10%;position:relative}或.abc{left:10%;position:absolute}設(shè)置class=abc對(duì)象盒子靠左10%
4、兼容性
兼容各大瀏覽器
二、left小實(shí)例
這里配合position使用下，看看left作用。
1、div css實(shí)例代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css left實(shí)例效果 ThinkCSS</title>
<style>
.box{ width:300px;height:300px; border:1px solid #00F}
.pr{ position:relative; border:1px solid #000; width:100px; height:50px}
.p1{left:10px;border:1px solid #F00}/* 紅色盒子 */
.p2{left:30px;border:1px solid #0F0}/* 綠色盒子 */
.p3{left:60px;border:1px solid #0FF}/* 天藍(lán)色盒子 */
.pwu{ left:10px; width:100px; height:50px;border:1px solid #F0F}/* 紫色盒子 */
</style>
</head>
<body>
<div class="box">
<div class="pr p1">內(nèi)容1</div>
<div class="pr p2">內(nèi)容2</div>
<div class="pr p3">內(nèi)容3</div>
<div class=" pwu">未設(shè)置position</div>
</div>
</body>
</html>
2、效果截圖
left css應(yīng)用實(shí)例
小結(jié)：left需要在使用position屬性下使用，在不使用position下單獨(dú)使用left，將是無(wú)效的。
在其它樣式屬性中l(wèi)eft是作為值來(lái)使用，但與這里left不同，這里是作為CSS屬性單詞。
轉(zhuǎn)載于:https://www.cnblogs.com/yuer20180726/p/11008454.html
總結(jié)
以上是生活随笔為你收集整理的CSS样式属性单词之Left的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CH 5102 Mobile Servi
- 下一篇： CSS文本对齐text-align详解