px | 易学教程

android 布局中的单位及分辨率自解

阅读更多关于 android 布局中的单位及分辨率自解

先上一个网上copy的 px ：是屏幕的像素点 in ：英寸 mm ：毫米 pt ：磅， 1/72 英寸 dp ：一个基于 density 的抽象单位，如果一个 160dpi 的屏幕， 1dp=1px dip ：等同于 dp sp ：同 dp 相似，但还会根据用户的字体大小偏好来缩放。建议使用 sp 作为文本的单位，其它用 dip 然后是我自己的理解: Android 的屏幕密度是以 160 为基准的 , 屏幕密度 (densityDpi) 为 160 时 , 是将一英寸分为 160 份 , 每一份是 1 像素 . 如果屏幕密度 (densityDpi) 为 240 时 , 是将一英寸分为 240 份 , 每一份是 1 像素 . 1 英寸 /160( 机器 x) = 1 英寸 /240( 机器 y) = 1px 打个比方 , 一个三英寸的显示屏幕的机器 , 如果屏幕密度 (densityDpi) 为 160, 即密度比 (density)1.0 时 , 画一条 160dip 和 160px 的线条 , 两个都是 1 英寸 . 可如果还是三英寸的屏幕 , 如果屏幕密度 (densityDpi) 变为 320, 即密度比 (density)2.0 时 ,1 英寸有 320 像素了 , 此时 160px 显示就是半英寸 . 160dip 显示还是 1 英寸 , 因为 1dip =

Vue造轮子-popover组件(下)

阅读更多关于 Vue造轮子-popover组件(下)

