前端入門實踐：CSS & 調試工具篇

CSS篇

1.塊級元素 VS 行內元素

• 文檔流!

  將窗體自上而下分紅一行行， 並在每行中按從左至右的順序排放元素，即爲文檔流。

• 塊級元素：自動換行；垂直排列；width/height/margin/padding均可控制；默認寬度100%，除非設置width/margin

  div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , menu , noframes , noscript , ol , p , pre , table , ul , li...

• 行內元素：水平排列；width/height無效，只能經過line-height設置；margin/padding左右有效，上下無效

  a , b , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup...

• display/float/position能夠改變元素顯示類型， inline->block, block->inline

2.CSS盒模型

box-sizing

3. display

• none
• inline
• block
• inline-block
• table
• table-cell
• flex

4.佈局

• position

  static, relative, absolute, fixed

  top, left, right, bottom

• float
  桌面瀏覽器，二三欄佈局，須要清除浮動
• flex
  移動端的時代，彈性佈局，瀏覽器前綴兼容

  http://zh.learnlayout.com/

  http://www.runoob.com/w3cnote...

5.兼容性查看

https://caniuse.com/

工具篇

1.chrome/ff開發者工具

• html&css調試
• console
• 斷點, debugger
• 網絡請求
• ...

2.Fiddler / Charles

• mock數據
• 修改header

3.weinre

• 遠程調試