关于css

1. flex布局：又叫做弹性布局

    任何一个容器都可以指定flex布局，如display:flex 或 display:inline-flex

注意：设置了flex布局以后，子元素的float，clear，vertical-align属性将失效

容器的属性：

   flex-direction flex-wrap flex-flow justify-content align-items align-content

2. margin塌陷问题

    1）父子元素的margin塌陷

        解决方法：（1）给父级设置边框或内边距(不建议使用)

                          （2）触发bfc(块级格式上下文),改变父级的渲染规则

                                    方法:

                                    改变父级的渲染规则有以下四种方法,给父级盒子添加

                                    (1)position:absolute/fixed

                                    (2)display:inline-block;

                                    (3)float:left/right

                                    (4)overflow:hidden

                                    这四种方法都能触发bfc,但是使用的时候都会带来不同的麻烦,具体使用中还需根据具体情况选择没有影响的来解决margin塌陷

    2）margin合并

         原理:两个兄弟结构的元素在垂直方向上的margin是合并的

        margin合并问题也可以用bfc解决,

        1.给box2加上一层父级元素并加上overflow:hidden;

        2.给两个都加一层父级再加bfc

        但是这两种方法都改变了HTML结构,在开发中是不能采用的

所以在实际应用时,在margin合并这个问题上,我们一般不用bfc,而是通过只设置上面的元素的margin-bottom来解决距离的问题

3. 前端解决移动端适配的五种方法

    https://blog.csdn.net/weixin_37632943/article/details/95471535

    https://zhuanlan.zhihu.com/p/80692165

4. 移动端1px解决方案

    https://zhuanlan.zhihu.com/p/100752129

5. Vue单页面如何做seo页面优化

   1）服务端渲染

服务端渲染对于du刚接触 vue 的新手来说，并不是那么友好，虽然zhi已有官方 SSR 中文文档。dao但是对于一个已经开发完毕的 vue 项目去接 SSR 无论是从工作量还是技术角度来说，都是一种挑战。

   2）预渲染方式

在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将您的前端作为一个完全静态的站点。如果您使用 webpack，您可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试。

6. webpack打包html里面img后src为“[object Module]”问题

    官方的说明是，vue-loader在编译template模块时会将它遇到的所有资源url转换为webpack模块请求，而vue使用的是commonjs规范，file-loader使用的是es module规范，所以解决方法是file-loader处理文件时不使用esModule，也就是把esModule设置为false