【爱否SEO】 > SEO教程 > SEO入门教程 >
雪豹SEO:深入剖析DOM树之clientl家族
编辑:【爱否SEO】发布时间: 2017-01-07最近研究DOM,这是js操作的基础,不深入了解,你没法跟浏览器亲密对话。废话不多说,今天对client,offset,scroll及style宽高家族左翼深入探讨,以chrome为例,其他浏览器可能有解析上的差别。 具体来说即: 1.clientWidth,clientHeight,clientLeft,clientTop; 2.offsetWidth,offsetHeight,offsetLeft,offsetTop; 3.scrollWidth,scrollHeight,scrollLeft,scrollTop; 4.height,width。 clientWidth 顾名思义,client,客户端。具体到某一个元素比如html,body或者a,p,img指的就是这个元素,而非常规理解的客户端诸如浏览器。 html标签: 当html各种属性为默认值时,内部是空的head及body元素,其clientWidth值即为视口宽度,比如我的电脑屏宽1366px,当缩放浏览器的时候,该值变成缩放后的宽度,而当竖直滚动条出现的时候,需减去滚动条的宽度(竖直滚动条在高度大于可视屏幕高度时出现,可能是html或其子元素撑开的)。而移动端浏览器是不支持缩放的,因此在默认情况下,这个值就是内置的视口宽度,所谓视口宽度不是硬件屏宽,而是虚拟宽度,比如iphone6为980px,实际屏宽没这么大。 由于影响宽度的属性有width,margin,padding,border,outline。我们逐一来看,当设置html有width,margin,padding,border,outline任意一个或累加的时候,clientWidth不受影响。也即html的clientWidth只与客户端内置视口宽及用户缩放行为有关。 如果内部元素body非默认值,而是设定width,margin,padding,border,outline任意一个或累加的时候,我们看看html的clientWidth的表现,经测试,无论设置多少不会对html的clientWidth造成影响,验证了该值只与客户端内置视口宽及用户缩放行为有关的结论。 如果出现右侧滚动条,一般是当元素高大于浏览器可见部分高时出现,该值需要减去滚动条的宽度,即16px。 以上测试使用的chrome浏览器,其他浏览器可能会有区别。总的一句话,html标签该值只与客户端内置视口宽及用户缩放行为有关。 body标签: 当body标签各种属性为默认值时,内部为空,父元素html为默认属性。其clientWidth值跟html一样,即受客户端内置视口宽及缩放行为影响,如果出现滚动条,则需减去滚动条的宽度16px,而且body默认左右各8px的margin。 tips:body最大clientWidth为33554430px。 而若在其父元素,子元素各项属性值保持默认的情况下,body设置以上width等5项值,会出现什么情况呢?当设置了宽,该值变为宽,当设置了padding,该值变为宽+padding,也即设置本身本身就具有了优先级,而设置另外三项则不受影响。这个宽度是不受限制的,小可到0,大可到无穷,当然这个无法验证,数值太大,浏览器会崩溃。 而若本身保持默认值,父元素html进行5项值测试,设置宽,结果变成该宽值减去滚动条宽度16px,即便没出现滚动条也是如此。而设置其他值不受影响。也即body的clientWidth是受父元素html的宽影响的,其他值不对该值造成影响。 若本身及父元素保持默认值,子元素变动5项值的时候,该值不受影响。 经以上验证,body的该值只受本身的宽+padding及父元素html宽的影响,本身值更具优先级,也即一旦设置本身宽+padding,父元素的宽失效。 p标签(block元素): 当父元素,子元素及本身都为默认值时,该值需要减去父元素body默认的margin左右各8px,当出现滚动条还需减去滚动条的宽度。实际等同于父元素的宽,如果自身有border还需减去。 当父子元素默认,本身设置以上5值,除本身宽+padding外,其他值不影响,也即clientWidth值等于本身宽加上本身左右padding。该结论跟body一样。 当本身及子元素默认,父元素设置5项,该值表现跟body一样,即该值成为父元素宽度,其他四项不造成影响。 当本身及父元素为默认,子元素设置5项,该值恢复到各项都为默认值的时候,即屏宽减去左右padding各8px。 由此可见,block元素的clientWidth也只受本身宽+padding及父元素宽的影响,如果包括父元素往上追踪皆未设置宽度,则会一直追到根元素html的默认值,在PC是客户端可见宽,在移动端是内置视口宽。而若设置了本身宽,padding,或宽+padding,则该值即是这些值,弃用父元素及往上继承的宽度。 video(inline-block元素): 当父子及本身为默认时,该值为0。 当父子为默认,本身设置5值,该值为本身宽+padding。 当本身及子为默认值,父设置5值,该值为0,也即不受父元素宽度影响,这是跟block元素相区别的地方。 当本身及父元素为默认值,子元素设置5值,此类情况对于自闭合标签不适用。该值恢复默认值,也即该元素内置的宽+padding。 因此对于inline-block元素来说,其clientWidth只受本身宽+padding的影响,不受其他影响。 a(inline元素): 当父子及本身为默认时,该值为0。 当父子为默认,本身设置5值,该值为0。 当本身及子为默认,父为5值,该值为0。 当本身及父为默认,子为5值,该值为0。 一句话,对于inline元素来说,clientWidth这个值始终为0,即便内有文本元素也为0。 总而言之,根元素html只受默认视口及用户行为影响;block元素,包括body及其他块clientWidth受自身宽+padding及父元素宽的影响,且以自身为优先;inline-block只受自身宽+padding影响;inline不受任何影响,始终为0。再总结下,clientWidth实际就是自身所有的宽+padding。内联元素皆无,内联块和块级元素二者之和。 ok,按着这样一梳理,这个属性背后隐藏的东西就一目了然了,后面继续家族中其他元素的验证及解读。前几天看了网络上的几篇文章,有出入,因此决定自己一探究竟。 |
- 12-18新手入门学习SEO应该从哪些方面开
- 12-18学习SEO有什么秘诀?SEO成长三部曲
- 12-18seo网站地图优化攻略
- 12-17四种学习SEO必备心态,让您更好学
- 12-17SEO基础入门教程之SEO优化的六个步
- 12-17学习SEO优化前需要掌握的知识?
- 12-17SEO网站优化中新手容易犯的三大错
- 12-17SEOER一天的工作,该怎么安排合理
- 12-17SEO入门教程,十一个SEO最常见问题
- 12-17做网站该注意哪些基本要素?
- 12-16title标题和Description描述怎么写?
- 12-16从百度数据统计看seo推广方向
- 12-16SEO的最新的入门教程 新手必看宝
- 12-16分享!SEO入门必备!SEO入门书籍推
- 12-16SEO新手应该注意的19条误区!
- 12-15SEO新手入门经验分享!SEO整站优化
- 12-15SEO人员求职时必须要显露的三种本
- 12-15什么是网站的外链?外链是什么意
- 12-15新网站SEO策划流程,网站SEO策划方
- 12-15SEO优化基础:网站标题如何写?
- 12-15刚换工作的seoer如何有效展开新阶
- 12-14网站结构是什么?网站结构相关概
- 12-14网站结构优化对SEO的作用?
- 12-14网站结构优化的几个要点,网站结
- 12-14网站结构设计和布局的实施
- 12-14怎么优化网站结构?网站结构优化
- 12-14代码优化简介,代码优化相关概念
- 12-14SEO入门教程:百度指数就是某个关
- 12-13什么是百度索引量?索引量与SI
- 12-13什么是百度索引量?索引量与SI
- 12-08SEO基础入门教程:初学者应该掌握
- 12-17四种学习SEO必备心态,让您更好学
- 12-10网站SEO优化中SERP是什么意思?
- 12-13SEO基础入门教程:10年SEO工作者说
- 11-28几个SEO站长常用的查讯命令
- 12-11做好SEO网站优化需掌握哪些技术?
- 12-10SEO基础入门教程:如何查看百度蜘
- 12-12用户体验优化(UEO)相关问题汇总
- 12-12SEO的历史、现状及未来发展方向是
- 11-28搜索引擎对网页的索引及排名原理
- 12-06SEO伪静态VS真静态
- 12-10SEO入门教程:详解内链、外链、反
- 12-01SEO内部优化解析
- 12-09怎么选择安全稳定的网站空间或虚
- 11-30网站导航优化的几大手法
- 11-30SEO搜索引擎优化工具的使用
- 12-02给SEO域名优化的几点建议
- 11-30百度权重的几点误区
- 12-08分析一下网站SEO中引起网站首页无
- 12-14SEO入门教程:百度指数就是某个关
- 12-09SEO教程:域名长短对网站SEO优化的
- 12-04SEO关键词排名下降解析
- 12-09网站空间选择:国内空间好还是国
- 12-01SEO优化方案中的团队精神
- 12-12SEO入门基础教程:网站建设与免费
- 12-08域名命名规则及结构解析
- 12-01百度蜘蛛在网页抓取过程中的网络
- 12-17SEO基础入门教程之SEO优化的六个步
- 12-10SEO是什么职业?SEO是做什么的?
- 11-30几种网页错误代码反馈解析
- 11-28几个SEO站长常用的查讯命令
- 12-17SEO入门教程,十一个SEO最常见问题
- 12-10SEO基础入门教程:外链的七大分类
- 12-09网站安全防护攻略解析
- 12-13教你如何正确的处理网站的死链接
- 12-16从百度数据统计看seo推广方向
- 12-15SEO优化基础:网站标题如何写?
- 12-16title标题和Description描述怎么写?
- 12-14代码优化简介,代码优化相关概念
- 12-13夫唯SEO优化教程:关键词部署技巧
- 12-09SEO基础入门教程:什么是html网站
- 12-06域名深度与权重解析
- 11-28SEO常用查讯工具及术语
- 12-12用户体验优化(UEO)相关问题汇总
- 11-30几种网页错误代码反馈解析
- 11-24SEO前线:网站优化如何免费拿到流
- 12-13SEO基础入门教程:10年SEO工作者说
- 12-14网站结构优化的几个要点,网站结
- 12-11SEO基础入门教程:什么是绝对地址
- 11-30网站导航优化的几大手法
- 12-11外链优化的注意事项!发外链需遵
- 12-10网站SEO优化中SERP是什么意思?
- 12-14网站结构设计和布局的实施
- 12-04SEO二级域名优化攻略
- 12-06SEO优化之面包屑导航攻略
- 01-07郑志平:做个论坛网站需要多大的
- 12-04SEO关键词排名下降解析
- 12-14网站结构是什么?网站结构相关概
- 12-05百度眼中的死链该如何解决
- 12-09SEO基础入门教程:网页中H1标签的
- 站内导航
-