那些不常见却适用的CSS属性（一）

左手的ㄟ右手 2022-06-06 02:26 164阅读 0赞

#### 前言：今天看到一个大佬的博客，发现使用了一个counter-reset属性，这是什么？怎么从来都没见过。于是赶快去W3C，发现自己好多属性都很不熟悉。今天在这里总结一下 ####

1、backface-visibility。元素不面向屏幕的时候是否可见（进行rotateY(180deg)以后），可以选择的值有两个hidden和visible，默认值为visible。  
使用该属性实现翻转效果（复制代码直接可以运行）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>welcome</title>
        <style> .container { position: relative; width: 200px; height: 200px; margin:100px auto; } .container div { position: absolute; width: 100%; height: 100%; left: 0; top: 0; color: white; } .font { background-color :#cdcdcd; transform: rotateY(0deg); backface-visibility: hidden; transition: all 2s; } .back { background-color: #111111; transform: rotateY(-180deg); transition: all 2s; } .container:hover .font { transform: rotateY(180deg); backface-visibility: hidden; } .container:hover .back { transform: rotateY(0deg); backface-visibility: hidden; } </style>
    </head>
    <body>
        <div class="container">
            <div class="back">
                背面
            </div>
            <div class="font">
                前面
            </div>
        </div>
    </body>
    </html>

2、background-attachment，背景是否跟随其他页面一起滚动，可以取值为scroll，fixed，默认值为scroll。注意这个属性只有在body中有用，在div中没有效果。

/*有用*/
    body { background-attachment: fixed; }
    /*无用,使用都是fixed*/
    div { background-attachment: fixed; }

3、background-clip，指定背景绘制的范围，可以取值有3个：padding-box，border-box，content-box。默认值为border-box。下面通过图片说明具体的值  
  
  
border-box

div { width: 800px; height: 200px; padding: 30px; border:10px dotted gray; margin:50px auto; background: #cdcdcd; background-clip: border-box; }

效果图如下：  
![SouthEast][]  
  
  
padding-box

div { width: 800px; height: 200px; padding: 30px; border:10px dotted gray; margin:50px auto; background: #cdcdcd; background-clip: padding-box; }

效果图如下：  
![SouthEast 1][]  
  
  
content-box

div { width: 800px; height: 200px; padding: 30px; border:10px dotted gray; margin:50px auto; background: #cdcdcd; background-clip: content-box; }

效果图如下  
![SouthEast 2][]

4、border-collapse，表格的边框是否合并为一个边框，可以取值为collapse，separate，inherit。默认值为separate（表格边框不合并为一个边框）  
  
  
我们在使用表格的时候，默认值为separate

table,tr,td { border: 1px solid gray; padding: 6px 10px; }

效果图如下：  
![SouthEast 3][]  
  
  
当我们将border-collapse的值设置为collapse的时候

table,tr,td { border: 1px solid gray; padding: 6px 10px; border-collapse: collapse; }

效果图如下所示  
![SouthEast 4][]

5、box-sizing，可以取值为content-box，border-box，inherit 。默认值为content-box。这里放一张自己画的图  
![SouthEast 5][]

6、caption-side设置表格标题的位置，可以取值为top，bottom，inherit。默认值为top  
当设置cation-side:bottom的时候

table { caption-side: bottom; }

运行效果为  
![SouthEast 6][]

7、column-count，通过该属性，我们将内容分为几部分。  
代码如下：

.content { width: 800px; column-count: 4; }

效果图如下：  
![SouthEast 7][]

8、column-gap设置每个栏目之间的间隔距离  
9、column-rule设置栏目之间的样式，第一个值为样式的宽度，第二个值为样式的规则，第三个值是样式的颜色。其中样式的规则可以设定为hidden，dotted，dashed，solid，double

.content { column-count: 3; column-gap: 20px; column-rule:4px double #cdcdcd; }

10、column-span 指定某中元素可以跨多少列，可以取值为1和all。默认值为1

.content h2{ column-span: all; }

11、column-width指定每一个栏目的宽度，如果设置了该属性，那么column-count就无效了

.content { width: 800px; margin: 100px auto; column-width: 200px; column-gap: 50px; column-rule: 4px ridge red; }

12、columns可以同时设置column-width和column-count。如果设置了容器的宽度，那么该属性就无效

.content { margin: 100px auto; columns: 200px 4; column-gap: 50px; column-rule: 4px ridge red; }

[SouthEast]: /images/20220606/61a6ba80be5f44afbbc37e7a6aa8cdb7.png
[SouthEast 1]: /images/20220606/d103b914224b412698b8fca2a0796fc2.png
[SouthEast 2]: /images/20220606/b18da41f41dc4379a66f416b1f4c8687.png
[SouthEast 3]: /images/20220606/3070130279144a40acd2483931cdb301.png
[SouthEast 4]: /images/20220606/d0d6b4562cb641479aa26e5dd863564b.png
[SouthEast 5]: /images/20220606/e23548ca62c0420caa4cd0996d27adda.png
[SouthEast 6]: /images/20220606/05248e8dc1b443408b7c0a7ee721c984.png
[SouthEast 7]: /images/20220606/1cadc3d319f84b91b06baf414f1d9fd0.png