目的

本博文旨在总结CSS的属性，对CSS属性进行分类的讲解，以便更好的记忆CSS，可以在学习工作中快速地运用。
本博文并未全部列举所有属性，旨在作为一个指导，并不会特别详细的讲解每个属性的用法，一些未被浏览器采用的属性也不会介绍。

综合参考

1.MDN–CSS参考手册
2. W3Cschool–CSS参考手册

属性一览

backface - visibility

backface 属性使用在图片进行 3D 转换（翻转）的时候，隐藏正面，显示背面的效果。
具体看下图。

这里写图片描述

代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container {
    width: 100px;
    height: 100px;
    perspective: 800px;
}

.wrap {
    width: 100px;
    height: 100px;
    position: relative;
    transition: all .4s linear;
    transform-style: preserve-3d;
}

.face {
    position: absolute;
    width: 100px;
    height: 100px;

    backface-visibility: hidden;
}
.front{
    background-color: red;
    z-index: 2;
}

.back {
    background-color: yellow;
    transform: rotateY(180deg);
}

.wrap:hover {
    transform: rotateY(180deg);
}                              



</style>
</head>
<body>
<div class="container">
    <div class="wrap">
        <div class="face front">red</div>
        <div class="face back">yellow</div>
    </div>
</div>
</body>
</html>

clip

clip 属性用于裁剪图片。目前只能进行正方形的裁剪。特别注意的是，需要用绝对定
位来设置被裁剪的图片才有效果。

示例及代码

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
        div{
            height: 300px;
            width: 300px;
            margin: 10px;
        }

        img{
            width: 100%;
            height: 100%;
        }             

        .change{
            position:absolute;
            clip:rect(10px,100px,200px,10px);
        }


</style>
</head>
<body>
    <div>
        <img src="http://c.hiphotos.baidu.com/image/pic/item/91529822720e0cf3457ad8150146f21fbf09aa4b.jpg">
    </div>
    <div>
        <img src="http://c.hiphotos.baidu.com/image/pic/item/91529822720e0cf3457ad8150146f21fbf09aa4b.jpg"  class="change">
    </div>
</body>
</html>

content

content 属性搭配 before 和 after 使用。用于向元素添加一些内容。

示例及代码

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
    div{
        border: 1px solid black;
        margin: 10px;
    }
    .p1::before{
        content: " 我在前面 ";
    }

    .p1::after{
        content: " 我在后面 ";
    }

    .p2::before{
        content: counter(haha)'.';
    }

    .p2{
        counter-increment:haha ;
    }

    .a::after{
        content: attr(href);
    }

    .p3::before{
        content: open-quote;
    }

    .p3::after{
        content: close-quote;
    }

    .p4::after{
        content: url("https://www.w3cschool.cn/cssref/pr-gen-content.html");
    }
</style>
</head>
<body>
    <div>
        <p class="p1">这是纯文本</p>
    </div>
    <div>
        <p class="p2">这是计数器</p>
        <p class="p2">这是计数器</p>
        <p class="p2">这是计数器</p>
        <p class="p2">这是计数器</p>
    </div>
    <div><a class="a" href="#">可以直接利用 content 的 attr 属性获取元素属性值</a></div>
    <div>
        <p class="p3">设置引号</p>
    </div>
    <div>
        <p class="p4">插入某个媒体</p>
    </div>
</body>
</html>

@media

@media 属性用于设置响应式设计，对于不同的分辨率，执行不同的策略。不过现在可
以用类似 Bootstrap 之类的库，或者 flex 布局来代替。

下面这段代码就是当分辨率小于 700 px ，背景色变为蓝色。


    @media screen and (max-width: 700px) {
    body {
       background-color:lightblue;
    }

CSS属性分类扫描-关于其他属性（完结篇）

目的

综合参考

属性一览

backface - visibility

clip

content

@media

猜你喜欢