CSS样式属性单词之Left
生活随笔
收集整理的這篇文章主要介紹了
CSS样式属性单词之Left
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
通常left單獨在CSS中設置無效，需要在使用position屬性下使用才能生效起作用。left左靠多少距離（距離左邊多少）的作用。
left
一、left認識與語法
left翻譯：左邊，左
在CSS選擇器代碼中有時也需要設置left，設置對象盒子靠左距離多少，就需要position設置同時再設置left進行實現對象靠左需求。
1、使用說明
如果單獨對盒子對象設置left，是無效的，需要同時設置position:relative或者position:absolute
2、語法
left值可以為正數值，可以為負數值，也可以為百分比。
left:10px
left:-20px
left:12%
以上具體值為正數、負數、百分比值。
3、css left使用范例
.abc{left:10px;position:relative}或.abc{left:10px;position:absolute}設置class=abc對象盒子靠左10px
.abc{left:-10px;position:relative}或.abc{left:-10px;position:absolute}設置class=abc對象盒子靠左-10px
.abc{left:10%;position:relative}或.abc{left:10%;position:absolute}設置class=abc對象盒子靠左10%
4、兼容性
兼容各大瀏覽器
二、left小實例
這里配合position使用下，看看left作用。
1、div css實例代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css left實例效果 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}/* 天藍色盒子 */
.pwu{ left:10px; width:100px; height:50px;border:1px solid #F0F}/* 紫色盒子 */
</style>
</head>
<body>
<div class="box">
<div class="pr p1">內容1</div>
<div class="pr p2">內容2</div>
<div class="pr p3">內容3</div>
<div class=" pwu">未設置position</div>
</div>
</body>
</html>
2、效果截圖
left css應用實例
小結：left需要在使用position屬性下使用，在不使用position下單獨使用left，將是無效的。
在其它樣式屬性中left是作為值來使用，但與這里left不同，這里是作為CSS屬性單詞。
轉載于:https://www.cnblogs.com/yuer20180726/p/11008454.html
總結
以上是生活随笔為你收集整理的CSS样式属性单词之Left的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CH 5102 Mobile Servi
- 下一篇： CSS文本对齐text-align详解