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实例代码
- <!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的更多相关文章
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- IE6支持兼容min-width、max-width CSS样式属性
IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定 ...
- 常用CSS样式属性
01.常用样式 1.1.background背景 设置元素背景的样式 background,更好的衬托内容. 属性 描述 值 background 背景属性简写.支持多组背景设置,逗号,隔开 back ...
- HTML布局相关的CSS样式属性
# 转载请留言联系 注意,样式属性是写进CSS里面的. 布局常用样式属性: width 设置元素(标签)的宽度,如:width:100px; height 设置元素(标签)的高度,如:height:2 ...
- IE6支持min-width、max-width CSS样式属性
1.IE6支持max-width解决方法 IE6支持最大宽度,解决CSS代码: .yangshi{ max-width:1000px; _width:expression((document.docu ...
- 11-18网页基础--第二部分CSS样式属性（1）
第一课:样式属性 style 样式:style样式不仅可以直接在<body>中设置成整个网页的样式.格式:为了将样式.格式多样化,也可以将style单独抽出来,作为一个独立的个体,放在&l ...
- CSS样式属性——字体+文本
CSS属性可分为以下几类:字体.背景.文本.位置.布局.边缘.列表 1. 字体——主要包括文字的字体.大小.颜色.显示效果等基本样式 font-family:用于设置字体系列 font-size:字体 ...
- CSS样式属性分类
A 文字 1 font-family:字体名称 注意: 当指定多种字体时,用“,”分隔每种字体的名称 当字体名称包含两个以上分开的单词是,用“”把该字体名称括起来. 当样式规则外已经有“”时,用‘’代 ...
- Jquery中animate可以操作css样式属性总结
可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate()时, 必须使用 Camel 标记法书写所有的属性名,比如,必须使用 ...
随机推荐
- 架构师成长之路5.6-Saltstack配置管理（jinja模板）
点击架构师成长之路 架构师成长之路5.6-Saltstack配置管理(jinja模板) 配置管理工具: Pupper:1. 采用ruby编程语言:2. 安装环境相对较复杂:3.不支持远程执行,需要FU ...
- Java语言基础(1)
1 计算机语言发展的分类 1)机器语言:由0,1组成(二进制),可以在计算机底层直接识别并执行(唯一). 2)汇编语言:由助记符组成,比机器语言简单.当执行的时候,把汇编语言转换为机器语言(0101) ...
- nginx反向代理原理及配置详解
nginx概述nginx是一款自由的.开源的.高性能的HTTP服务器和反向代理服务器:同时也是一个IMAP.POP3.SMTP代理服务器:nginx可以作为一个HTTP服务器进行网站的发布处理,另外n ...
- MongoDB——》聚合查询（project、match、limit、skip、unwind、group、sort）
https://blog.csdn.net/weixin_43453386/article/details/85065043#1_testweightname_id_35 https://blog.c ...
- yaml格式介绍
一.简介 YAML 语言(发音 /ˈjæməl/ )的设计目标,就是方便人类读写.它实质上是一种通用的数据串行化格式. 它的基本语法规则如下. 大小写敏感 使用缩进表示层级关系 缩进时不允许使用Tab ...
- 前端js之JQuery
目录 jQuery介绍 jQuery的优势 jQuery内容 jQuery对象 jQuery基础语法结构 jQuery 使用注意事项 查找标签 基本选择器 层级选择器 基本选择器 属性选择器 表单筛选 ...
- Python 3标准库 第十一章 网路通信
网路通信11.1 ipaddress : Internet 地址 ipaddress模块提供了处理IPv4和IPv6 11.1.2 网络 CMDB 11.2 socket:网络通信 11.2. ...
- webpack打包，同时将ES6转为ES5，初探
webpack打包,同时将ES6转为ES5,第一次尝试搞了一下午才弄好,所有的问题均来自ES6转es5上面,可能天分不够把,但愿各大浏览器快点支持ES6吧!忽略nodejs安装. 第一,新建一个项目文 ...
- C# 从Object对象中读取属性的值
https://www.cnblogs.com/xbblogs/p/7739483.html
- 对React性能优化的研究-----------------引用
JSX的背后 这个过程一般在前端会称为“转译”,但其实“汇编”将是一个更精确的术语. React开发人员敦促你在编写组件时使用一种称为JSX的语法,混合了HTML和JavaScript.但浏览器对JS ...