总结下任务三学了啥

任务三--魔镜介绍页

PS切图

这里使用了一个叫做Cutterman的插件极大的方便了切图
使用PS的一些技巧：

• 移动工具选择某个对象右下角会出现对应的图层，开关小眼睛可以显示隐藏改对象，最终确定某个对象后显示选中切下来
• 使用插件切图选择Web的 png格式
• 获取UI中的信息:各部分之间的距离文字的字体，字号颜色景的颜色等等

---

移动端样式 ui图转前端页面

一般来说是UI图中大小除以2写在css里
但是准确来说并不是这样的

为了保证在各种屏幕上的不失真，就要根据实际屏幕宽度做等比例换算，才能写进CSS：需要满足：

• 1、写入CSS的尺寸/屏幕宽度 = UI图标注的尺寸/UI图宽度 （由于设置了理想视口，所以视口宽度=屏幕宽度，这里在比值的时候就直接用屏幕宽度
  • 即：写入CSS的尺寸=(UI图标注的尺寸*屏幕宽度)/UI图宽度
• 2、我们将根元素基准值设置为100px然而为了不失真要计算出对应的比例，于是1rem=屏幕宽度/UI设计图宽度*100px
  • 即：屏幕640px，给的设计稿宽640px，那么这种情况下1rem就表示100px如果屏幕320px，给的设计稿宽640px，那么这种情况下1rem就表示50px要想做成响应式，只需要配合@media计算好对应屏幕下html font-size的值。
• 3、于是：写入CSS的尺寸 = UI图标注的尺寸/100px*1rem

---

PX，EM，REM的概念

• px（绝对长度单位） 在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小；
• em（相对长度单位） 的值并不是固定的，会继承父级元素的字体大小，代表倍数；
• rem（相对长度单位） 的值并不是固定的，始终是基于根元素 的，也代表倍数。

为什么一开始在css样式中给body设置font-size：62.5%？

Font-size=62.5%这就使em值变为16px*62.5%=10px。这样1rem=10px，1.2rem=12px利于我们进行换算。

其他的单位

• %
  一般宽泛的讲是相对于父元素，但是并不是十分准确。
  • 对于普通定位元素就是我们理解的父元素
  • 对于position: absolute;的元素是相对于已定位的父元素
  • 对于position: fixed;的元素是相对于 ViewPort（可视窗口）
• vw
  css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%
• vh
  css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。
• vm（不推荐使用）
  css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm

---

css实现图片自适应容器

1. img标签的方式
   • width、height 设置为100%充满了容器，但是图片比容器小的情况强行将图片自适应的话图片就失真
   • 为了不让图片被放大后失真设置max- 100%;max-height: 100%;并设置容器将内部图片水平垂直居中
   • max-100%;overflow:hidden如果图片大于容器多出来的隐藏
2. 背景图的方式

background-size: length | percentage | cover | contain

• length 该属性值是设置背景图像的宽度和高度的，第一个值是宽度，第二个值是设置高度的。如果只设置第一个值，那么第二个值会自动转换为 “auto”;
• percentage 该属性是以父元素的百分比来设置图片的宽度和高度的，第一个值是宽度，第二个值是高度。如果只设置一个值，那么第二个值会被设置为 “auto”;
• cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
• contain把图像扩展至最大尺寸，以使宽度和高度完全适应内容区域。

background:url(../img/1.jpg) center no-repeat;
作用：自适应屏幕大小了，而且不会出现横向的滚动条

---

深度思考

如何利用PS切图以及从UI图中获取所需信息？

• 首先要做的就是观察整个布局
• 图片中的字体，图标的颜色、大小，图标之间的间距
• 通过选中图片中的文字，通过字符栏看到文字的字体，文字的大小，字间距，行间距等信息，可以通过吸管工具选中图标，从拾色器中看到颜色的六位编码，可以通过标尺工具测量图标的大小，间距等。

为什么有时候图片切出来有白边和锯齿？

这是因为在转换为web格式时，有时候会默认转换为png8的格式，这是一种质量比较低的图片格式。我自己在做任务的时候也遇到过这个问题，只需要看在转换时把格式选择png24就行了。

如何进行自适应网页设计

1. 在HTML头部增加viewport标签，允许网页宽度自动调整
2. 不使用绝对宽度
3. 流动布局 各个区块的位置都是浮动的，不是固定不变的。
4. MediaQuery模块 选择加载CSS
5. CSS的@media规则
6. 图片的自适应（fluid image）

