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

最新推荐文章于 2022-12-12 15:58:54 发布

输出是最好的学习

最新推荐文章于 2022-12-12 15:58:54 发布

阅读量720

点赞数 1

分类专栏：前端文章标签： column backface attachment collapse box-sizing

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/m0_37568521/article/details/78365814

版权

前端专栏收录该内容

72 篇文章 1 订阅

订阅专栏

前言：今天看到一个大佬的博客，发现使用了一个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;
}

效果图如下：

padding-box

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

效果图如下：

content-box

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

效果图如下

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

我们在使用表格的时候，默认值为separate

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

效果图如下：

当我们将border-collapse的值设置为collapse的时候

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

效果图如下所示

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

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

table {
    caption-side: bottom;
}

运行效果为

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

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

效果图如下：

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;
}

输出是最好的学习

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
那些不常见却适用的CSS属性（一）

前言：今天看到一个大佬的博客，发现使用了一个counter-reset属性，这是什么？怎么从来都没见过。于是赶快去W3C，发现自己好多属性都很不熟悉。今天在这里总结一下1、backface-visibility。元素不面向屏幕的时候是否可见（进行rotateY(180deg)以后），可以选择的值有两个hidden和visible，默认值为visible。使用该属性实现翻转效果（复制代码直接可以运
复制链接

扫一扫

专栏目录