不懂就问系列之CSS

1.关于写官网遇到的CSS问题（一般是兼容问题）

统一局域网下可手机调试，手机是好的，上线就不好，一般情况是打包css的问题，但这个审查元素的时候能看到DOM已存在就是不显示，TMD竟然是

opacity兼容性问题，要写全

 {   
　　  filter: alpha(opacity=60); /* IE */
        -moz-opacity: 0.6; /* 老版Mozilla */
        -khtml-opacity: 0.6; /* 老版Safari */
        opacity: 0.6; /* 支持opacity的浏览器*/
    }

　

2.均分一个页面

父元素display: flex;子元素：flex:1 简单搞定

3.计算高度或者宽度的时候calc

calc 函数  

height: calc(100vh - 50px);

请注意,减号前后必须有空格!!! 必须有空格

　

4.当手机端不生效的时候

如

.commonbase-circle-spea {

  200px; /*px*/

  height: 200px; /*px*/

  margin: 20px;

}

加的/*px*/本地神效，线上不生效，/*px*/失效情况处理，一般/*px*/变成大写/*PX*/ 或者不用less 嵌套单独拎出来一个类单独 或者去webpack配置

加了/*px*/一般针对的字体大小，加了之后不变

 

5.如何让文字竖着排列writing-mode不常用

writing-mode: tb-rl;

 

6.关于背景图的相关问题

<div class="newcenter"></div>
.bg{
　　200px;
   height:200px;

 　　background: url("@/static/images/lianxifangshi.png") no-repeat;

        background-size: 100% auto;

   }

background-size:100%宽度铺满  auto 高度自适应才不会压缩图片，一般写法就够用了

当需要hover时，显示动态图eg:

.business-content-commonbase-circle:hover {

        background: url("@/static/images/weave.gif") no-repeat;

        background-size: 200% 200%;

        background-position: 50% 50%;//background-position 属性设置背景图像的起始位置

}

　

7.overflow: auto一般有滚动条的写这个

如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。所以写auto好看一点