1. 上一次的问题总结。 overflow:hidden -> body.appendChild 关闭重复 -> 分开,document 只管外面,popover 只管里面忘了取消监听 document -> 收拢 close 2. 可以把一个函数哟没有五行作为一个优化的标准,简称为五行定律 3. 接下来把样式改好点 .content-wrapper { // 如果写了scoped,popover里面那么就只作用于popover里面,移到外面就在外面了就可以 position: absolute; border: 1px solid $border-color; border-radius: $border-radius; filter: drop-shadow(0 0 1px rgba(0,0,0,0.5)); /*通过drop-shadow解决小三角没有阴影的问题，但是兼容性不好 */ /*box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);*/ background: white; transform: translateY(-100%); margin-top: -10px; padding: .5em 1em; max-width: 20em; word-break: break-all; &::before , &::after{

瀑布流图片加载

阅读更多关于瀑布流图片加载

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .imglist{width: 100%;height: auto;position: relative;} .imglist ul{padding:0px;margin:0px auto;position: relative;} .imglist ul li{width: 220px;border:1px solid #ccc;padding: 5px;float: left;list-style: none;position: absolute;} .imglist ul li img{width: 100%;vertical-align: middle;} .more{position: absolute;display: block;width: 100px;height:30px;padding: 5px 10px;background-color: #efefef;color:#333;left: 0px;right:0px;margin: 0px auto;border:none;border-radius: 4px;} </style> </head> <body> <div class="imglist">

拖拽——带框

阅读更多关于拖拽——带框

/*--> */ /*--> */ <!DOCTYPE html> <html > <head > < meta charset = "UTF-8" > <title ></title > < style type ="text/css" > #box { height : 300 px ; width : 300 px; background-color : green; position : absolute ; left : 0; top : 0; } .border { border : 2 px dashed red; position : absolute ; } </style > </head > <body > < div id ="box" > </ div> </body > < script type ="text/javascript" > var box = document.getElementById( "box"); var x = 0; var y = 0; box.onmousedown = function ( ev ) { var oEvent = ev || event; x = oEvent.clientX - box.offsetLeft; y = oEvent.clientY - box.offsetTop; //产生一个新的div

js构造函数原型利用实例-随机方块

阅读更多关于 js构造函数原型利用实例-随机方块

随机方块十个方块在范围内，随机浮动 Html: <!DOCTYPE html> <html lang="en"> <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"> <link rel="stylesheet" href="./css/common.css"> <title>Document</title> </head> <body> <div id="back"> </div> <script src="./js/box.js"></script> <script src="./js/tools.js"></script> <script> tools.addBox() </script> </body> </html> tools.js let tools = { //获取随机数从start 到 end getRandom : function (start, end){ return Math.floor(Math.random() * (end - start + 1) ) + start }, //随机颜色

em和pt

阅读更多关于 em和pt

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 前言 CSS通常来讲不太被重视,可是里面的东西都繁琐,需要大量的时间和经验的积累,平时我们定义大小或者宽高使用的都是px单位,也就是像素.CSS所提供的单位不止px一种,还有em和pt. 正文我们日常使用最多的是px,也就是像素,它是相对于显示器分辨率的而言的相对长度.但是一些网页放大功能,尤其是在IE下无法放大.em是一个什么样的单位呢? 按照CSS2.0的定义,em也是一个相对单位,相对于当前对象内文本大小.如果当前对象内文本大小未被设置,则按照浏览器默认大小. 如果按照这么说,我们可以理解,px是相对于显示器的,em是相对于当前文本的,所以px对于我们来说就是绝对单位了,而em则是相对的大小.通常来讲如果你的浏览器未经调整,那么默认的字体高度是16px,所以这里的16px = 1em. em 如果大家关注过Bootstrap的CSS的话,经常可以看见这种定义font-size: 62.5%;这个其实就是为了em的设置,之前说过了默认情况下16px = 1em.为了方便计算我们通常可以在body中声明font-size:62.5%;这样的话就变成16px * 0.625 = 1em,也就是px只要除以10就可以换成em单位了. em没有固定的大小,是真正的相对单位,并且em会继承父元素的字体大小

【js】流式布局页面

阅读更多关于【js】流式布局页面

<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta charset="utf-8" /> <style type="text/css"> .eblock{ position: absolute;width:200px;min-height:300px; border:1px solid #F00;} </style> <script src="http://r.ytrss.com/rs/js/yintaih5/h5js/lib/jquery.js"></script> <script type="text/javascript"> $(function() { var current; var rowfirst; var rowsecond; var rowthrid; var rowfourth; var index = 1; $(".eblock").each(function() { current = $(this); // 获取首行元素 if (index <= 4) { if (index % 4 == 1) { rowfirst = $(this); } else if (index % 4 == 2) {

原生JS经典射击游戏-小蜜蜂

阅读更多关于原生JS经典射击游戏-小蜜蜂

经典射击游戏-小蜜蜂做之前的大概思路看下面这个图，这个游戏我打算用单例模式来写也就是平常我们说的单体模式。源码链接在线玩经典射击游戏-小蜜蜂单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果他可以被实例化，那么他只能被实例化一次。单体模式是javascript里面最基本但是也是最有用的也是最常用的模式之一。单体模式的特点：可以用来划分命名空间，从而清除全局变量所带来的危险,也就是该类只有一个实例该类自行创建该实例，即在该类内部创建自身的实例对象，向整个系统公开这个实例接口。利用分支技术来封装浏览器直接的差异可以把代码组织的更为一体，便于阅读和维护。单体模式的思路是：一个类能返回一个对象的引用（并且永远是同一个）和一个获得该实例的方法（静态方法，通常使用getInstance名称）。那么当我们调用这个方法时，如果类持有的引用不为空就返回该引用，否者就创建该类的实例，并且将实例引用赋值给该类保持的那个引用再返回。同时将该类的构造函数定义为私有方法，避免其他函数使用该构造函数来实例化对象，只通过该类的静态方法来得到该类的唯一实例。用一句话来说，单例模式的核心是确保只有一个实例，并提供全局访问。布局代码 <!doctype html> < html lang = "en" > < head > < meta charset = "UTF-8"

javascript实现小游戏贪吃蛇

阅读更多关于 javascript实现小游戏贪吃蛇

贪吃蛇 style <style> .face{ height: 400px; width: 600px; margin-left: auto; margin-right: auto; position: relative; background-color: pink; } #playground{ height: 400px; width: 450px; float: left; position: relative; } .menu{ height: 400px; width: 150px; float: left; background-color: skyblue; } #snack{ height: 20px; width: 20px; background-color: red; position: absolute; left: 0px; top:0px; } #food{ height: 20px; width: 20px; background: blue; position: absolute; } .body{ height: 20px; width: 20px; background: green; position: absolute; left: 0px; top:0px; } #score{ font-size: 30px; font-weight:

圣诞节雪花效果，pc端

阅读更多关于圣诞节雪花效果，pc端

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/snow.css"> <style type="text/css"> .box{width: 100%; height: 900px; background: #000;} </style> </head> <body> <div class="box"></div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/snow.js"></script> </body> </html> snow.css /*雪花飘落*/ .snow-container { position: fixed; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 2000; } .snow-container .snow { position: absolute; background: #fff; -webkit

订阅 px