前台设计细节剖析.docx

关于手型光标（css—cursor:hand;）在css中定义cursor:hand;并不能稳定运行，也不是W3C标准，标准的做法cursor:pointer;关于style、currentStyle、getComputedStyle样式表分为以下几种：直接写在tag上的为内嵌样式、写在head元素的style标签中的为内部样式、link引入的为外部样式。内嵌样式，可以通过Dom.style.样式名称获取，需要注意的时样式名称是驼峰格式内部样式和外部样式通过style.样式名称是无法获取的，需要通过currentStyle/getComputedStyle来获取，如果硬是使用style的话，你将只能得到一个空值。如果获取样式时，返回的值是“auto”怎么办？使用offset+样式名称（首字母大写）样式表的offset、client、scroll和currentStyle属性offsetHeight = borderTopWidth + clientHeight + scrollbarWidth + borderBottomWidth; offsetWidth = borderLeftWidth + clientWidth + scrollbarWidth + borderRightWidth; 元素内部实际可用区域(高) = clientHeight - paddingTopWidth - paddingBottomWidth; 元素内部实际可用区域(宽) = clientWidth - paddingLeftWidth - paddingRightWidth; scrollHeight：文章的实际高度，不管是否已经用纵向滚动条浏览过。 scrollWidth：文章的实际宽度，不管是否已经用横向滚动条浏览过。 scrollTop：用纵向滚动条滚过的高度。 scrollLeft：用横向滚动条滚过的宽度。 文章未滚过部分(高) = scrollHeight - scrollTop - clientHeight; 文章未滚过部分(宽) = scrollWidth - scrollLeft - clientWidth; offsetTop： 如果position是absolute，则是相对于body（纵向滚动条滚到最上面，横向滚动条滚到最左面）左上角那个点y轴之间的差。如果是 relative，则是相对于上方或外层元素y轴上的差值。如果是static（position的默认值），则该属性没有意义。 offsetLeft： 如果position是absolute，则是相对于body（纵向滚动条滚到最上面，横向滚动条滚到最左面）左上角那个点x轴之间的差。如果是 relative，则是相对于上方或外层元素x轴上的差值。如果是static（position的默认值），则该属性没有意义。 clientTop：等同于borderTopWidth。 clientLeft：等同于borderLeftWidth。 currentStyle： ??? height：等同于clientHeight。 ??? width：等同于clientWidth。 ??? left：等同于offsetLeft。 ??? top：等同于offsetTop。 ??? padding：共有4个，可以单独指定，也可以一起指定。该值是指元素border距元素内可用区域之间的距离。 ??? margin：共有4个，可以单独指定，也可以一起指定。该值是指距相邻/周围元素之间的距离。当元素position为relative时，其4个值分别等同于top、right、bottom和left4、 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.heig