今天完成的事情：（一定要写非常细致的内容）

完成css任务一、三

明天计划的事情：（一定要写非常细致的内容）

1、做任务二、四

2、外联样式，过css标签和html标签，写写w3c上的例子，了解作用

遇到的问题：（遇到什么困难，怎么解决的）

1、在使用float时，因为页面宽度较宽，一行显示六个box，百度怎么设置一行三个，为什么手机端可以显示九宫格。

因为没有注意float的用法，设置固定大小的box会根据页面大小调整位置。之后box调整为%大小。

2、遇到边距不等问题，通过margin或者padding调整。把角弄成圆的，border-radius:5px；

3、切图尚未掌握，使用ps图片中的psd导出png解决。

4、加入无意义的div标签，设置高度，为了让图片下移，通过margin-top解决。

5、友情链接两个小图和文字，刚开始不知道怎么设置布局，用了span和p标签对应图片和文本，但是间距调整不了，通过left，right布局解决。

在right、left单个类中，图片和文字左对齐，在父类中加载center没有效果，只有当前子类中加入，会形成图片居于文字中间。

6、底板颜色不会设置相同色。在PS取色后，拾色器下有带#的字样，复制在background或者color下即可。

收获：（通过今天的学习，学到了什么知识）

任务一深度思考

1、HTML文件里开头的Doctype有什么作用？

<!-- 向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。 -->

目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

2、如何理解盒模型及其content、padding、border、margin？

/* border 边框一般用于分离元素，border的外围一般是指元素的最外围

border的属性只要有三个color(颜色) width(粗细) style(样式) */

 /* padding 用于控制content 与 border之间的距离 */

 /* margin是指元素与元素之间的距离，从直观上来看就是指用于控制块与块之间的距离。 */

 /* content(内容)

3、常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？

inline行内元素会再一条直线上，是在同一水平线布局的。

span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）

block块级元素各占一行，是垂直方向布局的

div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等

行内块元素表现其实和行内元素一样，只是其可以设置width和height属性。

行内元素是无法设置其宽和高的,行内块元素实际就是把块元素以行的形式展现,保留了块元素可以设置的对应CSS属性。

4、如何使用浏览器的F12调试页面？

调试页面还需进一步掌握，F12调试修改是用于调试，现在还是习惯在vscode中修改，页面再刷新。在页面上需要加入text-area:center属性，加载父类上没有效果，只有在需要使用的子类中加入属性才能居中显示。这就是因为没有掌握好父子类的从属关系和不会F12调试造成的。

5、九宫格的布局你还能想到哪些办法实现？它们各自的优势劣势是什么？

九宫格的布局，一开始选择的就是table标签实现，还可以利用div中，使用span和p标签都可以。

在布局时，一种选择vw或者%，一种选择px，px是固定标签，当页面大小变幻时，相应不会保证出现九宫格，可能出现一行四个或一行两个。

6、IDE是什么？它和文本编辑器相比有什么优缺点？

ide包含文本编辑器，ide便于开发，写代码有自动补齐功能，以及各种环境辅助，而文本编辑轻便，但是写代码需要丰富的知识确保不会出错。

7、加和不加meta的viewport有什么区别？

加width=device-width，字体大小才会适合阅读。用手机访问一些网站的时候，看到的页面和电脑上一样，字体非常小，需要缩放才能看清，这种就是没加width=device-width的。

任务三深度思考

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

下载了Cutterman_panel，传说最好用的ps切图插件，今天学习

2、px、em、rem、%、vw、wh、vm等单位有什么区别？

px：为像素单位。它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位；

em：相对值，非固定大小单位，1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

可以使用下面这个公式将像素转换为 em：pixels/16=em  

而rem是相对于根元素html，em是相对于应用于当前当前元素的字体尺寸；而百分比则是相对于父元素的尺寸。  字体尺寸尽量使用em、rem。

vh和vw相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）

vmin vmax: vmin 和 vmax 则关于视口高度和宽度两者的最小或者最大值

浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 7px， 1vmax = 11px。

如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则等于10.8px。

3、如何进行自适应网页设计？

1）在网页代码的头部，加入一行viewport元标签。

<meta name="viewport" content="width=device-width,initial-scale=1" />

2）由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

"自适应网页设计"的核心，就是CSS3引入的MediaQuery模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

使用link标签，学习示例  <link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css" />

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

类别选择器，类别选择器根据类名来选择，前面以“.”来标志。

标签选择器，一个完整的HTML页面是有很多不同的标签组成，如：body，div，p，ul，li，而标签选择器，则是决定哪些标签采用相应的css样式。

ID选择器，前面以“#”号来标志

通用选择器，*通用选择器是功能最强大的也是用的最少的选择器。

伪类选择器  即链接样式。a元素的伪类，存在4中不同的状态：link、visited、active、hover。

子选择器  只是选择元素的直接后代，即仅仅作用于第一个后代。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

1.最高优先级是 (直接在标签中的设置样式，假设级别为1000)<div style="color:Red;"></div>

2.次优先级是（ID选择器 ,假设级别为100）   #myDiv{color:Red;}

3.其次优先级是（类选择器，假设级别为10） .divClass{color:Red;}

4.最后优先级是 （标签选择器，假设级别是 1）  div{color:Red;}

5.那么后代选择器的优先级就可以计算了 比如 .divClass  span { color:Red;}   优先级别就是：10+1=11 

5、什么时候用margin好，什么时候用padding好？

“外边距”这个词来解释margin（同理padding可以称之为“内边距”，可以称呼padding为“补白”或者“留白”）

何时应当使用margin：

需要在border外侧添加空白时。

空白处不需要背景（色）时。

上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding：

需要在border内测添加空白时。

空白处需要背景（色）时。

上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

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

网页中的px，CSS pixels可以理解为css像素，是浏览器使用的抽象单位，主要用来在网页上绘制内容。也可以说css px是专门为web开发者提出的一个抽象概念，也只跟我们平时写的css样式有关，与分辨率（比如720px*1280px）里的px没关系。

device pixels可以理解为是设备像素，官方的解释是：显示屏幕的最小物理单位，每个dp包含自己的颜色、高宽等。

它跟设备自身的px是没关系的。也就是说1个CSS 像素占多少个物理像素是不确定的，这个问题通过页面的放缩比较容易理解。比如一个普通的html页面上，有一个300px的元素；如果我们放大页面，元素会占据更多的设备像素（即device pixels），但它的CSS pixels不变，依然是300px；缩小页面也是同样的道理，占据了更少的device pixels，但它的CSS pixels不变。也就是说，元素占据了多少device pixels，是由当前页面的放缩比例而定的。

任务开始时间：2018.01.22

预计提交时间：2018.02.15

是否有延期风险：无

禅道：http://task.ptteng.com/zentao/my-task-assignedTo-project_asc-117-20-1.html