发表于： 2018-07-24 22:25:50
3 783
一.今天完成的事情
1.关于二倍图/三倍图
（https://zhuanlan.zhihu.com/p/34988701）知乎这篇专栏说的超级仔细
3种像素：
- 虚拟的像素：
图片的分辨率就是指 图片 横向的色块数量 x 纵向的色块数量。
之所以说图片像素是虚拟的，是因为他没有固定的尺寸，我们可以根据需要将图片拉伸成任意尺寸，相应的每个像素也会缩放。：
- 现实的像素：
主屏分辨率又叫 设备分辨率。他是物理像素，也就是真实存在的像素。
如主屏分辨率为 1136 x 640 像素，可以理解为它竖边有1136个格子，横边有640个格子。
- 连接虚拟和现实的像素：
CSS像素又称为 device-independent像素，简称DISP（设备无关像素）。不同于设备像素是真实存在的像素，设备无关像素是一个抽象存在的像素。也就是说他可大可小。那么他是怎么连接虚拟和现实的呢？
答案是：DPR（devicePixelRatio）设备像素比DPR = 物理像素／设备无关像素
2倍屏/3倍屏
业界管DPR为2的屏幕称为2倍屏，DPR为3的屏幕称为3倍屏。
也就是说2倍屏 2 x 2 个物理像素对应 1 个设备无关像素，3倍屏 3 x 3 个物理像素对应 1 个设备无关像素。
同样 div {width: 100px; height: 100px;}
在 2倍屏上显示为：div {width: 200px; height: 200px;}
在 3倍屏上显示为：div {width: 300px; height: 300px;}
2倍图/3倍图
针对不同 DPR 的 屏幕，选择不同图片。
在1倍屏下 a.png 图片像素： 100 x 100
在2倍屏下 a@2x.png 图片像素 200 x 200
在3倍屏下 a@3x.png 图片像素 300 x 300
这样， 图片像素-----设备无关像素------物理像素 就全对应上了。
总结
1个公式：DPR = 物理像素／设备无关像素
2个分辨率：图片分辨率、设备分辨率
3个像素：图片像素、设备像素（物理像素）、设备无关像素
2.表单/表单元素/元素属性
（https://www.tuicool.com/articles/7V3eqan）
HTML 表单用于收集不同类型的用户输入。
表单是一个包含表单元素的区域。表单元素允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置。<form> 标签用于创建供用户输入的 HTML 表单。
form元素只是一个数据获取元素的容器.而容器内的元素称为表单控件，最常用的表单控件是input元素.常用的表单元素：
表单元素--输入标签（<input>）：输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
创建文本字段 ：<input type="text">
-->
创建密码字段：<input type="password">:
-->
密码字段字符不会明文显示，而是以星号或圆点替代。
单选按钮（Radio Buttons）:<input type="radio">
-->
复选框（Checkboxes）:<input type="checkbox"> 定义了复选框.
-->
提交按钮(Submit Button)：<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
在上面的文本框内键入"sundream"几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果:username:sundream.
input元素属性
name ：name属性用于规定input元素的名称。只有设置了name属性的表单元素才能在提交表单时传递它们的值.
type：type属性用来规定input元素的类型。
[注意]如果input元素没有设置type属性，或者设置的值在浏览器中不支持，那么输入类型会变成type="text"。
value：value属性为input元素设定值。对于不同的输入类型，value属性的用法也不同：
type="button"、"reset"、"submit"用于定义按钮上的显示的文本
type="text"、"password"、"hidden"用于定义输入字段的初始值
type="checkbox"、"radio"、"image"用于定义与输入相关联的值
[注意1]type="checkbox"或"radio"必须设置value属性
[注意2]value属性无法与type="file"的input元素一起使用
3.CSS position 属性
（http://www.runoob.com/css/css-positioning.html）
position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。
position 属性的五个值：static、relative、fixed、absolute、sticky
元素可以使用顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。
fixed 定位
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
relative 定位
“相对定位元素”：其定位是相对其正常位置。相对定位元素经常被用来作为绝对定位元素的容器块。
-->
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
sticky 定位
基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动。
页面在目标区域时，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。特定阈值指的是 top, right, bottom 或 left 之一
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。
二、遇到的问题
就是我手上切图得到的只有1种，没说是几倍图啊
如果设置二倍图/三倍图，不是应该同一张图片有好几张大小嘛？就单纯把我某张图缩小还要用二倍图吗？？
三、明日计划
1、任务四：首先布局header，让header紧贴顶部；
2、为header内部布局，保证3块文字分别居于header的左中右，并垂直居中；
3、布局表单内容，至少包含input和button；
4、为input旁边的小图标切图；
5、为表单内容添加样式。
四、今日收获
1、了解到关于像素大小、屏幕像素、css像素的区别，以及二倍图三倍图如何运用；
2、表单的相关知识：作用、主要元素、部分元素的属性；
3、css的position属性中，不同定位元素方式的区别，以及何时采用该种定位方式。
返回列表
评论