一周學習筆記（一）

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是文本元素，裡面不能存在标簽！

作者在做評論框輸入表情功能的時候，因為不知道這個特性吃足了苦頭！！