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. Web前端开发面试技巧

    Web前端开发面试技巧 面试前端工程师对我来说是一件非常有意思的事,因为面试过程很大程度上也是自我提升的过程.无论大公司还是小公司,之所以在如何招聘到真正有能力的,前端工程师方面会遇到同样的问题. 近 ...

  2. 【转载】CString,string,char*之间的转换

    本文转自 <> 这三种类型各有各的优点,比如CString比较灵活,是基于MFC常用的类型,安全性也最高,但可移植性最差.string是使用STL时必不可少的类型,所以是做工程时必须熟练掌 ...

  3. 前言 openwrt简介

    什么是openwrt?先看一下度娘怎么说. OpenWRT是一个高度模块化.高度自动化的嵌入式Linux系统,拥有强大的网络组件和扩展性,常常被用于工控设备.电话.小型机器人.智能家居.路由器以及VO ...

  4. Python 文本挖掘:使用情感词典进行情感分析(算法及程序设计)

    出处:http://www.ithao123.cn/content-242299.html 情感分析就是分析一句话说得是很主观还是客观描述,分析这句话表达的是积极的情绪还是消极的情绪.   原理 比如 ...

  5. 自定义注解不能拦截controller层

    1,首先在springMVC的配置文件中,webapp/WEB-INF/servlet.xml,加上AOP的相关内容: <beans xmlns="http://www.springf ...

  6. 使用阿里开源工具 TProfiler 在海量业务代码中精确定位性能代码 (jvm性能调优)

    技术交流群:233513714 本文是<JVM 性能调优实战之:一次系统性能瓶颈的寻找过程> 的后续篇,该篇介绍了如何使用 JDK 自身提供的工具进行 JVM 调优将 TPS 由 2.5 ...

  7. spring boot 入门1-----如何使用@Value注解读取配置文件以及使用@ConfigrationProperties注解

    读取.yml文件属性值的方式 1)如何将配置文件中的属性值与字段匹配起来 @Value("${配置文件中属性的名}") 在application.yml文件中 server: po ...

  8. 即将到来的5G,我们该做些什么准备?

    本文来自网易云社区. 作者:任长存 5G和4G到底什么区别? 实际上5G只是4G通信技术上的演进,都是在 光速 = 波长*频率,这个数学公式上做文章,为什么这么讲? 首先大家都用过WIFI,WIFI的 ...

  9. 编译Code::Blocks源码 with MinGW on Win

    Build Code::Blocks源码 ---By 狂徒归来 CodeBlocks是一款非常优秀的IDE !可惜的是没有64位的版本,而且本来是轻量级别的IDE就应该够轻,能够像记事本工具一样,迅速 ...

  10. python命名空间、作用域、闭包与传值传引用

    (以下内容,均基于python3) 最近在看python函数部分,讲到了python的作用域问题,然后又讲了Python的闭包问题. 在做作业的时候,我遇到了几个问题,下面先来看作业. 一. 作业1: ...