html+css知识总结(2)

1：焦点图案例

    
    
    


    

        
        <
        >
        

            

 
            
            

 
            
            

 
            
            

 
            
            

 
            
        
    

2：元素的显示

display:none //隐藏元素且不再占据空间
visibility //隐藏元素且继续占有原来的位置
overflow :hidden  //保证只显示盒子里面的内容
overflow :scoller/auto //未显示的内容出现滚动条，但是auto是超出才显示滚动条

3：经过tudo 显示mask图

.tudo:hover .mask{
  display:block}

4：溢出文字省略号

      1： 单行文字:     white-space: nowrap;  
       超出盒子的就隐藏     overflow: hidden;
       溢出的文字用省略号     text-overflow: ellipsis;

      2：多行文字：
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;  

5：加浮动可以让文字围绕浮动元素显示

6：css过渡让宽度慢慢增大

        div{
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: width 0.5s ease 1s,height 0.5s ease 1s;
        }
        div:hover{
            width: 400px;
            height: 200px;
            color:blue
        }

       

transition: all 0.5s;  //让所有属性都改变

7：进度条

8：