中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

公司網(wǎng)站建設(shè)web開發(fā)要注意的問題

2022-05-02    分類: 網(wǎng)站建設(shè)

1.inline-block總會有間隙
網(wǎng)站建設(shè)前端布局的時候經(jīng)常會有對齊的需要,inline可以用來對齊行級元素,而如果要對齊塊級元素就要用到inline-block了,但是用了inline-block會發(fā)現(xiàn)的確對齊了,但是塊與塊之間總會有間隙,這是因為內(nèi)聯(lián)及內(nèi)聯(lián)塊元素之間在HTML中寫的換行或者空格會被解析

,那么怎么解決這個問題呢?
一種方法是不寫換行或空格,就是把標簽全放在一起,不過這樣擠在一塊不利于讀代碼。
還有就是在父元素里把font-size設(shè)置為0px,這樣就算有空格也會被解析為0的大小,也就消除了空格了。
2.float導致塊坍塌
前端布局對齊也可以使用float,但是這樣做會導致被作用塊不占高度(相當于不存在,脫離了文檔流,但是會顯示),前面的塊不
占高度后面跟著的不需要對齊的塊就可能會和前面的塊擠在一起(各種異常),float很好用,但是怎么才能避免塊坍塌呢?
在結(jié)束float的塊后面加一個寬高都為0的塊,并設(shè)置樣式為clear:both;就像在浮動不占空間的塊下面加了一個隔板(我也不知道怎么解釋,但是很管用)
在使用float的塊的父級塊中設(shè)置樣式overflow:hidden;這個樣式的意思是超出父級元素大小的部分不顯示,能夠解決坍塌可能是因為float塊寬度原因。
使用after偽對象,這個沒用過,但是感覺原理就和第一個一樣。
3.position:absolute位置到底相對于誰?
前端布局有的時候需要精確控制元素位置,比如讓元素居中,常用的對于塊級元素居中方法是
margin:0
auto;
position:absolute; left:50%; margin-left:-'元素寬度';(一開始不知道m(xù)argin還可以為負,這樣用感覺很妙)
但是用絕對定位的時候總是會有
莫名奇妙的問題,有的時候位置是相對于body,有的時候只是相對于父級,到底相對于誰呢?
總結(jié)下,absolute的定位應(yīng)該是相對于同樣使用了
absolute的父元素,如果沒有這樣的父元素那就是相對于整個body,所以如果要用absolute又要相對于父元素調(diào)整位置,那么只需要給父元素也
加上一個absolute就可以了,(而且如果只設(shè)置樣式position:absolute;不設(shè)置top和left等定位屬性,那么元素的位置仍然是原來的位置,如果設(shè)
置了left而不設(shè)置top,那么元素的left應(yīng)該遵循上面的規(guī)則,而top位置還是在原地,總而言之就是,絕對定位的元素不設(shè)置水平邊距或者垂直邊
距的時候,位置仍然是原來的水平位置或者垂直位置。)
4.webpack打包圖片資源路徑問題
使用webpack打包的時候,對于圖片資源需要用url-loader處理,否則打包過后的路徑仍然是相對于原來文件的
而對于js中url應(yīng)該用require引用,否則不會被webpack打包,我就是在這被坑的,打包幾遍都沒用
web開發(fā)前段的構(gòu)建問題;
1,如何在 head 里面引入 js 文件?
背景: 在 標簽中,以 inline 的形式引入 flexible.js 文件
移動端項目可以引入 flexible.js 來實現(xiàn)移動端適配
Nuxt.js 通過 vue-meta 實現(xiàn)頭部標簽管理
通過查看文檔發(fā)現(xiàn),可以按照如下方式配置:
// nuxt.config.js
head: {
script: [
{
innerHTML: 'console.log("hello")',
type: 'text/javascript',
charset: 'utf-8'
}
]
}
結(jié)果,生成 html 如下:

發(fā)現(xiàn) vue-meta 把引號做了轉(zhuǎn)義處理,加入 __dangerouslyDisableSanitizers: ['script'] 后,就不會再對這些字符做轉(zhuǎn)義了。
注釋:該字段使用需慎重!
接下來,要把 console.log("hello") 的內(nèi)容替換成 flexible.js,配置升級之后如下:
head: {
script: [
{
innerHTML: require('./assets/js/flexible'),
type: 'text/javascript',
charset: 'utf-8'
}
],
__dangerouslyDisableSanitizers: ['script']
}
踩坑成功,下一個坑...

2,如何預處理器?
背景:在組件中的