自适应是指可以自动识别屏幕宽度、并做出相应调整的网页设计。

那么如何来区分自适应和响应式

响应式和自适应两种布局方式都是为了解决在不同大小和分辨率的设备上正确显示网页的问题。不同的是两种布局方式采取了不同的解决方法。

• 自适应布局：网页内容和布局完全一样
• 响应式布局：可以自动识别屏幕尺寸并做出相应调整的网页设计，页面布局和展示的内容可能会随着屏幕尺寸变化而有所变化。

响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式网站在不同的设备上看上去是不一样的，会随着设备的改变而改变模板样式、模块排版、展示样式。而自适应不会，所有的设备看起来都是一样的网站，不过是长度或者图片变小了，不会根据设备采用不同的展示样式。

css有哪些选择器，优先级如何计算？

选择器的类型可大致划分为：基础选择器、组合选择器、属性选择器、伪类选择器和伪元素等

• 基础选择器
  • * 通用选择器，匹配任何元素
  • 标签选择器，匹配所有使用E标签的元素
  • class选择器，匹配所有class属性中包含error的元素
  • id选择器，匹配所有id属性值为correct的元素
• 组合选择器
  • 多元素选择器 E , F{ }同时匹配E和F
  • 后代元素选择器 E F{ }匹配所有属于E的后代F
  • 子元素选择器 E > F{ }匹配所有E元素的子元素F
  • 毗邻元素选择器E + F匹配所有紧随E元素之后的同级元素F
• 属性选择器
  • E[att] 匹配所有具有att属性的E元素
  • E[att=val] 匹配所有att属性等于“val”的E元素
  • E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
  • E[att｜=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素
• 伪类选择器
  • E:first-child 匹配父元素E下的第一个子元素
  • E:link 匹配所有未被点击的链接
  • E:visited 匹配所有已被点击的链接
  • E:active 匹配鼠标已经按下、还没有释放的E元素
  • E:hover 匹配鼠标悬停其上的E元素
  • E:focus 匹配获得当前焦点的E元素
  • E:lang(c) 匹配lang属性等于c的E元素
• 伪元素
  • E:first-line 匹配E元素的第一行
  • E:first-letter 匹配E元素的第一个字母
  • E:before 在E元素之前插入生成的内容
  • E:after 在E元素之后插入生成的内容

浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

一般来说优先级规则是：

！important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

关于a标签的一些知识

< a >标签定义超链接，用于从一张页面链接到另一张页面

< a > 元素最重要的属性是 href 属性，它指示链接的目标

在所有浏览器中，链接的默认外观是：

• 未被访问的链接带有下划线而且是蓝色的
• 已被访问的链接带有下划线而且是紫色的
• 活动链接带有下划线而且是红色的

a链接的四种状态

• link 设置a对象在未被访问前的样式表属性。
• visited 设置a对象在其链接地址已被访问过时的样式表属性。
• hover 设置对象在其鼠标悬停时的样式表属性。
• active 设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。

定义CSS时候的顺序不同，也会直接导致链接显示的效果不同正确的顺序：a:link、a:visited、a:hover、a:active

• 鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
• 鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；

所以a:hover定义一定要放在a:link、a:visited的后面！

什么时候用margin？什么时候用padding？

使用margin：

• 需要在border外侧添加空白时。
• 空白处不需要背景（色）时。
• 上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

用padding：

• 需要在border内测添加空白时。
• 空白处需要背景（色）时。
• 上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”

手机分辨率和网页中的px是一回事吗？

像素：手机屏幕显示出画面是由一个个发光的小点组成的，每个小点就是像素。

• 物理像素是指设备屏幕实际拥有的像素点
• 逻辑像素：也叫设备独立像素（Device Independent Pixel，DIP），可以理解为反映在css/js代码里的像素点数。
• 设备像素比（Device Pixel Ratio，DPR），一个设备的物理像素与逻辑像素之比。

DPR = 设备像素 / CSS像素(某一方向上)
以iphone5为例，iphone5的CSS像素为320px*568px，DPR是2，所以其设备像素为640px*1136px

分辨率：
分辨率是单位长度内包含像素点（物理）的数量，通常以像素每英寸ppi（pixel per inch）为单位来表示图像分辨率的大小，例如分辨率为72ppi表示每英寸包含72个像素点，分辨率越高，包含的像素点就越多，图像越清晰，但占用的存储空间就越大。