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在windows下安装过程(转)

    (转)原文:http://www.cnblogs.com/M-LittleBird/p/5902850.html 要使redis在PHP下运行, 需在PHP文件下的ext扩展文件夹中添加扩展文件 ph ...

  2. 1014-34-首页15-计算原创微博的frame------计算cell的高度---计算 UILabel 的 CGSize 的方法

    一.总体思路: 在控制器中,每次拿到数据模型(请求了数据.加载新微博)的时候,就调用 - (NSArray *)stausFramesWithStatuses:(NSArray *)statuses, ...

  3. 深度学习 GPU环境 Ubuntu 16.04 + Nvidia GTX 1080 + Python 3.6 + CUDA 9.0 + cuDNN 7.1 + TensorFlow 1.6 环境配置

    本节详细说明一下深度学习环境配置,Ubuntu 16.04 + Nvidia GTX 1080 + Python 3.6 + CUDA 9.0 + cuDNN 7.1 + TensorFlow 1.6 ...

  4. C#学习你需要知道的---(For和Foreach)

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/52577283 作者:car ...

  5. wireshark 获取RTP payload

    wireshark 抓包获取RTP TS流数据,保存为TS文件 首先解析RTP流 2.点击菜单栏[Statistics]-[RTP]-[Show All Streams] 3.在Wireshark:R ...

  6. laravel5.5路由

    目录 1. routes/web.php 2. routes/api.php 3. 重定向路由 4. 路由参数 5. 约束 6. 命名路由 7. 路由组 8 路由模型绑定 9 表单方法伪造 10 访问 ...

  7. 【转】Android 添加系统服务

    Android系统本身提供了很多系统服务,如WindowManagerService,PowerManagerService等.下面描述一下添加一个系统服务的具体步骤. 1.  撰写一个aidl文件, ...

  8. shell判断文件是否存在[转]

    原文出处: http://canofy.iteye.com/blog/252289 shell判断文件,目录是否存在或者具有权限 #!/bin/sh myPath="/var/log/htt ...

  9. VSX-1 概述

    博客搁置了一段时间,一直想写,无从下手,正好最近在做VS2010扩展方面的项目,所以写VSX系列文章以记之. 背景 现有工作是做金融行业,主要项目是一套银行综合前端系统,也就是银行平时用的最多的一个系 ...

  10. 一个python的文件对比脚本

    脚本主要用来给游戏客户端做热更的. 处理方式就是针对每个文件求其MD5值,再根据文件的目录和名字对比两个版本的MD5值,如果不一样,则这次热更就需要更新这个文件. 用法很简单. 1,生成MD5码列表 ...