2019-08-27
1.inline-block總會有間隙
在網站建設前端布局的時候經常會有對齊的需要,inline可以用來對齊行級元素,而如果要對齊塊級元素就要用到inline-block了,但是用了inline-block會發現的确對齊了,但是塊與塊之間總會有間隙,這是因爲内聯及内聯塊元素之間在HTML中(zhōng)寫的換行或者空格會被解析
,那麽怎麽解決這個問題呢?
一(yī)種方法是不寫換行或空格,就是把标簽全放(fàng)在一(yī)起,不過這樣擠在一(yī)塊不利于讀代碼。
還有就是在父元素裏把font-size設置爲0px,這樣就算有空格也會被解析爲0的大(dà)小(xiǎo),也就消除了空格了。
2.float導緻塊坍塌
前端布局對齊也可以使用float,但是這樣做會導緻被作用塊不占高度(相當于不存在,脫離(lí)了文檔流,但是會顯示),前面的塊不
占高度後面跟着的不需要對齊的塊就可能會和前面的塊擠在一(yī)起(各種異常),float很好用,但是怎麽才能避免塊坍塌呢?
在結束float的塊後面加一(yī)個寬高都爲0的塊,并設置樣式爲clear:both;就像在浮動不占空間的塊下(xià)面加了一(yī)個隔闆(我(wǒ)也不知(zhī)道怎麽解釋,但是很管用)
在使用float的塊的父級塊中(zhōng)設置樣式overflow:hidden;這個樣式的意思是超出父級元素大(dà)小(xiǎo)的部分(fēn)不顯示,能夠解決坍塌可能是因爲float塊寬度原因。
使用after僞對象,這個沒用過,但是感覺原理就和第一(yī)個一(yī)樣。
3.position:absolute位置到底相對于誰?
前端布局有的時候需要精确控制元素位置,比如讓元素居中(zhōng),常用的對于塊級元素居中(zhōng)方法是
margin:0
auto;
position:absolute; left:50%; margin-left:-'元素寬度';(一(yī)開(kāi)始不知(zhī)道margin還可以爲負,這樣用感覺很妙)
但是用絕對定位的時候總是會有
莫名奇妙的問題,有的時候位置是相對于body,有的時候隻是相對于父級,到底相對于誰呢?
總結下(xià),absolute的定位應該是相對于同樣使用了
absolute的父元素,如果沒有這樣的父元素那就是相對于整個body,所以如果要用absolute又(yòu)要相對于父元素調整位置,那麽隻需要給父元素也
加上一(yī)個absolute就可以了,(而且如果隻設置樣式position:absolute;不設置top和left等定位屬性,那麽元素的位置仍然是原來的位置,如果設
置了left而不設置top,那麽元素的left應該遵循上面的規則,而top位置還是在原地,總而言之就是,絕對定位的元素不設置水平邊距或者垂直邊
距的時候,位置仍然是原來的水平位置或者垂直位置。)
4.webpack打包圖片資(zī)源路徑問題
使用webpack打包的時候,對于圖片資(zī)源需要用url-loader處理,否則打包過後的路徑仍然是相對于原來文件的
而對于js中(zhōng)url應該用require引用,否則不會被webpack打包,我(wǒ)就是在這被坑的,打包幾遍都沒用
web開(kāi)發前段的構建問題;
1,如何在 head 裏面引入 js 文件?
背景: 在 <head> 标簽中(zhōng),以 inline 的形式引入 flexible.js 文件
移動端項目可以引入 flexible.js 來實現移動端适配
Nuxt.js 通過 vue-meta 實現頭部标簽管理
通過查看文檔發現,可以按照如下(xià)方式配置:
// nuxt.config.js
head: {
script: [
{
innerHTML: 'console.log("hello")',
type: 'text/javascript',
charset: 'utf-8'
}
]
}
結果,生(shēng)成 html 如下(xià):
<script
data-n-head="true"
type="text/javascript"
charset="utf-8">
console.log("hello")
</script>
發現 vue-meta 把引号做了轉義處理,加入 __dangerouslyDisableSanitizers: ['script'] 後,就不會再對這些字符做轉義了。
注釋:該字段使用需慎重!
接下(xià)來,要把 console.log("hello") 的内容替換成 flexible.js,配置升級之後如下(xià):
head: {
script: [
{
innerHTML: require('./assets/js/flexible'),
type: 'text/javascript',
charset: 'utf-8'
}
],
__dangerouslyDisableSanitizers: ['script']
}
踩坑成功,下(xià)一(yī)個坑...
2,如何預處理器?
背景:在組件中(zhōng)的 <template>、<script> 或 <style> 上使用各種預處理器
加上處理器後,控制台報錯
<style>
.red
color: red
</style>
這個問題解決方法非常簡單,隻需要安裝這些依賴就好:
npm install --save-dev node-sass sass-loader
但是解決過程并不是很順利的,在閱讀中(zhōng)文文檔時,忽略版本号,按照上面的提示進行操作,發現不能成功,最後發現了該解決方案。
中(zhōng)文文檔的版本号過低,如需查看文檔,一(yī)定要看最新版本的英文文檔!
3,如何使用 px2rem?
背景:在 css 中(zhōng),寫入 px,通過 px2rem loader 将 px 轉換成 rem
在以前的項目中(zhōng),是通過 px2rem loader 實現的,但是在 Nuxt.js 項目下(xià),添加 css loader 還是很費(fèi)力的,因爲涉及到 vue-loader。
想到了一(yī)個其他方案:
可以使用 postcss 處理。可以在 nuxt.config.js 文件中(zhōng)添加配置,也可以在postcss.conf.js 文件中(zhōng)添加。
build: {
postcss: [
require('postcss-px2rem')({
remUnit: 75 // 轉換基本單位
})
]
},
4,如何拓展 webpack 配置?
背景:給 utils 目錄添加 alias
剛剛說到,Nuxt.js 内置了 webpack 配置
如果要拓展配置,在 nuxt.config.js 文件中(zhōng)添加。
同時也可以在該文件中(zhōng),将配置信息打印出來。
extend (config, ctx) {
console.log('webpack config:', config)
if (ctx.isClient) {
// 添加 alias 配置
Object.assign(config.resolve.alias, {
'utils': path.resolve(__dirname, 'utils')
})
}
}
5,如何添加 vue plugin?
背景:封裝了一(yī)個 toast vue plugin
由于 vue 實例化的過程沒有暴露出來,在哪個時機注入進去(qù)呢?
可以在 nuxt.config.js 中(zhōng)添加 plugins 配置,這樣插件就會在 Nuxt.js 應用初始化之前被加載導入。
module.exports = {
plugins: ['~plugins/toast']
}
~plugins/toast.js 文件:
import Vue from 'vue'
import toast from '../utils/toast'
import '../assets/css/toast.css'
Vue.use(toast)
6,如何修改環境變量 NODE_ENV?
背景:在項目中(zhōng),設置 3 個 NODE_ENV 的值,來對應不同的版本。
development,本地開(kāi)發;release,預發布版本;production,線上版本。
其中(zhōng),預發布版本比 production 版本,多出 vconsole。
// package.json
"scripts": {
"buildDev": "cross-env NODE_ENV=release nuxt build && backpack build",
"startDev": "cross-env NODE_ENV=release PORT=3000 node build/main.js"
},
打印 process.env.NODE_ENV 依舊(jiù)是:production。
在 backpack 的源碼中(zhōng),找到了答案:
在執行 backpack build 命令時,會把 process.env.NODE_ENV 修改爲 production,并且是寫死的不可配置的...... (重寫 backpack,恩~)
注意:lerna 來管理還是一(yī)個值得關注的工(gōng)具
無奈下(xià),隻能在 process.env 下(xià),添加 __ENV 屬性,代表 NODE_ENV
640?wx_fmt=png
這時,在頁面中(zhōng)打印出來的信息 process.env.__ENV undefined,但是可以打印出 process.env.NODE_ENV。
可以通過配置 nuxt.config.js 中(zhōng)的,env 屬性,解決該問題:
env: {
__ENV: process.env.__ENV
責任編輯:中(zhōng)山網站建設
【網訊網絡】國家高新技術企業》十年專注軟件開(kāi)發,網站建設,網頁設計,APP開(kāi)發,小(xiǎo)程序,微信公衆号開(kāi)發,定制各類企業管理軟件(OA、CRM、ERP、訂單管理系統、進銷存管理軟件等)!服務熱線:0760-88610046、13924923903,http://www.wansion.net
上一(yī)篇:詳解Android UI設計問題解決辦法
下(xià)一(yī)篇:網頁設計的思路與方法
*請認真填寫需求,我(wǒ)們會在24小(xiǎo)時内與您取得聯系。