你应该知道的3个CSS技巧

2020-04-30 15:10:47易采站长站整理

    }   
    
    h4:before {   
    countercounter-increment: heading;   
    content: "Heading #" counter(heading) ".";   
    }     

  如果你想知道更多关于这个counter归零和自增方法的知识

  使用calc()做算术

  最后,但不是最不重要的,让我们来说说calc()功能。这个函数能让你执行简单的算术计算,例如计算元素的长宽,免去了你写不易维护的Javascript代码。这个函数支持所有简单的基本算术运算,包括加减乘除。

  比方说,你想创建一个元素,使它的宽度占满它的父元素,但还要留出一部分像素宽做其它用处:

CSS Code复制内容到剪贴板

.parent {   
    width: 100%;   
    border: solid black 1px;   
    position: relative;   
    }   
    
    .child {   
    position: absolute;   
    left: 100px;   
    width: calc(90% – 100px);   
    background-color: #ff8;   
    text-align: center;   
    }