offsetLeft 获取的是相对于父对象的左边距

left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距

如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,
这同offsetLeft是相同的,区别在于:
1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,
还用offsetLeft比较方便。
2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。
3. style.left的值需要事先定义,否则取到的值为空。而且必须要定义在html里,我做过试验,如果定义在
css里,style.left的值仍然 为空,这就是我刚开始碰到的问题,总是取不到style.left的值。

offsetLeft则仍然能够取到,无需事先定义div的位置。

div盒子模型(一图胜千言)的更多相关文章

  1. 从div盒子模型谈如何写可维护的css代码(转)

    市面上我们常常会看到各种各样的设计模式书籍,Java设计模式.C#设计模式.Ruby设计模式等等.在众多的语言设计模式中我唯独找不到关于CSS设计模式的资料,即使在网上找到类似内容,细细一看之下才发觉 ...

  2. DIV布局之道二:DIV块的嵌套,DIV盒子模型

    本文讲解DIV块布局的第二种使用方式:嵌套.“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块). 请看如下代码: CSS部分: CSS ...

  3. CSS复合选择器和div盒子模型

    一.复合选择器(3种) 1.交集复合选择器 特点:由2个选择器组成,其中第一个必须是标签选择器,第二个是类或id选择器.两个选择器之间没有空格(有空格属于层级选择器) <h3 class=&qu ...

  4. div盒子模型

    <style type="text/css"> div{ width:300px; height:300px; background:green; margin:10p ...

  5. DIV盒子模型介绍 div用法

  6. css盒子模型的宽度不包括margin

    看到教程上和一些博客上盒子模型的宽度 = content + padding + margin + border,应该是不包括margin的 <!DOCTYPE html> <htm ...

  7. html学习第三天—— 第11章 盒子模型 div

    盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...

  8. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  9. HTML学习笔记 w3sCss盒子模型(阴影)(div的一些使用)案例 第十节 (原创) 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Redis ---------- Sort Set排序集合类型

    sortset是(list)和(set)的集中体现 与set的相同点: string类型元素的集合 不同点: sortset的元素:值+权 适合场合 获得最热门前5个帖子的信息 例如 select * ...

  2. RESTful API架构和oauth2.0认证机制(概念版)

    1. 什么是REST REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次出现在2000年Roy Fielding的 ...

  3. POJ 1180 斜率优化DP(单调队列)

    Batch Scheduling Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 4347   Accepted: 1992 ...

  4. Spring使用mutipartFile上传文件报错【Failed to instantiate [org.springframework.web.multipart.MultipartFile]】

    报错场景: 使用SSM框架实现文件上传时报“Failed to instantiate [org.springframework.web.multipart.MultipartFile]”错,控制器源 ...

  5. 关于update 表名 set 字段1 = 值1 and 字段2 = 值2的执行结果说明

    技术交流群: 233513714 如果执行了以下的语句,则brand等于‘OPPO’条件所对应的数据不会做改变,但是sequence_brand列除brand = 'OPPO'之外的所有数据都会变为0 ...

  6. springboot遇见问题总结

    今天开始学习创建springboot项目 问题1: 产生异常: 创建项目目录: demo代码: 代码Controller import org.springframework.web.bind.ann ...

  7. Python lambda介绍

    在学习python的过程中,lambda的语法时常会使人感到困惑,lambda是什么,为什么要使用lambda,是不是必须使用lambda? 下面就上面的问题进行一下解答. 1.lambda是什么? ...

  8. sdram之乒乓操作

    在实时显示时,为了保证画面显示的完整性需要对SDRAM进行乒乓操作. SDRAM 中有 4 个bank ,地址分别为00 01 10 11,后面将用 0 1 2 3来描述 bank 0和1 作为第一个 ...

  9. HDU 4758 Walk Through Squares( AC自动机 + 状态压缩DP )

    题意:给你两个串A,B, 问一个串长为M+N且包含A和B且恰好包含M个R的字符串有多少种组合方式,所有字符串中均只含有字符L和R. dp[i][j][k][S]表示串长为i,有j个R,在自动机中的状态 ...

  10. # Including Artificial Intelligence in a Routing ProtocolUsing Software Defined Networks

    Abstract: 问题:AI在路由协议上的应用仅适用于真实设备,尤其是无线传感器节点 The inclusion of artificial intelligence (AI) can improv ...