今天完成的事情：

今天依旧没写代码，没办法接下来需要用到的boostrap，恰好这个东西又比较难，今天看了一点愣是只看了点皮毛，栅格布局还是不太懂，还是先把师兄弄的格式先记住吧，以后慢慢理解去球。

仔细想想今天也做多少事情，一直都在看教程理解boostrap，没办法刚开始就是还没进入学习高效吸收的状态吧，

还有就是在Confluence上面上传了自己的task一的任务总结，算是有点收获吧，以后可以自己上传总结了

明天计划的事情：明天计划上午再认真的看看boostrap，趁着早上脑子还好使点试着再去理解一点，然后等到下午再开始正式写代码，今天开头就写了个乱七八糟，头懵。尽量两天之内完成任务六，不能在css上面耽误太多时间了。明天的话应该要写出来一半才合理。要不然对不起这两天看了那么久的boostrap了。

遇到的问题：

主要就是对boostrap的不理解，今天啥也没干就跟这个耗上了，没写代码所以说问题太少了，这这里就不啰嗦了。 

收获：

今天把任务一和任务三的任务总结和深度思考给做完了，还有比较重要的就是学会了自己画百度脑图，这个是confiuence中必须的一环，然后就是对poostrap也稍微理解了一点，知道是个啥东西了。

大家好，我是IT修真院郑州分院第17期的学员李亚兵，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网css（职业）任务3，深度思考中的知识点

任务三总结：

做过简单的任务一之后，对于margin，padding等稍微有了一些了解，知道了这些都起到什么作用，稍微会简单的使用了，不过任务三比起任务一难度跨度非常大，比如说任务一只是简单的让你了解了一下盒子模型的作用，怎么使用盒子模型的边框，但是到任务三就直接要求比较准确的操作了，我前期在盒子模型上面迷了好久，一直搞不清什么是盒子，所以任务三遇到的问题还是比较多的，首先就是图片的引入问题，如何在webstorm上面插入图片并控制大小。这个问题经过师兄帮助所以现在已经可以自主的剪切和导入图片并控制大小了。

最大的收获应该就是学会了文本居中，text-aiign：center：，这个标签应该是经常用到的，比较实用的居中简单的居中的方式的一种。

在任务三中弄出了简单的令人发指的页面，其实心里还是比较开心的，加深了我对于盒子的理解，然后学习了插入图片和调整大小，以后遇到问题要学会多思考，而且要深度思考，希望以后认真学习吧。

个人脑图：

任务耗时两天

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

之前在学校里有过学习PS的基础，不过到现在基本上都忘得差不多了，甚至连快捷键F2截图这种都没记住，现在用的图片截图还是比较简单的，点击选中工具点击需要截取的图片上面，这样选中那个图层，然后用F2把这个图层单独的用另一个界面打开，然后快速导出到想要放入的文件夹里面就可以了，暂时还是比较简单的，这里就不放图了，浪费空间。

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

px：是显示屏上显示的每一个小点,为显示的最小单位。这个长度与您正在看的显示屏中的文字屏幕像素没有任何关系。

px像素（Pixel）值是固定的，不会随着屏幕宽度变而变。

em:是相对单位。em其实就是一种排版的测试单位.

在CSS中，“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间，而和它所占据的水平空间没有任何的关系，因此：如果字体大小是16px，那么1em=16px。在所有现代浏览器中，其默认的字体大小就是“16px”。但自身如果定义了font-size大小则按照自身来计算，也就是说整个页面内的em值并非完全一样。

rem:是一个相对的单位，像em，但它总是相对于“根”元素html的字体大小来计算。em和rem的区别：em相对于父元素，rem相对于根元素。这极大地简化了与相关长度单位的合作。

%(percentage)以百分比形式设置的长度基于父元素的相同属性的长度。例如，如果一个元素以450px宽度呈现，宽度设置为50％的子元素将呈现225px。

vw-这是“视口宽度”单位。 1vw等于视口宽度的1％。它与百分比类似，不同之处在于，所有元素的值都保持一致，无论其父元素或父元素宽度如何。

vh-这与vw（视口宽度）单位相同，只是它基于视口高度。vmin and vmax：关于视口高度vh和宽度vw两者的最小值或者最大值。

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

 1、在HTML头部增加viewport标签

        meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

    2、不使用绝对宽度

    3、流动布局

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

对于不同类别的选择器，以以下原则进行排序：

1、在属性后面使用！important会覆盖页面内任何位置定义的元素样式。

2、作为style属性写在元素内的样式

3、id选择器

4、类选择器

5、标签选择器

6、通配符选择器

7、浏览器自定义或子元素集成父类的样式

稍微总结一下就是：！important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性

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