一张图更好的帮助你理解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>

查看全文

相关阅读:
数据结构之内部排序---交叉排序（没啥特别的！！！）
数据结构之图论---基于邻接矩阵的广度优先搜索遍历（输出bfs遍历序列）
数据结构之图论---图的深度遍历（输出dfs的先后遍历序列）
数据结构之排序---折半插入排序（时间复杂度 O(nlog2 n) ）
HDU 1022 之 Train Problem I
Bestcoder round 18---A题（素数筛+素数打表+找三个素数其和==n）
Bestcoder round 18----B题（一元三次方程确定区间的最大值（包含极值比较））
操作字典
 在线压缩图片
 JSON转C#实体类

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