今日完成的事情

做任务五，阅读任务3的深度思考

今日收获：

1.flex布局的学习。之前学习的盒子模型布局方式，对一些特殊布局不是很好用，比如垂直居中，这点困扰了我两天，明天打算重新用flex布局做一次任务5。

不管是容器还是行内元素都可以使用flex布局，要注意的是，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

任务四过程中，背景图拉伸有多种办法，其中一种

banner{

background: url("image.png") no-repeat;

height:100%;

width:100%;

overflow: hidden;

background-size:cover;或者background-size:100%;

}

2.深度思考中选择器的优先级知识点。

了解基本选择器和扩展选择器的类型以后，注意到优先级 权重这两个词，

css优先级规则：

css选择规则的权值不同时，权值高的优先；

css选择规则的权值相同时，后定义的规则优先；

也就是相同的样式，权值高的得到体现，有点类似生物里的显性基因一样。

权值等级划分， 一般来说是划分4个等级：

第一等级：代表 内联样式，如 style=""，权值为 1,0,0,0；

第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0；（这里有个小问题，为什么在任务一九宫格的时候不让我们用id选择器？）

第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；

第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；

PS：css属性后面加 !important 时，无条件绝对优先。

3.最后一个是padding和margin什么时候用哪个的问题。

首先是区别，

margin与padding的区别(个人理解)

区别一：pdding能增加元素的容器的可视区域，margin则会减少默认块级元素的可视区域。

区别二：margin有负值，padding不能使用负值。

感觉用哪个主要还是看要在需要哪里留白，都是让元素之间有个距离 一个是元素之间，另一个是元素之内

接着，margin与padding的%值，未使用绝对定位（固定定位）的元素内外边距的%值都是继承父级盒子，如果是绝对定位(固定定位)则是根据其继承关系的定位元素，没有就是根据html元素为基准。

明日计划：完成任务5，继续学习深度思考。今天没有遇到特别大的问题