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>
查看全文
相关阅读:
css半透明边框
css脱离文档流
margin负值的作用
浅谈BFC
css多列布局
css布局--水平垂直居中
css布局--垂直居中
css布局--水平居中
题解-APIO2019奇怪装置
题解-AtCoder ARC-078F Mole and Abandoned Mine
原文地址:https://www.cnblogs.com/quanhai/p/1712756.html
最新文章
[js测试]JavaScript Web Quiz By davidshariff
[javascript模块化]require.js简单使用
[css知识体系]flexbox模型
[HTTP知识体系]前端常用的一些参数
[HTML知识体系]语义化标签概论
[HTML知识体系]meta标签的常见用法
[Js代码风格]浅析模块模式
[web设计]带有方向感应的hover effect
[FILE API]利用Javascript上传图片
git学习总结
热门文章
玩转html5<canvas>画图
git常用命令
HTTP必知必会
初学者的Node.js学习历程
客户端javascript
JS内存知识点汇总
JS模块化编程
JS object(对象)的学习汇总
css边框内圆角
css多重边框
Copyright © 2011-2022 走看看