CSS基础知识点总结

content 用法

• 填入string类型 - 清除浮动

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

• 填入url() - 插入图片

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

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

  半边
  效果
  
  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] - 计数器

  请选择你所使用的技术：
  
        
  PHP
        
  Javascript
        
  Java
        
  HTML
        
  CSS
        
  nodejs
        
  go
  
    总共选择了  项！
  
  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}