一张图更好的帮助你理解css中的一些概念

zoukankan html css js c++ java

一张图更好的帮助你理解css中的一些概念

測試代碼
dhtmlpos <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>dhtmlpos</title> </head> <body style="border-right: #99ccff 20px solid; border-top: #99ccff 20px solid; border-left: #99ccff 20px solid; border-bottom: #99ccff 20px solid; left: 100px; position: relative; top: 100px; padding-right: 17px; padding-left: 17px; padding-bottom: 17px; margin: 17px; padding-top: 17px;" bgcolor="#66cc00"> 出现在什么地方啊。运行之后，如果你打开了qq程序，那么就可以同时按下ctrl+alt+a来操作。 <div style="border-right: #99ccff 10px solid; border-top: #99ccff 10px solid; border-left: #99ccff 10x solid; border-bottom: #99ccff 10px solid; left: 0px; 150px; position: relative; top: 50px; height: 200px; background-color: #ffcc00; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; margin: 5px; padding-top: 10px;"> <textarea id="TextArea1" cols="20" wrap="off" rows="10" contenteditable=inherit>DTHML is so cool!DTHML is socool!DTHML is socool!DTHML is socool!DTHML is socool!DTHML is socool!DTHML is so cool!DTHML is so cool!DTHML is so cool!DTHML is so cool!DTHML is so cool!DTHML is so cool!DTHML is so cool!DTHML is so cool!DTHML is so cool!DTHML is so cool!DTHML is so cool!DTHML is so cool!</textarea></div> </body> <SCRIPT LANGUAGE="JavaScript"> var div=document.getElementsByTagName("div")[0]; var s = ""; s += "\r\ndiv.style.left："+ div.style.left; s += "\r\ndiv.style.top："+ div.style.top; s += "\r\ndiv.style.border："+ div.style.border; s += "\r\ndiv.style.margin："+ div.style.margin; s += "\r\ndiv.style.padding："+ div.style.padding; s += "\r\ndiv.offsetLeft："+ div.offsetLeft; s += "\r\ndiv.offsetHeight："+ div.offsetHeight; s += "\r\ndiv.offsetTop："+ div.offsetTop; s += "\r\ndiv.offsetWidth："+ div.offsetWidth; s += "\r\ndiv.clientLeft："+ div.clientLeft; s += "\r\ndiv.clientHeight："+ div.clientHeight; s += "\r\ndiv.clientWidth："+ div.clientWidth; s += "\r\ndiv.clientTop："+ div.clientTop; s += "\r\ndiv.scrollTop："+ div.scrollTop; s += "\r\ndiv.scrollHeight："+ div.scrollHeight; s += "\r\ndiv.scrollWidth："+ div.scrollWidth; var body1=document.getElementsByTagName("body")[0]; s += "\r\nbody1.style.left："+ body1.style.left; s += "\r\nbody1.style.top："+ body1.style.top; s += "\r\nbody1.style.border："+ body1.style.border; s += "\r\nbody1.style.margin："+ body1.style.margin; s += "\r\nbody1.style.padding："+ body1.style.padding; s += "\r\ndocument.body.clientWidth："+ document.body.clientWidth; s += "\r\ndocument.body.clientLeft："+ document.body.clientLeft; s += "\r\ndocument.body.clientHeight："+ document.body.clientHeight; s += "\r\ndocument.body.clientTop："+ document.body.clientTop; s += "\r\ndocument.body.offsetWidth："+ document.body.offsetWidth; s += "\r\ndocument.body.offsetHeight："+ document.body.offsetHeight; s += "\r\ndocument.body.offsetLeft："+ document.body.offsetLeft; s += "\r\ndocument.body.offsetTop："+ document.body.offsetTop; s += "\r\ndocument.body.scrollWidth："+ document.body.scrollWidth; s += "\r\ndocument.body.scrollHeight："+ document.body.scrollHeight; s += "\r\ndocument.body.scrollTop："+ document.body.scrollTop; s += "\r\ndocument.body.scrollLeft："+ document.body.scrollLeft; s += "\r\n网页正文部分上："+ window.screenTop; s += "\r\n网页正文部分左："+ window.screenLeft; s += "\r\n屏幕分辨率的高："+ window.screen.height; s += "\r\n屏幕分辨率的宽："+ window.screen.width; s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight; s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth; alert(s); </SCRIPT> </html>

查看全文

相关阅读:
组合容斥计数技巧
 [BZOJ3456]城市规划：DP+NTT+多项式求逆
 [BZOJ4456][ZJOI2016]旅行者：分治+最短路
 [51nod1383&1048]整数分解为2的幂：DP
[BZO3572][HNOI2014]世界树：虚树+倍增
 树上最小权链覆盖：可并堆
 [BZOJ4237]稻草人：CDQ分治+单调栈
 [BZOJ3453]tyvj 1858 XLkxc：拉格朗日插值
 [BZOJ5463][APIO2018]铁人两项：Tarjan+圆方树
 [BZOJ4695]最假女选手：segment tree beats!

原文地址：https://www.cnblogs.com/quanhai/p/1712756.html