• 当前标签:尺寸

程序开发 尺寸和位置

<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <meta name="viewport" content="width=device-width, initial-scale=1.0">         <meta http-equiv="X-UA-Compatible" content="ie=edge">         <title>尺寸和位置</title>         <style>             html,body{                 height: 100%;             }             section{                 width: 300px;                 height: 300px;                 background-color: red;                 margin: 100px auto;                 border: 20px solid blue;                 padding: 50px;                 position: relative;             }             button{                 position: absolute;                 top: 100px;                 left: 100px;                 border: 10px solid yellow;                 margin: 0;             }         </style>     </head>     <body>         <section>             <button>按钮</button>         </section>         <script>             var sec = document.querySelector('section')             // alert(sec.clientHeight)             // 获取元素的内高度 padding + content             // alert(sec.clientTop)             // border的尺寸             // alert(sec.getBoundingClientRect().bottom)             // 这个方法返回一个矩形对象,包含四个属性:left、top、right、bottom             // 分别表示元素各边与页面上边和左边的距离             var btn =document.querySelector('button')             // alert(btn.offsetHeight)             // 获取元素外高度 border + padding + content             // alert(btn.offsetTop)             // 获取元素上偏移量 相对与定位参考元素的距离             btn.offsetTop = '60px' //设置它的值是无效的             // 改变位置使用以下方式             btn.style.top = '200px'             btn.style.left = 'auto'             btn.style.right = '100px'             // alert(btn.offsetTop)             // sec.onclick = function(){             //     btn.scrollIntoView()             //     // 可以让标签元素滚动到窗口工作区上边缘             // }             btn.onclick =function(){                var popup =document.createElement('div')                popup.style.width = '100px'                popup.style.height = '100px'                popup.style.border = '2px solid yellow'                popup.style.position = 'absolute'                popup.style.top = btn.offsetTop + btn.offsetHeight + 5 + 'px'                popup.style.left = btn.offsetLeft + 'px'                sec.appendChild(popup)                var close =document.createElement('div')                close.style.width = '20px'                close.style.height = '20px'                close.style.backgroundColor = 'yellow'                close.style.position = 'absolute'                close.style.top = btn.offsetTop + btn.offsetHeight + 5 -10 + 'px'                close.style.left = btn.offsetLeft + popup.offsetWidth - 10 + 'px'                close.style.borderRadius = '50%'                close.innerText = 'X'                close.style.textAlign = 'center'                close.style.cursor = 'pointer'                sec.appendChild(close)                close.onclick =function(){                    sec.removeChild(popup)                    sec.removeChild(close)                }             }             // alert(document.documentElement.scrollTop)             // alert(document.documentElement.scrollLeft)                         // 页面滚动的距离 如果没有滚动则为0             // alert(document.documentElement.scrollHeight)             // alert(document.documentElement.scrollWidth)                         // 页面自身的高度和宽度             // 没有滚动条的时候 页面的宽度和高度等于窗口的宽度和高度             // 有滚动条的时候 页面的宽度和高度大于窗口的宽度和高度             // document.documentElement.scrollBy(100,100)             //  相对于当前位置滚动的距离             // document.documentElement.scrollTo(100,100)             // 滚动的距离(相当于滚动的起点)滚动到哪个位置             // window.scrollByPages(1) //按页滚动             // window.scrollByLines(1) //按行滚动             // alert(document.documentElement.clientHeight)             // alert(document.documentElement.clientWidth)             // 窗口工作区的宽度和高度             // alert(window.innerWidth)             // 窗口内宽度             // alert(window.outerWidth)             // 窗口的外宽度             // 外宽度 - 内宽度 = 滚动条 + 窗口边框             // alert(window.outerHeight)             // 窗口外高度             // alert(window.innerHeight)             // 窗口内高度             // 外高度 - 内高度 = 窗口标题栏 + 窗口工具栏             // alert(window.screen.width)             // 屏幕的总宽度             // alert(window.screen.height)                         // 屏幕的总高度             // alert(window.screenX)             // alert(window.screenY)             // 获取窗口左上角的坐标             alert(window.screen.availHeight)             // 屏幕可用高度(扣除任务栏)             alert(window.screen.availWidth)             // 屏幕可用宽度(扣除任务栏)         </script>     </body> </html> 推荐资料:JavaScript中的各种宽高属性

2017-07-18 00:23:58 32 0 0
阅读详情

程序开发 字号与尺寸、像素对照表

字号“数值”越大,字就越小。 中文字号 英文字号(磅) 毫米 像素 1英寸 72pt 25.30mm 95.6px 大特号 63pt 22.14mm 83.7px 特号 54pt 18.97mm 71.7px 初号 42pt 14.82mm 56px 小初 36pt 12.70mm 48px 一号 26pt 9.17mm 34.7px 小一 24pt 8.47mm 32px 二号 22pt 7.76mm 29.3px 小二 18pt 6.35mm 24px 三号 16pt 5.64mm 21.3px 小三 15pt 5.29mm 20px 四号 14pt 4.94mm 18.7px 小四 12pt 4.23mm 16px 五号 10.5pt 3.70mm 14px 小五 9pt 3.18mm 12px 六号 7.5pt 2.56mm 10px 小六 6.5pt 2.29mm 8.7px 七号 5.5pt 1.94mm 7.3px 八号 5pt 1.76mm 6.7px pt即point,就是指英文中的"磅",px即pixel,就是像素。

2017-04-08 14:09:45 45 0 0
阅读详情
  • 1
前往