通常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实例代码

<!DOCTYPE html>
<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属性单词。

CSS样式属性单词之Left的更多相关文章

  1. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  2. IE6支持兼容min-width、max-width CSS样式属性

    IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定 ...

  3. 常用CSS样式属性

    01.常用样式 1.1.background背景 设置元素背景的样式 background,更好的衬托内容. 属性 描述 值 background 背景属性简写.支持多组背景设置,逗号,隔开 back ...

  4. HTML布局相关的CSS样式属性

    # 转载请留言联系 注意,样式属性是写进CSS里面的. 布局常用样式属性: width 设置元素(标签)的宽度,如:width:100px; height 设置元素(标签)的高度,如:height:2 ...

  5. IE6支持min-width、max-width CSS样式属性

    1.IE6支持max-width解决方法 IE6支持最大宽度,解决CSS代码: .yangshi{ max-width:1000px; _width:expression((document.docu ...

  6. 11-18网页基础--第二部分CSS样式属性（1）

    第一课:样式属性 style 样式:style样式不仅可以直接在<body>中设置成整个网页的样式.格式:为了将样式.格式多样化,也可以将style单独抽出来,作为一个独立的个体,放在&l ...

  7. CSS样式属性——字体+文本

    CSS属性可分为以下几类:字体.背景.文本.位置.布局.边缘.列表 1. 字体——主要包括文字的字体.大小.颜色.显示效果等基本样式 font-family:用于设置字体系列 font-size:字体 ...

  8. CSS样式属性分类

    A 文字 1 font-family:字体名称 注意: 当指定多种字体时,用“,”分隔每种字体的名称 当字体名称包含两个以上分开的单词是,用“”把该字体名称括起来. 当样式规则外已经有“”时,用‘’代 ...

  9. Jquery中animate可以操作css样式属性总结

    可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate()时, 必须使用 Camel 标记法书写所有的属性名,比如,必须使用 ...

随机推荐

  1. Type Trait 和 Type Utility

    所谓Type trait,提供了一种用来处理type 属性的办法,它是个template,可在编译期根据一个或多个template实参(通常也是type)产出一个type或者value. templa ...

  2. primer看完了

    放假这将近十天吧,终于把C++ Primer中文版第五版大致看完了,然而第四部分(高级主题)还是没有看,感觉那是需要有足够的项目经验再看. 另外,看一遍肯定不够,忘得也会很快,我十分确认今后还会很多次 ...

  3. Addthis分享插件后url乱码的解决办法

    Addthis分享插件安装后,有时候URL后面会出现类似#.VB4mxhbjtnQ的一串乱码的乱码,作用是用来追踪客户客户,但是给客户的印象会以为木马中毒之类的 http://localhost/mi ...

  4. lemon用法

    zhx精讲用法: 首先,打开 柠檬图标. 只留g++ 然后按照这个路径进入c++找编译文件: 打开后点确定. 然后在你的试题中找到后缀为cdf的文件(为试题的全部信息),然后添加到试题中,然后把选手文 ...

  5. HTML5日期时间输入类型注意事项(time,date)

    原文链接:http://www.webhek.com/post/html5-date.html 1.HTML5规范里只规定date新型input输入类型,并没有规定日历弹出框的实现和样式.所以,各浏览 ...

  6. chattr&lsattr

    chattr 和 lsattr 用来查看和改变文件属性,chmod 只是用来改变文件的读写与可执行权限,而文件的属性控制是由 chattr 来完成 常用用法: chattr +i /home/test ...

  7. 2017 趋势科技 研发4.26（offer）

    南京趋势科技外企(offer) 笔试 在华科线下笔试的,推荐多参加线下笔试,因为相对难度会低一些,好进一些. 当时笔试的估计只有60几个,然后选择题感觉有的不会,编程简单. 第二天去面试的时候,hr小 ...

  8. Acwing-98-分形之城(递推,数学)

    链接: https://www.acwing.com/problem/content/description/100/ 题意: 城市的规划在城市建设中是个大问题. 不幸的是,很多城市在开始建设的时候并 ...

  9. 【Layui】当Layui数据表格和Layui下拉框组合时发生的问题

    关于Layui数据表格用下拉框显示问题 如图所示 可以看见当点击下拉框时下拉选项被下拉框覆盖 此时你需要在数据表格渲染完成时的回调内添加如下代码即可 $(".sel_scrq"). ...

  10. Spring、SpringMVC和Springboot的区别

    spring boot就是一个大框架里面包含了许许多多的东西,其中spring就是最核心的内容之一,当然就包含spring mvc. spring mvc 是只是spring 处理web层请求的一个模 ...