2019.2.28日报（修）

今天完成的事：

0.今天刚来上海分院报道，全新的开始！

1.完成了任务四

2.任务三深度思考

明天的计划：

1.开始任务五

2.任务四深度思考

遇到的问题：

1.关于抬头，三个文字的排布，我昨天用的方法特别复杂，使用两个盒子+两个定位才把左右的“关闭” “注册”排好，再把中间“登陆”用flex的justify-content :center。今天师兄说一个justify-content: space-between，直接可以把旁边两个字往左右均匀的移动，而且也省去了两个盒子

【代码展示】：

2.昨天遗留的输入框内的左边两个logo，我昨天的想法是设background，然后用padding来移动。今天我采用了将img用absolute，父级div设relative，直接把图片固定在左边，操作起来更为方便

收获：【任务三深度思考】

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

    （1）先在HTML头部声明  <meta name="viewport" content="width=view width, initial-scale=1">

    （2）不使用绝对宽度来布局一个盒子、图片、字体的大小，例如：width: xxx px，使用百分比、em、rem来做单位

    （3）选择加载CSS，在CSS3中可以引入Media Query模块，就是自动探测屏幕宽度，然后加载相对应的CSS文件。例如：（max-device-width:400px）如果屏幕宽度小于400像素就加载xxx.css文件

    （4）CSS的@media规则，在同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

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

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

区别：

（1）block水平默认情况下，水平竖直方向上的padding,margin有效。

（2）inline元素水平排列，竖直方向上的padding,margin无效，水平方向有效

（3）inline-block水平元素，水平竖直方向上的padding,margin有效。

（4）盒模型中，只有content可以使用百分比；padding, margin, border则不可以使用%单位

------------------------

语法规则：

（1）padding可以增加容器的可视区域，margin则会减少默认块级元素的可视区域

（2）margin有负值，padding不能使用负值