公司網(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導(dǎo)致塊坍塌
前端布局對齊也可以使用float，但是這樣做會導(dǎo)致被作用塊不占高度(相當于不存在，脫離了文檔流，但是會顯示)，前面的塊不
占高度后面跟著的不需要對齊的塊就可能會和前面的塊擠在一起（各種異常），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 如下:
type="text/javascript"
charset="utf-8">
console.log("hello")
發(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，如何預(yù)處理器?
背景：在組件中的 、
在網(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導(dǎo)致塊坍塌
前端布局對齊也可以使用float，但是這樣做會導(dǎo)致被作用塊不占高度(相當于不存在，脫離了文檔流，但是會顯示)，前面的塊不
占高度后面跟著的不需要對齊的塊就可能會和前面的塊擠在一起（各種異常），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 如下:
type="text/javascript"
charset="utf-8">
console.log("hello")
發(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，如何預(yù)處理器?
背景：在組件中的 、