html6sh@vip.163.com
QQ:3272893092
分享數：7
1.inline-block總會有間隙
在網站建設前端布局的時候經常會有對齊的需要，inline可以用來對齊行級元素，而如果要對齊塊級元素就要用到inline-block了，但是用了inline-block會發現的確對齊了，但是塊與塊之間總會有間隙，這是因為內聯及內聯塊元素之間在HTML中寫的換行或者空格會被解析
，那么怎么解決這個問題呢？
一種方法是不寫換行或空格,就是把標簽全放在一起，不過這樣擠在一塊不利于讀代碼。
還有就是在父元素里把font-size設置為0px，這樣就算有空格也會被解析為0的大小，也就消除了空格了。
2.float導致塊坍塌
前端布局對齊也可以使用float，但是這樣做會導致被作用塊不占高度(相當于不存在，脫離了文檔流，但是會顯示)，前面的塊不
占高度后面跟著的不需要對齊的塊就可能會和前面的塊擠在一起（各種異常），float很好用，但是怎么才能避免塊坍塌呢？
在結束float的塊后面加一個寬高都為0的塊，并設置樣式為clear:both;就像在浮動不占空間的塊下面加了一個隔板(我也不知道怎么解釋，但是很管用)
在使用float的塊的父級塊中設置樣式overflow:hidden；這個樣式的意思是超出父級元素大小的部分不顯示，能夠解決坍塌可能是因為float塊寬度原因。
使用after偽對象，這個沒用過，但是感覺原理就和第一個一樣。
3.position:absolute位置到底相對于誰？
前端布局有的時候需要精確控制元素位置，比如讓元素居中，常用的對于塊級元素居中方法是
margin:0
auto;
position:absolute; left:50%; margin-left:-'元素寬度';(一開始不知道margin還可以為負，這樣用感覺很妙)
但是用絕對定位的時候總是會有
莫名奇妙的問題，有的時候位置是相對于body，有的時候只是相對于父級，到底相對于誰呢？
總結下，absolute的定位應該是相對于同樣使用了
absolute的父元素，如果沒有這樣的父元素那就是相對于整個body，所以如果要用absolute又要相對于父元素調整位置，那么只需要給父元素也
加上一個absolute就可以了，（而且如果只設置樣式position:absolute;不設置top和left等定位屬性，那么元素的位置仍然是原來的位置，如果設
置了left而不設置top，那么元素的left應該遵循上面的規則，而top位置還是在原地，總而言之就是，絕對定位的元素不設置水平邊距或者垂直邊
距的時候，位置仍然是原來的水平位置或者垂直位置。）
4.webpack打包圖片資源路徑問題
使用webpack打包的時候，對于圖片資源需要用url-loader處理，否則打包過后的路徑仍然是相對于原來文件的
而對于js中url應該用require引用，否則不會被webpack打包，我就是在這被坑的，打包幾遍都沒用
web開發前段的構建問題；
1，如何在 head 里面引入 js 文件?
背景: 在 <head> 標簽中，以 inline 的形式引入 flexible.js 文件
移動端項目可以引入 flexible.js 來實現移動端適配
Nuxt.js 通過 vue-meta 實現頭部標簽管理
通過查看文檔發現，可以按照如下方式配置：
// nuxt.config.js
head: {
script: [
{
innerHTML: 'console.log("hello")',
type: 'text/javascript',
charset: 'utf-8'
}
]
}
結果，生成 html 如下:
<script
data-n-head="true"
type="text/javascript"
charset="utf-8">
console.log("hello")
</script>
發現 vue-meta 把引號做了轉義處理，加入 __dangerouslyDisableSanitizers: ['script'] 后，就不會再對這些字符做轉義了。
注釋：該字段使用需慎重！
接下來，要把 console.log("hello") 的內容替換成 flexible.js，配置升級之后如下：
head: {
script: [
{
innerHTML: require('./assets/js/flexible'),
type: 'text/javascript',
charset: 'utf-8'
}
],
__dangerouslyDisableSanitizers: ['script']
}
踩坑成功，下一個坑...
如沒特殊注明，文章均為江浙滬網絡推廣,轉載請注明來自http://www.0898bike.com/html/news/
返回列表
- 下一篇： 企業營銷型網站建設解決方法
- 上一篇： 公司網站主頁設計的思路和方法
志強網絡擁有資深設計師團隊和自主系統開發技術團隊，為客戶專業定制企業品牌網站、響應式網站、商城系統、手機微信網站、外貿網站、營銷型網站、旅游網站、微信小程序、APP等。歡迎廣大客戶咨詢！
