前端入门实践：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

• 远程调试