px

HTML&CSS基础学习笔记1.29-像素和相对长度

由 自古美人都是妖i 提交于 2019-12-05 11:44:07
像素和相对长度 前面的html博文，我们提到过用属性width、height来设置图片的尺寸，它们的单元都是”px（像素）”。 长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。 1、像素 像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。 2、em 就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。 p { font-size:12px; text-indent:2em; } 上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。 3、百分比 设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。 p{ font-size:12px; line-height:130% } px的特点： 1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

Android屏幕计量单位详解

由 佐手、 提交于 2019-12-05 02:38:36
学习 Android 这么久，马上毕业要参加工作了，一直对 px 、 dip 、 sp 、 dp 这几个单位概念似懂非懂的，这次因为工作上的需要，网上搜了点资料并整理了下，写篇日志以便以后阅读。 1.px （ pixels ）（像素） ： 是屏幕的物理像素点 ，与密度相关，密度大了，单位面积上的 px 会比较多。通常不推荐使用这个。 2.dip 或 dp （与密度无关的像素） ： 一个基于 density 的抽象单位， 这个和设备硬件有关，通常在开发中设置一些 view 的宽高推荐用这个，一般情况下，在不同分辨率，都不会有缩放的感觉。在运行时 , Android 根据使用中的屏幕的实际密度 , 透明地处理任何所需 dip 单位的缩放。 3.sp （与刻度无关的像素） ： 同 dip/dp 相似，会根据用户的字体大小偏好来缩放，主要用于设置字体的大小 。 可能很多朋友对 dip 和 px 的区别，不是很清楚，包括我自己之前都没弄清楚，下面简单讨论一下： 首先明确一点： HVGA 屏 density=160 ； QVGA 屏 density=120 ； WVGA 屏 density=240 ； WQVGA 屏 density=120 density 值表示每英寸有多少个显示点，与分辨率是两个概念。 dip 到 px 的转换公式 : px = dip * (density / 160)

练习demo

由 此生再无相见时 提交于 2019-11-30 06:16:47
练习demo 编辑器制作效果展示： 代码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div {border-radius: 70px;width: 200px;height: 200px;background-color: green;position: absolute;left: 0;top: 0} #div1 {width: 220px;height: 220px;transform: rotate(45deg);position: absolute;left: -10px;top: -10px} .bt {color: #6b1d7f;transition: all 0.5s;position: absolute;width: 50px;height: 50px;border-radius: 20px;font-size: 30px;font-weight: bold;outline: 0;border: 0;text-align: center;line-height: 40px} .bt:hover {background-color: yellow} .bt:active {color: red;transform:

练习demo

由 蹲街弑〆低调 提交于 2019-11-30 06:16:40
轮播图demo 编辑器制作效果展示： 代码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * {margin: 0;padding: 0;list-style: none;overflow: hidden;transition: all 0.5s} #ul {width: 500%;height: 100%;background-color:#eee;position: absolute;left: 0} #ul li {width: 20%;height: 100%;float: left} #ul li img {width: 100%;height: 100%} #d {width: 100%;height: 50%;position: absolute} .bt {font-size: 20px;position: absolute;bottom: 10px;bottom: 39%;border: 0;outline: 0;width: 4%;height: 20%;background-color: #ca9dee;border-radius: 20%} .bt:hover {color: white;background

许愿墙

由 时光总嘲笑我的痴心妄想 提交于 2019-11-29 03:15:23
<!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"> <title>许愿墙</title> <style> * { margin: 0; padding: 0; } html { height: 100%; background: linear-gradient(0deg, rgb(171, 212, 238), deepskyblue); } body { position: relative; } .container { width: 100%; height: 630px; position: relative; } input[id="res"] { width: 300px; height: 40px; position: fixed; bottom: 30px; left: 50%; margin-left: -150px; padding-left: 15px; border: 1px solid #ccc; outline: none;

飞机游戏动画特效

由 百般思念 提交于 2019-11-28 19:34:35
<!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"> <title>Document</title> <style> * { margin: 0; padding: 0; } #view { width: 320px; height: 568px; background: url('./img/bg.png'); margin: 0 auto; } #fly_me { width: 34px; height: 24px; position: absolute; } </style> </head> <body> <div id="view"></div> </body> <script> // 创建战机 var flyEle = document.createElement('div'); flyEle.id = 'fly_me'; flyEle.innerHTML = '<img src = "./img/me.png" />'; document.body

html+js+css 实现满天星

由 馋奶兔 提交于 2019-11-27 11:11:43
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>满天星</title> <style> *{ margin: 0; padding: 0; } html,body { width: 100%; height: 100%; background-color: black; position: relative; } .star-animation { position: relative; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } /*动画设计*/ @-webkit-keyframes identifier { 25% { transform: scale(1.5); } 50% { transform: scale(2); } 75% { transform: scale(1.5); } 100% { transform: scale(1); } } @-o-keyframes identifier { 25% { transform: scale(1.5); } 50% { transform: scale(2); } 75% { transform: scale(1.5); } 100% {
订阅 px