CSS模型由四部分组成:width height padding margin border
在W3C标准下,盒子模型不包括border和padding值,而在IE浏览器下是包括border和padding的。
1.JS盒子模型:通过系统提供的属性和方法,来获取当前元素的样式值 2.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)client系列: clientWidth/clientHeight:元素设置的宽/高+左右/上下padding; clientLeft/clientTop:左边框的宽度/上边框的宽度 跟内容是否溢出 无关 2)offset系列: offsetWidth/offsetHeight:clientWidth/clientHeight+左右border+上下border offsetLeft/offsetTop:当前元素的外边框距离定位父级的内边框的距离 跟内容溢出 无关 3)scrollHeight: 跟内容溢出 有关 内容溢出:约等于上padding+真实内容的高度;左padding+真实内容的宽度 内容没有溢出:等于clientWidth/clientHeight 为什么约等于? 不同浏览器中scrollHeight的值是不同的 同一个浏览器下,内容是否溢出隐藏,拿到的值也不同的 5.关于JS盒子模型的一些问题: 1)通过JS的属性和方法拿到的都是元素的复合样式,拿不到单独的值;--getCss; 2)通过JS的属性和方法拿到的都是元素的复合样式值都是整数,不会出现小数; 3)offsetLeft只能求出当前定位元素的外边框距离定位父级的内边框之间的距离,但无法求出定位元素距离body的距离;--offset {left:xx,top:xx} 4)JS盒子模型的兼容性存在问题;--win; 6.关于浏览器的常用兼容处理思想: 1)思想1:属性的判断: 1.attr in obj:'getComputedStyle' in window; 2.obj.attr: window.getComputedStyle 3.typeOf obj.attr==='function': typeOf window.getComputdStyle==='function'; 2)思想2:浏览器异常捕获来解决浏览器的兼容性问题;try{}catch(e){} 3)思想3:通过浏览器判断处理浏览器兼容问题: var reg=/MSIE (6|7|8)/g; 1.reg.test(window.navigator.userAgent);//true:IE678 2.window.navigator.userAgent.search(reg) !== -1;//true:IE678 3.window.navigator.userAgent.match(reg)//true:IE678 7.结构父级和定位父级 结构父级中最大的元素是html; 定位父级中最大的元素是body;