切圖崽的自我修養－CSS踩坑紀錄

前言

簡單記錄一下工做中常常碰到的css的一些坑，歡迎隨時拍磚

---

水平居中

1. 該元素是position:nomal, 父元素內block子元素定寬的狀況下，對子元素採用margin:0 auto 便可

2. 該元素是position:absolute, 元素定寬width的狀況下，用left:50%; margin-left:-(1/2)width 能絕對居中

3. 父元素設置 display:flex, 父元素再設置justify-content:center 便可

4. 該元素是inline, 那麼對父元素設置text-align:center便可

5. 父元素寬度自適應，對父元素加padding-left和padding-right便可

6. position:fixed 的元素竟然能夠用margin:0 auto的方式居中，真神奇

垂直居中

1. 該元素是position:nomal, 對父元素採用display:table-cell; vertical-align:middle;
   便可

2. 該元素是position:absolute, 元素定高height的狀況下，用top:50%; margin-top:-(1/2)height 便可

3. 父元素設置 display:flex, 父元素再設置align-item:center 便可

4. 若是子元素是inline, 那麼對父元素設置text-align:center便可

5. 父元素高度自適應，對父元素加padding-top和padding-bottom便可

6. 若是隻簡單對文字垂直居中，只要把文字的line-height設置成和容器同樣高便可

---

Canvas

1. Canvas只支持px單位，而且若是canvas的寬高用css控制，或者$(‘canvas’).css({})來控制的話，裏面圖片都會變形. 只能用 $(‘canvas’)[0].width = 100 ; $(‘canvas’)[0].height = 300 ，或者在標籤上寫\< canvas width=100 height=300>

---

Display

1. 當父元素設置了display:flex以後， 父元素會變成block級， 同時最好把子元素所有設置成block，若是子元素是inline-block或者inline,容易出問題

2. 當父元素設置了display:table-cell以後，父元素變成inline-block級， 對子元素沒影響

---

Width&Height

1. html和body均可以看作一個特殊的div, 通常不會對它設置高度，只當有整屏滑動的需求時候，纔會設置html height:100% , body height:100%. 不過body常常和min-width, max-width，width等屬性連用。

---

Background

1. 即便body設置了寬高， 對body設置background仍是整屏

2. 利用background-position:center和background-size能夠作出背景圖一直居中且寬or高的自適應的效果

3. Css3中的background-origin：content-box 和background-repeat: repeat 一塊兒連用會衝突

---

Position

1. 子元素設置成position:absolute後會脫離正常的文檔流，這時父元素的padding對子元素失效

2. position:absolute 是根據最近的position不爲normal的父元素來定位的

3. positon:fixed 是根據瀏覽器視窗進行定位

---

Animation

1. transform:對元素進行變形

2. animation:規定元素動畫，能夠設立多個關鍵幀，而且不須要事件觸發 若是作複雜的動畫，一般和transform連用

3. transition: 只有兩個關鍵幀的animation，即只有開始和結束. 另外，transition須要事件觸發，好比hover

---

其餘

1. 按鈕通常都寫成 span+backgrount-image的形式，由於如設置成img,會出現用戶移動端長按能夠保存的狀況形成疑惑

---

BUG

1. div下img就算height:100%仍是會比div少幾px,緣由是由於img是行內元素，會自動在尾部添上空白符。 解決方法：img 設置display:block便可
   其實全部的display:inline-block都會出現這個問題，瀏覽器會自動給元素的結尾添加一個空白字符(大小和font-size有關). 解決方法: 能夠對父元素設置font-size:0px; 再在該元素裏把font-size設置回來

2. padding/margin 的top, bottom 設置百分比是根據父元素的寬度來的。

---

結語

坑先挖這麼點，之後碰到再陸續補充