css常见的样式异常

作者: 一个写前端的姑娘 | 来源:发表于2018-12-11 14:19 被阅读31次

    昨天周一工作上忙的透支了,昨晚回到家,收拾完了之后十一点多了,突然发现自己今天没有更新简书...再去整理资料已经来不及写新文章了,就算写了新文章发布了,内容质量也是不堪的,不如不写了!实不相瞒,我挑战了简书的日更计划,由于昨天没有发布新文章,所以前功尽弃...伤心之余,还是要捡起这个flag。
    那今天就来聊聊前端css样式的一些怪异现象吧!

    1. display: inline-bloack的元素,如何解决间隙?

    • 代码
    // html
    <div class="page">
      <div class="inline_block ib1"></div>
      <div class="inline_block ib2"></div>
    </div>
    // css
    .inline_block {
      display: inline-block;
      width: 40%;
      height: 50px;
    }
    .ib1 {
      background: blue;
    }
    .ib2 {
      background: red;
    }
    
    • 现象 如下图;两个div之间有间隙

      间隙
    • 解决
      方法一:因为标签之间的空格,因此去掉空格就可以解决了;但是这个方法很笨
      方法二:font-size:0这个方式可以解决空隙的问题

    .page {
      font-size: 0;  // 父级元素设为font-size:0
    }
    .inline_block {
      display: inline-block;
      width: 40%;
      height: 50px;
      font-size: 0; // 还有这里
    }
    

    2. 设置opacity之后,子元素也会出现透明度

    • 代码
    // html
    <div class="page">
      <div class="opacity">
        <span>opacity</span>
      </div>
    </div>
    // css
    .page {
      opacity: 0.5;
    }
    .opacity {
      width: 40%;
      height: 50px;
      font-size: 15px;
      background: #000;
    }
    span {
      font-size: 20px;
      line-height: 50px;
      color: red;
    }
    
    • 现象 如下图
      透明度
    • 解决
      不要使用opacity,使用background: rgba()方法来设置
    // css 更改
    .page {
      background: rgba(255, 255, 255, 0.5);
    }
    

    3. <img>和<span>元素,垂直方向上,不对齐

    • 代码
    <div class="page">
      <img src="../../assets/images/ceb_3x.png" alt>
      <span>text</span>
    </div>
    
    • 现象 如下图
      垂直未居中
    • 解决 将img元素的vertical-align设置为middle
    img {
      vertical-align: middle;
    }
    

    4. 弹窗出现,弹窗后面的元素还可以滚动

    • 解决
      设置body的overflow:hidden,关闭弹窗的时候,再恢复overflow的属性

    5. 最外层div想要占满一屏

    设置div的css样式为

    display: absolute;
    min-height: 100%;
    

    6. input 设置disabled属性之后 placeholder变成黑色

    某些移动端会出现这样的奇怪样式,但是普遍情况下还是不会有这种怪异现象的

    input::-webkit-input-placeholder{
      color: #cccccc;
      -webkit-text-fill-color: #ccc;
      opacity: 1;
      -webkit-opacity:1;
    }
    input:disabled{
      background: none;
      color: #333;
      -webkit-text-fill-color: #333;
      opacity: 1;
      -webkit-opacity:1;
    }
    input:disabled::-webkit-input-placeholder{
      color: #cccccc;
      -webkit-text-fill-color: #ccc;
      opacity: 1;
      -webkit-opacity:1;
    }
    

    7. input上边框有阴影

    有些移动端会出现这样的问题,但是普遍情况下不会出现这样的问题

    input:focus{outline:none}
    -webkit-appearance: none;
    

    8. pre标签中支持换行

    pre标签中的内容是不支持换行,所以换行的话,需要自己设置换行属性

    pre {
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
    }
    

    相关文章

      网友评论

        本文标题:css常见的样式异常

        本文链接:https://www.haomeiwen.com/subject/klrdhqtx.html