javascript布局
liangklfang
https://github.com/liangklfangl
展开
-
无定位父元素时offsetParent为body,但是offsetTop/offsetLeft计算距离从html开始
问题1:什么是offsetParent?解答:返回的是被定位的祖先元素,如果没有被定位的元素是body元素!问题2:发生margin重叠以后,我们怎么计算到offsetParent的距离?注意:下面的例子都是在标准模式下测试的结果 上面这种情况肯定会发生margin重叠 //offsetParent如果没有被定位的元素的情况下,如果和body发生了margin原创 2016-01-08 10:21:25 · 4895 阅读 · 1 评论 -
javascript中那些计算元素位置的方法和jQuery位置计算方法比较
问题1:offsetTop,offsetLeft,offsetWidth,offsetHeight等方法的用法?对于offsetWidth/offsetHeight/offsetLeft/offsetTop的计算都是以border为界限的,也就说从子元素border开始计算,到父元素border为止!对于offsetTop/offsetLeft都是要牵涉到offsetParent的,该元素是非原创 2016-01-02 09:05:36 · 3524 阅读 · 0 评论 -
获取元素相对于文档的偏移量以及元素相对于父元素的偏移量
问题1:如果获取元素距离文档顶部的距离? var rect=$('#elem')[0].getBoundingClientRect(); //获取元素距离文档顶部的距离 var top=rect.top+(window.pageYOffset||document.documentElement.scrollTop)-(document.documentElement.client原创 2015-12-22 09:30:53 · 13686 阅读 · 0 评论 -
深入理解margin重叠以及负margin对元素大小的影响
CSS代码: body { background-color:yellow; } .par { margin-top:10px; background-color:red; width:100px; height:100px; }HTML部分: javascript部分:window.onload=functio原创 2015-11-21 09:57:42 · 6216 阅读 · 0 评论 -
body元素和html元素之间的一些表现
问题1:布局方面的表现有什么不同?解答:body只是占用文档内容的区域,如果内容较少那么可能占据不了整个浏览器的可视区域,但是html元素至少也会占用浏览器的可视区域!该图是当body内容较少的情况下,html元素和body元素在浏览器中的表现。问题2:html,body元素之间是否会发生margin重叠现象? 我们给html元素也设定了一个margin-top值验证b原创 2016-01-07 10:31:36 · 2092 阅读 · 0 评论 -
深入理解CSS中的层叠上下文和层叠顺序
转载一篇张鑫旭大神的文章(对于理解GPU硬件加速和网页分层还是有一点帮助的),原文地址:深入理解CSS中的层叠上下文和层叠顺序零、世间的道理都是想通的在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈。比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上。再比如说话语权,老婆的话永远是对的,领导的话永远是对的。在CSS届,也是如此。只是,一般情况下,大家歌舞升平,看不转载 2016-07-01 16:50:32 · 1002 阅读 · 0 评论 -
如何使用js把网页适配为一屏的几个技巧
最近看到一篇关于网页适配的经典文章,有兴趣的可以点开看看。其主要介绍的是pc页面的适配问题,个人觉得是前端开发者必须面临的问题。下面我仿这个例子做了自己的一个demo。注意:下面的例子,其实就是我们以前面临的一个很常见的使用场景,中间是内容部分,必须在不同的设备上能正常显示,即使在1024*768的设备上。而两边在大屏幕上可能会留白,或者使用一个背景图片来填充。实例1:使用background原创 2016-11-08 17:51:44 · 4386 阅读 · 0 评论 -
栅格系统的Gutter vs Offset vs Pull vs Push
1.bootstrap栅格系统boostrap中lg,md,sm,xs之768,992,1200 Bootstrap 栅格系统 理解与总结 Bootstrap学习——栅格系统 Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理) 全局 CSS 样式 因为盒模型变成了border-box,所以添加了gutter后元素本身的大小变小,pad原创 2017-06-20 10:34:25 · 15592 阅读 · 0 评论