公司网站建设web开发要注意的问题
2022-05-02 分类： 网站建设
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 文件?
背景: 在 标签中，以 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 如下:
type="text/javascript"
charset="utf-8">
console.log("hello")
发现 vue-meta 把引号做了转义处理，加入 __dangerouslyDisableSanitizers: ['script'] 后，就不会再对这些字符做转义了。
注释：该字段使用需慎重！
接下来，要把 console.log("hello") 的内容替换成 flexible.js，配置升级之后如下：
head: {
script: [
{
innerHTML: require('./assets/js/flexible'),
type: 'text/javascript',
charset: 'utf-8'
}
],
__dangerouslyDisableSanitizers: ['script']
}
踩坑成功，下一个坑...
2，如何预处理器?
背景：在组件中的 、
在网站建设前端布局的时候经常会有对齐的需要，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 文件?
背景: 在 标签中，以 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 如下:
type="text/javascript"
charset="utf-8">
console.log("hello")
发现 vue-meta 把引号做了转义处理，加入 __dangerouslyDisableSanitizers: ['script'] 后，就不会再对这些字符做转义了。
注释：该字段使用需慎重！
接下来，要把 console.log("hello") 的内容替换成 flexible.js，配置升级之后如下：
head: {
script: [
{
innerHTML: require('./assets/js/flexible'),
type: 'text/javascript',
charset: 'utf-8'
}
],
__dangerouslyDisableSanitizers: ['script']
}
踩坑成功，下一个坑...
2，如何预处理器?
背景：在组件中的 、