web開發前端踩坑

2021-08-18 23:25:00 字數 1156 閱讀 5954

1.inline-block總會有間隙

前端布局對齊也可以使用float,但是這樣做會導致被作用塊不佔高度(相當於不存在,脫離了文件流,但是會顯示),前面的塊不佔高度後面跟著的不需要對齊的塊就可能會和前面的塊擠在一起(各種異常),float很好用,但是怎麼才能避免塊坍塌呢?

1.在結束float的塊後面加乙個寬高都為0的塊,並設定樣式為clear:both;就像在浮動不佔空間的塊下面加了乙個隔板(我也不知道怎麼解釋,但是很管用)

2.在使用float的塊的父級塊中設定樣式overflow:hidden;這個樣式的意思是超出父級元素大小的部分不顯示,能夠解決坍塌可能是因為float塊寬度原因。

3.使用after偽物件,這個沒用過,但是感覺原理就和第乙個一樣。

前端布局有的時候需要精確控制元素位置,比如讓元素居中,常用的對於塊級元素居中方法是

margin:0 auto;

position:absolute; left:50%; margin-left:-'元素寬度';(一開始不知道margin還可以為負,這樣用感覺很妙)

但是用絕對定位的時候總是會有莫名奇妙的問題,有的時候位置是相對於body,有的時候只是相對於父級,到底相對於誰呢?

總結下,absolute的定位應該是相對於同樣使用了absolute的父元素,如果沒有這樣的父元素那就是相對於整個body,所以如果要用absolute又要相對于父元素調整位置,那麼只需要給父元素也加上乙個absolute就可以了,(而且如果只設定樣式position:absolute;不設定top和left等定位屬性,那麼元素的位置仍然是原來的位置,如果設定了left而不設定top,那麼元素的left應該遵循上面的規則,而top位置還是在原地,總而言之就是,絕對定位的元素不設定水平邊距或者垂直邊距的時候,位置仍然是原來的水平位置或者垂直位置。)

使用webpack打包的時候,對於資源需要用url-loader處理,否則打包過後的路徑仍然是相對於原來檔案的,比如

而對於js中url應該用require引用,否則不會被webpack打包,我就是在這被坑的,打包幾遍都沒用

前端開發種踩過的坑

在公司裡面,踩坑最多莫過於變數名命名 檔名命名 函式名命名 標籤名命名 常量統一下劃線加大寫 變數統一駝峰嚴禁下劃線,vue檔案的name除了駝峰外首字母還得大寫 不能使用魔術數字除了1,0,1 檔名使用功能模組 下劃線 具體功能細節,而且每個功能基本擁有乙個common檔案,用於儲存該業務 復用的...

前端踩坑2 10000

踩坑2 10000,優化頁面訪問速度之懶載入。現在的網際網路越來越發的,與使用者的互動也越發的重要起來,在我門前端人員的開發過程中,相信都遇到過頁面載入速度太慢的問題,這個問題出現的原因比較多,什麼載入資源比較多,頻寬比較低之類的,在這裡就不做贅述,就來講講今天的主角 懶載入。什麼是懶載入呢?顧名思...

前端前置 Git踩坑

git config global user.name zhangsan git config global user.email zhangsan qq.com 檢查cd ssh預設目錄 c users specter.ssh 生成公鑰和私鑰 ssh keygen t rsa c zhangsan...