CSS基础知识点总结

content 用法

• 填入string类型 - 清除浮动

  .clearfix:after{
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden
    }
  

• 填入url() - 插入图片

  <div class="logo">Google</div>
  
  .logo:before{
        content:url(https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png);
    }
  

• 填入attr - 文字投影和半边效果

  <p><span data-text='半'>半</span><span data-text='边'>边</span>
  <span data-text='效'>效</span><span data-text='果'>果</span></p>
  
  span{ 
        font-size: 100px;
        font-weight: bold;
        position: relative;
        color: #000;
    }
  span:before{
        content: attr(data-text);
        color: green
        position: absolute;
        left: 12px;
        top: -6px;
        width: 50%;
        overflow: hidden;
    }
  

• counter[s] - 计数器

  <strong>请选择你所使用的技术：</strong>
  <ol>
        <li><input type="checkbox" id="item1"><label for="item1">PHP</label></li>
        <li><input type="checkbox" id="item2"><label for="item2">Javascript</label></li>
        <li><input type="checkbox" id="item3"><label for="item3">Java</label></li>
        <li><input type="checkbox" id="item4"><label for="item4">HTML</label></li>
        <li><input type="checkbox" id="item5"><label for="item5">CSS</label></li>
        <li><input type="checkbox" id="item6"><label for="item6">nodejs</label></li>
        <li><input type="checkbox" id="item7"><label for="item7">go</label></li>
  </ol>
    总共选择了 <strong class="total"></strong> 项！
  
  ol{
    counter-reset: n;
     }
  
  input:checked {
        counter-increment: n;
  }
  
  .total:after {
        content: counter(n);
    }
  

img用法

• 去除img无src情况下边框线

  img：not([src]){
      opacity:0
  }
  

• 图片填充风格

  object-fit：
            fill:      默认值。内容拉伸填满整个content box, 不保证保持原有的比例。
            contain:   保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致，
                       长的那条等比缩放，可能会有留白。
            cover:     保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致，
                       短的那条等比缩放。可能会有部分区域不可见。
            none:      保持原有尺寸比例。同时保持替换内容原始尺寸大小。
            scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸，
                        保持图片的原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法跟contain一样
  

隐藏滚动条

• 使用在需要隐藏滚动条的DOM节点上

    dom::-webkit-scrollbar { width: 0 !important ;display: none}