css

css樣式這一塊坑比較多，有些情況不按常理出牌，在考慮不同螢幕顯示效果, 精確控制樣式和大小時就會遇到這些坑。

1、

行內元素（比如img）預設會在末尾(或底部)留白/間隙，無法去除。解決辦法：通過display:block讓其以塊級元素進行顯示。（同時注意的是父元素設定的text-align:center;只對行內元素有效，改成block顯示後，需要加margin-left來調整到居中位置。）

2、

相鄰兩層div，內層加margin和外層加padding效果並不一樣！！！！
外層加padding顯示效果符合常理，如果是內層加margin，左右margin顯示正常，但上下margin會表現到父層div上面，這點讓人費解。
如果給內層加上float:left;會消除內層對外層的影響，但這本質上是讓內層脫離外出的結構控制。

3、

通過js改變dom節點的className，會根據className對應的css樣式改變節點的外觀，這點是毋庸置疑的。但如果在其後緊跟一個alert()將會發現，彈出alert後，dom節點的className雖然變化了，但是css還來不及渲染，而且渲染暫停。
target.className = ‘change’
alert(111);
alert確定之後，target才會展現出className 對應的外觀。

4、

要控制一個span在父層內部垂直居中須同時滿足如下條件：
a 父層元素（如p，div）指定line-height；
b 對span同時指定display: inline-block;
line-height: 1.4em;
vertical-align: middle;這3個屬性限制。

5、關於居中(前端佈局的傷o(╥﹏╥)o)

css中實現居中效果：

/*對行內元素有效, 塊狀元素使用margin:0 auto;*/
text-align:center;
vertical-align: middle;
/*flex佈局, 在父容器上制定以下屬性*/
display: flex;
justify-content: center;
align-items: center;
/*absolute1*/
position: absolute;
overflow: hidden;
z-index: 200;
top:50%;
left: 50%;
transform:translate(-50%,-50%)
 
;/*注意transform的瀏覽器相容性寫法*/
/*在PC Chrome上測試正確, 有次在iPhone6s上測試顯示不對, 元素並未水平垂直居中, 而是超出了父元素的上邊界, 待進一步查驗*/
position: absolute;
z-index: 3000;
width: 32px;
height: 32px;
top: 0;
right: 0;
bottom: 0;
left:0;
margin: auto;

6、關於float

float屬性指定一個盒子（元素）是否應該浮動，絕對定位(absolute)的元素忽略float屬性！
left 元素向左浮動。
right 元素向右浮動。
none 預設值。元素不浮動，並會顯示在其在文字中出現的位置。
inherit 規定應該從父元素繼承 float 屬性的值。

7、關於position

預設值static
absolute
生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
fixed
生成絕對定位的元素，相對於瀏覽器視窗進行定位。
元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
relative
生成相對定位的元素，相對於其正常位置進行定位。
因此，“left:20” 會向元素的 LEFT 位置新增 20 畫素。
static 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
inherit 規定應該從父元素繼承 position 屬性的值。

8、html/js

1、首先需要注意的是<script>是雙標記標籤，下面這種寫法必然是不行的。

<script src="js/xxx.js"/>//錯誤

<script src="js/xxx.js"></script>//正確

次從別的地方拷貝的程式碼過來，就被這個問題給坑了！！