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