前端入門實(shí)踐：CSS & 調(diào)試工具篇

Lavender 發(fā)布于2019-08-30 15:54 / 989人閱讀

摘要：篇塊級(jí)元素行內(nèi)元素文檔流將窗體自上而下分成一行行，并在每行中按從左至右的順序排放元素，即為文檔流。

CSS篇 1.塊級(jí)元素 VS 行內(nèi)元素

文檔流!

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

塊級(jí)元素：自動(dòng)換行；垂直排列；width/height/margin/padding都可控制；默認(rèn)寬度100%，除非設(shè)置width/margin

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

行內(nèi)元素：水平排列；width/height無效，只能通過line-height設(shè)置；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可以改變?cè)仫@示類型， 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
桌面瀏覽器，二三欄布局，需要清除浮動(dòng)

flex
移動(dòng)端的時(shí)代，彈性布局，瀏覽器前綴兼容

http://zh.learnlayout.com/

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

5.兼容性查看

https://caniuse.com/

工具篇 1.chrome/ff開發(fā)者工具

html&css調(diào)試

console

斷點(diǎn), debugger

網(wǎng)絡(luò)請(qǐng)求

...

2.Fiddler / Charles

mock數(shù)據(jù)

修改header

3.weinre

遠(yuǎn)程調(diào)試

云服務(wù)器 GPU云服務(wù)器入門篇 ASPNET入門數(shù)據(jù)篇機(jī)器人制作入門篇 python3入門到實(shí)踐

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/116867.html

相關(guān)文章

前端資源系列（4）-前端學(xué)習(xí)資源分享&amp;前端面試資源匯總

摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

princekin 2019-08-20 11:28 評(píng)論0 收藏0
個(gè)人分享--web前端學(xué)習(xí)資源分享

摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...

sherlock221 2019-08-20 18:59 評(píng)論0 收藏0
前端資源分享-只為更好前端

摘要：一團(tuán)隊(duì)組織網(wǎng)站說明騰訊團(tuán)隊(duì)騰訊前端團(tuán)隊(duì)，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計(jì)，簡(jiǎn)稱，騰訊設(shè)計(jì)團(tuán)隊(duì)網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計(jì)部百度前端研發(fā)部出品淘寶前端團(tuán)隊(duì)用技術(shù)為體驗(yàn)提供無限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計(jì)部出品奇舞團(tuán)奇虎旗下前一、團(tuán)隊(duì)組織網(wǎng)站說明騰訊 AlloyTeam 團(tuán)隊(duì) 騰訊Web前端團(tuán)隊(duì)，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

zxhaaa 2019-08-22 16:11 評(píng)論0 收藏0
前端資源分享-只為更好前端

摘要：一團(tuán)隊(duì)組織網(wǎng)站說明騰訊團(tuán)隊(duì)騰訊前端團(tuán)隊(duì)，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計(jì)，簡(jiǎn)稱，騰訊設(shè)計(jì)團(tuán)隊(duì)網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計(jì)部百度前端研發(fā)部出品淘寶前端團(tuán)隊(duì)用技術(shù)為體驗(yàn)提供無限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計(jì)部出品奇舞團(tuán)奇虎旗下前一、團(tuán)隊(duì)組織網(wǎng)站說明騰訊 AlloyTeam 團(tuán)隊(duì) 騰訊Web前端團(tuán)隊(duì)，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

JouyPub 2019-08-02 10:10 評(píng)論0 收藏0