今天完成的事情： 

css隐藏元素的方法：‍‍‍‍

opacity:0

opacity属性我相信大家都知道表示元素的透明度，而将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。

.transparent {
     opacity:0;
 }

这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。

visibility:hidden

设置元素的visibility为hidden也是一种常用的隐藏元素的方法，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。

.hidden{  
     visibility:hidden

visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景

设置height，width等盒模型属性为0

这是我总结的一种比较奇葩的技巧，简单说就是将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素。

.hiddenBox {
       margin:0;
   border:0;
   padding:0;
   height:0;
   width:0;
   overflow:hidden;

display:none

设置元素的display为none是最常用的隐藏元素的方法。

hide {
display:none;

将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。

1、display:none：元素彻底消失，但不会触发其点击事件
2、visibility:hidden：无法触发其点击事件，有一种说法是display:none是元素看不见摸不着，而visibility:hidden是看不见摸得着，这种说法是不准确的，设置元素的visibility后无法触发点击事件，说明这种方法元素也是消失了，只是依然占据着页面空间。
3、opacity:0：可以触发点击事件，原因也很简单，设置元素透明度为0后，元素只是相对于人眼不存在而已，对浏览器来说，它还是存在的，所以可以触发点击事件
4、height:0：将元素的高度设置为0，并且设置overflow:hidden。使用这种方法来隐藏元素，是否可以触发事件要根据具体的情况来分析。如果元素设置了border，padding等属性不为0，很显然，页面上还是能看到这个元素的，触发元素的点击事件完全没有问题。如果全部属性都设置为0，很显然，这个元素相当于消失了，即无法触发点击事件。

盒子的阴影效果：

1、盒子阴影样式单词：box-shadow

2、语法

div{box-shadow:0 0 1px #000 inset;} 

代表边框间距靠左0 靠上0 和1px阴影范围 阴影颜色为黑色（#000），有inset 代表框内阴影 ，不带inset 代表框外阴影。

注意：
box-shadow:0px 0px 1px #000
第1个值为0时，代表左右边框阴影 为1px范围
第1个值为正整数 代表 左边框阴影
第1个值为负整数 代表 右边框阴影
同理
第2个值为0 代表上下边框阴影
第2个值为正整数 代表1px阴影距离上边框多少
第1个值为负整数 代表下边框阴影设置

3、对象阴影语法分析图

对象阴影box-shadow样式分析图

明天计划的事情：继续任务8.9
遇到的问题： 调整各屏幕的规格有没有一个好的方法，调整比较花时间
收获：

盒子阴影效果与隐藏元素的方法