蓝领首页 公司简介 业务领域 经典案例 服务中心 建站知识 招贤纳士 在线留言 联系我们
业务领域
网站建设
400电话
企业邮局
空间域名
网站优化
网站备案
网站改版
客户评价
·蓝领公司老板使我公司排名优化...
·蓝领商务经理耐心回答问题与我...
·蓝领商务与我们进行沟通时非常...
·“公司的服务,个人的价格”蓝...
·蓝领商务的建站十分不错,能够...
·蓝领商务在为我们建站时会提供...
·蓝领商务做网站排名挺快的,效...
·在网站的用户体验上蓝领商务的...
建站知识 您现在的位置是:首页 >> 建站知识  
蓝领SEO:深入剖析DOM树之clientl家族
今天淮南SEO小编就来讲一讲,DOM树之clientl家族。
对于JS的基础大多数人学习是没有问题的,再进一步的话就会越来越难,做到深入探讨,蓝领就要去深入解析,就好比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。内联元素皆无,内联块和块级元素二者之和。
行了,就这样吧,差不多了,影响的因素有很多,比如inline对其的影响和padding对其的影响。
 
本文由合肥蓝领原创,转载时请注明出处。返回合肥网站建设公司首页
下一篇:2020淮南网站优化三要素:内容质量、网站速度、用户体验
上一篇:怎么做好淮南关键词优化策略?
相关信息
·怎么做好淮南关键词优化策略?
·如何做好企业站优化排名提高曝光度?
·什么是企业站优化的金字塔技术?
·淮南百度优化的外链技巧
·网站优化的反向链接是什么?
·为什么网站优化重视Tag标签的使用?
·哪些是提高淮南SEO百度收录的要点?
·关于电商网站有哪些图片优化的要点?
·淮南网站优化时的常见错误认识
·什么是网站外链建设的裸链和锚链?
   
版权所有:蓝领商务信息有限公司淮南分公司 联系人:尹经理 电话:13033072779(微信同号)  
 客服服务
 客服服务
 业务咨询
 售后服务
 咨询热线:
 13033072779