一周学习笔记（一）

1.img在父元素中居中问题。
作为前端小白，元素水平居中第一个想到的就是margin：0 auto，但是试了之后发现没有反应，查了各种资料后发现，img是内联块元素，不能使用这个方法来进行居中，所以如果要使该css生效，需要将img设成inline或者block。
除此之外，可以在父元素中设置text-align：center这样也能让img在父元素中水平居中。
之后是垂直居中，父元素增加display：table-cell;vertical-align:middle;给img增加vertical-align:middle;就能做到使img垂直居中。
也可以使用背景法让img来对父元素垂直居中，给定父元素宽高，利用background:url() center no-repeat。这样也能实现垂直居中。
如果图片大小是给定的，甚至可以用绝对定位法。通过margin设置负的图片宽高，然后对图片进行决定定位，设置top：50%和left：50%。
如果图片大小不给定，也可以用决定定位法。设置margin：auto。top，left，right，bottom都设为0。

2.z-index的失效问题。
之前做项目是就遇到了，无论z-index设的多大，他都没有一点效果，搜索了相关资料，得出以下几个结论：

1. 父标签 position属性为relative；
2. 问题标签无position属性（不包括static）；
3. 问题标签含有浮动(float)属性。
   以上三种情况，有任何一种，就会使z-index失效。
   1.2的解决方法是，修改它的position，3的修改方法是清除浮动，这样z-index就能正常使用了~。

3.总结以下清除浮动的方法。
网上清除浮动的方法有很多，五花八门，查了一些资料，总结几个简单实用而且常规的。

1. clear：both
   通过在父元素里面创建一个div，对div设置clear：both的方法来清除浮动。

2. overflow：hidden
   通过对父元素设置CSS属性overflow：hidden可以达到子元素实用float带来的浮动效果。

3. 定义伪类和zoom属性
   给父元素定义一个伪类，再加zoom：1的属性（ie专有属性，可解决ie6,ie7浮动问题 ）
   推荐使用第三种方法，虽然比较麻烦，但兼容性强，各大大佬网站目前都用这个方法~。

写到这里，作者特意回头去查了一下，为什么需要清除浮动~？

1. 如果父元素没有固定高，而子元素有浮动，那么子元素不会把父元素撑大，因为子元素脱离了标准文档流。这时候就需要清除浮动来保证父元素的高度。

2. 元素浮动会对下面的其他元素位置造成影响（注意我这里说的是下面的其他元素，对其上面的元素不受影响），元素脱离标准文档流，所以下面的元素位置会往上移，改变原来的初衷。

   4.display：none和visibility：hidden的区别
   当看到这个问题的时候，作者其实是一脸懵逼的，因为一直用的就是display：none，知道有visibility：hidden这个东西，也知道是隐藏元素用的，但他们两具体有啥区别……
   好吧，不知道很正常，不知道之后去查，去学就好了~
   visibility：hidden这个属性，是把元素隐藏掉，但是，这个元素还会占着它原来的位置，只是把之前的元素从看得见变成了看不见，但是他还是占着地方。相当于一个人穿上了隐身衣，但他这个人还是在原来的地方，只是看不到了。
   display：none这个属性，就是把元素设为无，不占页面任何地方，仿佛这个元素从未存在过一样。

最后还有个小知识点~
对textarea不能用原生js的innerHTML和jq的html（）方法，textarea是文本元素，里面不能存在标签！
作者在做评论框输入表情功能的时候，因为不知道这个特性吃足了苦头！！