第一，今天做的事：
1.关于px深入理解，px作为一个相对长度单位，不同设备一个单位色素块大小不一。因此引出了关于，px与屏幕分辨率，dpi, dip(也称dp)，以及图片分辨率之间的关系：
(1).屏幕分辨率，即设备可以单位显示的像素点，相同屏幕大小下，分辨率越高，意味着像素面积越小，也就是像素点越多，从而可呈现的图像也会更加精细。反之，分辨率越低，意味着像素面积越大，也就是像素点越少，从而可呈现的图像也会比较粗糙。因此，屏幕分辨率一定时，显示屏越小，图片越清晰，同理，屏幕显示大小一定时，分辨率越高，显示越精细。
(2).提到屏幕分辨率，也会联想到图片分辨率，它代表着每英寸图片所携带的像素点的多少，比如，500*500的图片，即其水平方向500个像素点，垂直方向500个像素点，在1：1放大时，同一张在屏幕分辨率高的设备上，图片尺寸会小一些，相对的，在屏幕分辨率低的设备上，图片尺寸会更大一些。打个比方来说，在一个一平方厘米中，屏幕分辨率低的，就只有一个像素点，而屏幕分辨率高的，会有四个像素点。于是，同等条件下图片大小会不一样，因为图片所携带的像素点数量是固定的。
(3).dpi是指屏幕每英寸下含有的像素点，即不同设备dpi会不同。举个例子，比如， 有一个dip=320 的480*800的4英寸手机，则其计算
dpi= 480^2+800^2的平方跟/4=233，换算为px时px= 320*（233/160）=466px，然而实际为px=320*（240/160）=480px。
注意：手机上面计算出来的DPI为理论值，实际上只有120dpi（low），160dpi（medium），240dpi（high），320dpi（xhigh）这四种
(4).dip(也称dp)，是指设备独立像素，其可以根据使用屏幕实际密度，根据需求透明的处理不同设备的密度dip的任意等比缩放，确保其可以正确的显示在设备上。有公式 px=dp*(dpi/160)，其中为什么要/160，官方解释是因为第一款android的设备分辨率为160，所以沿用下来 ，并且160无论乘以0.5/1.5/2都比较适合做适配。参考注意。
2.对rem,em,px,百分比测试：
<!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">
<style>
html {
font-size: 30px;
color: white;
overflow: scroll;
}
.testem {
font-size: 20px;
width: 600px;
background-color: aqua;
}
.p1 {
width: 10em;
background-color: brown;
}
span {
display: block;
width: 50%;
background-color: burlywood;
}
.p2 {
width: 10em;
background-color: cornflowerblue;
}
.p3 {
background-color: crimson;
width: 200px;
}
.p4 {
background-color: darkcyan;
width: 10rem;
}
.div2 {
background-color: yellowgreen;
width: 15rem;
font-size: 2em;
}
.p5 {
background-color: teal;
width: 5em;
}
</style>
<title>em,rem测试</title>
</head>
<body>
<div class="testem">
我设置了字体大小20px,宽度600px
<p class="p1">继承div 10em*20px=200px</p>
<span>继承div元素的 600px*50%=300px</span>
<div class="div2">
宽度=15rem*30px=450px,font-size=2em*20px=40px
<p class="p5">继承第二个div的 宽度=5em*40px=200px</p>
</div>
</div>
<p class="p2">继承body 10em*16px=160px,在html不设值时为160px，html设置时10em*30px=300px</p>
<p class="p3">自带200px</p>
<p class="p4">继承html 30px*10rem=300px</p>
<div class="testrem">
</div>
</body>
</html>
其中，rem是相对于根元素HTML的值，em相对于父元素，所以有时嵌套多时会出现继承就近父元素的情况出现，而非总是相对于body设置的值。如第一条总结而得，px的是也一个相对单位，不过是一个相对于设备分辨率的值，不过因为设备适配原因，用了 px=dp *(dpi/160) 比列换算了。相比较而言，目前使用rem作为单位更加适合。
3.绝对定位，相对定位，固定定位比较：
<!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">
<style>
.div1 {
background-color: teal;
height: 100px;
}
.div2 {
background-color: tomato;
height: 200px;
width: 200px;
position: absolute;
top: 50px;
left: 50px;
}
.div3 {
background-color: wheat;
height: 100px;
position: relative;
left: 50px;
}
.div4 {
background-color: yellowgreen;
height: 100px;
width: 400px;
position: relative;
left: 300px;
}
.div5 {
background-color: turquoise;
height: 100px;
position: fixed;
top: 240px;
left: 50px;
}
</style>
<title>绝对，相对</title>
</head>
<body>
<div class="div1">div1 我是正常定位的</div>
<div class="div2">div2 我添加了absolute 并且相对根元素 top left各移动50px
<div class="div3">div3 div2的子元素 使用relative 继承div2宽度 并且相对于原来的位置，即原来父元素div2的位置 我的top=0px</div>
</div>
<div class="div4">div4 我填充了原本div2的位置，因为div2脱离了文档流，不占位置。并且设置absolute left=300px</div>
<div class="div5">div5 设置fixed 相对窗口top=240px left=50px</div>
</body>
</html>
绝对定位的使用会导致其脱离文档流，使得其后面的元素填充其留下的空位。相对定位使用时，虽然使用top，left让其有一定位移离开本身的位置，但其位置在文档流中依旧存在，不会被其他元素占用，并且是相对原来的位置进行定位。而固定定位相对于窗口的定位，即使网页出现滚动使得元素超出本身元素所在位置，固定定位的元素依旧在固定位置。
第二，明天的任务：
1.对浮动的学习；
2，继续ps的学习；
3.尽快写出魔镜介绍页。
返回列表
评论