1.CSS盒子模型包括四个部分组成:设定的宽高+padding+border+margin;
2.JS盒子模型:通过系统提供的属性和方法,来获取当前元素的样式值
  JS提供的属性和方法:
  1. client系列:clientWidth,clientHeight,clientLeft,clientTop;
  2. offset系列: offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent
  3. scroll系列:scrollWidth,scrollHeight,scrollLeft,scrollTop
3.关于父级
 1)parentNode  结构父级
 2)offsetParent  定位父级
4.JS提供的属性和方法:
1)clientWidth/clientHeight:元素设定的宽/高+左右padding值/上下padding值;
      clientLeft/clientTop:代表对应左边框/上边框的宽度;
     **跟内容是否溢出无关;
2)offsetWidth:clientWidth/clientHight+左右border/上下border;
     offsetLeft:当前元素的外边框距离定位父级内边框的距离;
    **跟内容是否溢出无关;
3)scrollHeight::
      跟内容是否溢出有关
     内容溢出:约等于上padding+真实内容的高度;
     内容没溢出:等于clientWidth或clientHeight;
      为什么是约等于?
      ①不同浏览器中,拿到的scrollHeight值是不同的;
      ②同一浏览器是否溢出隐藏,拿到的值不同;
5.关于JS盒子模型的一些问题
1)通过JS的属性和方法拿到的都是属性的复合 样式,拿不到单独的值;getCss;
2)拿到的复合样式值都是整数,不会出现小数;
3)offsetLeft只能求出当前元素的外边框距离定位元素父级的内边框之间的距离,但是求出与定位元素距离body的距离;—offset{left,top}
4)JS盒子模型的兼容性存在问题;—clientWidth,scrollHeight__—win
6.关于浏览器的常用兼容处理思想
 ①思想一,属性值的判断:
  • attr in window
  • obj.attr
  • typeOf obj.attr==‘function'
②思想二,浏览器异常捕获:try{……}  catch(e){……}  finally{……}
③思想三,通过浏览器判断处理浏览器兼容问题;
     var reg=/MSTE (6|7|8)/g;
  • reg.test(window.navigator.userAgent);//true:IE678;
  • window.navigator.userAgent.match(reg );true —>ie678
  • window.navigator.userAgent.search(reg); !==-1—>ie678
7.结构父级中最大的是HTML;定位父级中最大的元素是body;
8.this的用法
1)当前元素被触发的时候,会调用一个函数,函数中的this指向当前这个元素;

2)函数被调用的时候,点前面是谁,this就是谁

3)自执行函数中的this,window;

4)构造函数中的this是实例;

5)回调函数中的this默认是window;
6)call可以改变this指向
9.类和实例
//给类添加私有属性,跟实例没有任何关系;
//实例:可以使用自己的私有属性和方法,也可以使用原型上的公有方法,但实例无法使用类的私有属性和方法;
function Fn(){

    this.aa=123;//给实例添加私有属性;
}
Fn.aa=456;//给类添加私有属性;
var f=new Fn();
alert(f.aa);
alert(Fn.aa)
 
 
   
 
 
 
 
 
 
 
 

JS学习:第二周——NO.3盒子模型的更多相关文章

  1. 【吴恩达课后测验】Course 1 - 神经网络和深度学习 - 第二周测验【中英】

    [中英][吴恩达课后测验]Course 1 - 神经网络和深度学习 - 第二周测验 第2周测验 - 神经网络基础 神经元节点计算什么? [ ]神经元节点先计算激活函数,再计算线性函数(z = Wx + ...

  2. 201671010140. 2016-2017-2 《Java程序设计》java学习第二周

                                 学习第二周(Java基本程序设计结构)      这一周,着重学习了Java的简单程序设计实现及运行,通过自己操作,发现Java的程序语法大面 ...

  3. H5学习第二周

    怎么说,在各种感觉中h5学习的第二周已经过来了,先总结一下,感觉学习h5是一件让我爱恨交加的事,学会一些新的知识并把它成功运行出来的时候是非常激动和兴奋的,但是有时候搞不懂一个标签或者属性的时候,就有 ...

  4. CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  5. Java学习第二周学习笔记

    20145307<Java程序设计>第二周学习总结 教材学习内容总结 Java语言中的很多基本语法都和C语言类似,以下Java中的基本语法 标识符 标识符是程序中自定义的一些名称. 由26 ...

  6. CSS学习笔记(float和盒子模型)

    1.当元素或者是它的包裹层设置了绝对定位或者是浮动,那么margin:0 auto;自动居中的效果就不会实现. 2.盒子模型的三位立体结构图中从第一层到第五层依次为:border.content+pa ...

  7. IP通信基础学习第二周

    此周的课程学习应该算是我对此科目真正学校生涯的开始吧,尽管我对该科目仍感到很陌生. 课程一开头,老师就给我们简单的介绍了网络的定义.发展及其分类,重点讲了网络拓扑结构及其在局域网上具体的分层情况.该部 ...

  8. Java学习第二周

    这一周观看了黑马程序员毕向东的教学视频学习了数组的创建:数组元素的使用及遍历,类的声明,成员方法的声明,构造器的声明 数据类型[] 数组名 = new 数据类型[长度];数据类型[] 数组名 = {数 ...

  9. JS学习第二课

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. get方式和set方式提交时乱码

    request.setChracterEncoding("utf-8");只对form表单的post提交方式有效. 当使用get提交的时候:

  2. rxjs5.X系列 —— transform系列 api 笔记

    欢迎指导与讨论:) 前言 本文是笔者翻译 RxJS 5.X 官网各类operation操作系列的的第一篇 -- transform转换.如有错漏,希望大家指出提醒O(∩_∩)O.更详细的资料尽在rxj ...

  3. 百度广告 高亮 Chrome插件(附源码)

    一前言 百度最近是上了舆论头条了,相信中过百度毒的人对百度都反感.百度自己挖了这么多坑,终究还是要自己来填.国内网民使且最频繁的搜过 还是以百度为主,而百度依靠这种市场占有率靠他的广告竞价排名大发横财 ...

  4. HAproxy的安装与配置讲解

    1,安装 官网下载 http://www.haproxy.org/#down cd /usr/local/src/ wget http://www.haproxy.org/download/1.4/s ...

  5. python基础补漏-06-其他常用模块

    JSON/Pickle: 首先我们要明白 什么事序列化--> 就是进行不同程序之间的数据交换 那JSON 和Pickle是什么鬼... 就是不同的方式而已 import json name = ...

  6. lua命令行编译

    http://jingyan.baidu.com/article/359911f551917457fe0306e5.html 最后将生成的.exe解释器的根目录配置到系统环境变量 copy lua.c ...

  7. Your app declares support for audio in the UIBackgroundModes key in your Info.plist 错误

    提交AppStore时候被拒绝 拒绝原因:Your app declares support for audio in the UIBackgroundModes key in your Info.p ...

  8. vcf格式

    Variant Call Format(VCF)是一个用于存储基因序列突变信息的文本格式.表示单碱基突变, 插入/缺失, 拷贝数变异和结构变异等.BCF格式文件是VCF格式的二进制文件. CHROM ...

  9. 《黑客反汇编揭秘》(2e)推荐书单

    Must-Read Books and Other References Books on C/C++: The C Programming Language by Brian W. Kernigha ...

  10. Prism 轻量级可扩展代码高亮库.

    官方网站:http://prismjs.com/ Prism 是一个轻量级并且简单易用的 JavaScript 类库,minified 和 gzipped 压缩后只有 1.5kb 大小,即使添加语言定 ...