快速回顾-CSS3

回顾 1

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS66</title>
    <style>
        /* 选择器 */
        /* h4 {
            color: red;
        }

        .classSelector {
            color: blue;
        }

        #idSelector {
            color: green;
        } */

        /* 类选择器分配样式 */
        /* .purple {
            color: purple;
        }

        .pink {
            color: pink;
        }

        .red {
            color: red;
        } */

        /* 布局 */
        .inline {
            display: inline;
        }

        .block {
            display: block;
            background-color: pink;
            width: 400px;
            height: 100px;
        }

        .inline-block {
            display: inline-block;
            width: 260px;
        }

        .none {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 选择器 -->
    <!-- <h4>元素选择器</h4>
    <p class="classSelector">类选择器</p>
    <p id="idSelector">id选择器</p> -->

    <!-- 类选择器分配样式 -->
    <!-- <p class="purple">我希望这段文字是紫色的</p>
    <p class="pink">我希望这段文字是粉红的</p>
    <p class="red">我希望这段文字是红色的</p> -->

    <!-- 布局 -->
    <div>我独占一行</div>
    <div>我独占一行</div>
    <div class="inline">我被取消了独占一行</div>
    <div class="inline">我被取消了独占一行</div>
    <div class="inline">我被取消了独占一行</div>
    <div class="inline">我被取消了独占一行</div>
    <div class="inline">我被取消了独占一行</div>
    <div class="inline">我被取消了独占一行</div>
    <div class="inline">我被取消了独占一行</div>
    <div class="inline">我被取消了独占一行</div>

    <hr>

    <span>我不独占一行</span>
    <span>我不独占一行</span>
    <span class="block">我被执行了独占一行</span>
    <span class="block">我被执行了独占一行</span>
    <span class="block">我被执行了独占一行</span>
    <span class="block">我被执行了独占一行</span>

    <hr>
    <div class="inline-block">我不独占一行，且可以调节宽高</div>
    <div class="inline-block">我不独占一行，且可以调节宽高</div>

    <hr>
    <div class="none">你看不到我</div>

    <hr>
    <div class="flex">
        <div class="item">项目</div>
        <div class="item">项目</div>
        <div class="item">项目</div>
    </div>

</body>

</html>

回顾 2

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            /* 盒子尺寸计算：以边框为盒子尺寸计算依据（针对于 width、height 有效） */
            box-sizing: border-box;
        }

        a,
        li {
            /* 文本修饰：无 */
            text-decoration: none;
        }

        .box-1 {
            /* 1. 盒子可视化 */
            border: 6px solid gold;

            /* 2. 修改盒子内外样式 */

            /* 2.1 修改外部 */
            margin-top: 20px;

            /* 2.2 修改本体 */

            /* 盒子尺寸 */
            width: 300px;
            height: 90px;

            /* 盒子边框 */
            border-radius: 34px;
            box-shadow: -6px 6px 2px #666;

            /* 盒子背景 */
            background-image: url(https://img.zcool.cn/community/01c94c563736d66ac7259e0fd89fcb.jpg@2o.jpg);
            background-size: 180px 60px;
            background-repeat: no-repeat;
            background-origin: content-box;
        }

        .box-2 {
            /* 1. 盒子可视化 */
            border: 6px solid gold;

            /* 2. 修改盒子样式 */

            /* 2.1 修改外部 */
            margin-top: 20px;

            /* 2.2 修改本体 */
            width: 400px;
            height: 100px;

            /* 颜色渐变 */
            /* 第一种渐变方式：linear gradient 线性的渐变 */
            background: linear-gradient(120deg, red, blue, 50%, pink, rgba(0, 0, 0, 0.5), green);
        }

        .box-3 {
            /* 盒子可视化 */
            border: 6px solid gold;
            margin-top: 20px;
            width: 300px;
            height: 100px;

            /* 颜色渐变 */
            /* 第二种渐变方式：linear gradient 径向的渐变 */
            background: radial-gradient(ellipse, red 5%, green 15%, blue 60%);

            /* 重复的渐变 */
            /* background: repeating-radial-gradient(red, yellow 10%, green 15%) */
        }

        .box-4 {
            border: 6px solid gold;
            margin-top: 20px;
            width: 400px;
            height: 68px;

            /* 内容溢出盒子：隐藏 */
            overflow: hidden;

            /* 文本效果 */
            p:nth-child(1) {
                text-shadow: -5px 3px 4px #666;
                text-align: center;
            }
        }

        .box-5 {
            border: 6px solid gold;
            margin-top: 20px;
            width: 200px;
            height: 120px;
            background-color: red;

            /* 使变形：平移(x, y) */
            transform: translate(68px, 0);

            /* 使变形：旋转(90度) */
            transform: rotate(90deg);

            /* 使变形：伸缩(1倍, 1倍) */
            transform: scale(1, 1);

            /* 使变形：倾斜(30度，-20度)*/
            transform: skew(30deg, -20deg);
        }

        .box-6 {
            border: 6px solid gold;
            margin-top: 40px;
            width: 200px;
            height: 120px;

            /* 使变化：平移 */
            transform: translate3d(30px, 30px, 30px);

            /* 使变化：旋转 */
            transform: rotate3d(1, 0.5, 0, -780deg);

            /* 使变化：伸缩 */
            transform: scale3d(2, 1, 1);
        }

        .box-7 {
            border: 6px solid gold;
            margin-top: 20px;
            width: 200px;
            height: 120px;

            /* 过渡效果：监控某某属性 过渡时长 */
            transition: transform 2s, background-color 3s;
        }

        .box-7:hover {
            transform: scale(0.5, 0.5);
            background-color: pink;
        }

        /* 定义"关键帧" */
        @keyframes changeBoxSize {
            0% {
                width: 120px;
                height: 60px;
            }

            100% {
                width: 200px;
                height: 100px;
            }
        }

        .box-8 {
            border: 6px solid gold;
            margin-top: 20px;
            width: 120px;
            height: 60px;

            /* 使用"关键帧"生成动画 */
            /* 动画：某某关键帧 播放周期秒数 线性播放速度 延迟2s 播放次数为无限 下一周期逆向地播放 */
            animation: changeBoxSize 5s linear 2s infinite alternate;
        }

        .box-9 {
            border: 6px solid gold;
            margin-top: 20px;
            width: 500px;
            height: 180px;

            /* 文本多列 */
            column-count: 2;
            column-gap: 100px;
            column-rule: 3px outset black;

        }

        .box-10 {
            border: 6px solid gold;
            margin-top: 20px;
            width: 200px;
            height: 120px;

            /* 调整尺寸：两边都可调整（需要配合 overflow 使用） */
            resize: both;

            /* 元素溢出时：自动 */
            overflow: visible;
            overflow: hidden;
            overflow: clip;
            overflow: scroll;
            overflow: auto;

            /* 外形修饰 */
            outline: 2px solid red;
            outline-offset: 6px;
        }

        .box-11 {
            border: 6px solid gold;
            margin-top: 40px;
            width: 300px;
            height: 180px;

            /* 缩略图 */
            img {
                width: 200px;
                height: 120px;
                border: 5px solid red;
                border-radius: 10px;
                padding: 18px;

                /* 图片滤镜：图片颜色设置为100%灰度 */
                filter: grayscale(100%);
            }
        }

        .box-12 {
            border: 6px solid gold;
            margin-top: 20px;
            width: 100%;
            height: 330px;

            /* =================== flex布局详解 ================ */

            /* 显示：启用flex布局 */
            display: flex;

            /* flex的方向：横着-反方向 */
            flex-direction: row-reverse;

            /* item 换行，溢出的 item 会被换行 */
            flex-wrap: wrap;

            /* flex-flow 只是一个简写，因此它自身的属性值就是 flex-direction 与 flex-wrap 的属性值 */
            /* flex-flow: row-reverse; */

            /* 沿着主轴（主轴默认是横轴）进行每一个 item 位置的调整 */
            justify-content: space-around;

            /* 沿着侧轴（侧轴默认是纵轴）进行每一个 item 位置的调整 */
            align-content: space-around;

            /* align-items 其实就是在父容器上统一设置所有直接子元素的 align-self 值，它本身并不具有任何的附加效果，所以我们直接看 align-self 即可 */
            /* align-items: flex-end; */

            /* gap 的作用是元素与元素之间的间距，而不是元素与容器之间的间距 */
            /* 间距：行 列 */
            gap: 60px 80px;

            .item {
                border: 1px solid red;
                width: 200px;
                height: 100px;
            }

            .item:nth-child(1) {
                background-color: pink;
                align-self: flex-end;
            }
        }

        .box-13 {
            border: 6px solid gold;
            margin-top: 20px;
            width: 100%;
            height: 330px;

            /* =================== flex布局详解 ================ */
            display: flex;
            flex-direction: row;

            .item {
                border: 1px solid red;
                width: 100px;
                height: 100px;
            }

            .item:nth-child(1) {
                background-color: pink;

                /* align-items 属性，这个属性的主要作用是控制所有的 flex 元素在“交叉轴”方向的对齐方式 */
                /* align-self 属性是控制单个的 flex 元素在“交叉轴”方向的对其方式 */
                align-self: flex-end;
            }

            .item:nth-child(2) {
                background-color: green;

                /* 所有的 flex 元素宽度总和小于 flex 容器的宽度之后，按照特定的比率去分配空间给具有 flex-grow 值的 flex 元素 */
                /*  flex 容器中被分配的比例值，属性值为纯数字，可以是带小数点的数字 */
                flex-grow: 2.5;
            }

            .item:nth-child(3) {
                background-color: blue;

                /* 续接上文 */
                flex-grow: 2;
            }

            .item:nth-child(4) {
                background-color: grey;

                /* 当 flex 元素之和大于 flex 容器的宽度时，具有 flex-shrink 属性的 flex 元素会根据特定的比率缩小其自身的宽度 */
                flex-shrink: 1;

                /* 在 flex 元素中使用频率较高的应该是 flex 这个属性了，该属性是一个简写属性，包含了 flex-grow、flex-shrink 以及 flex-basis 这三个属性。 */
                /* flex 占比空间：flex-grow: 6 && flex-shrink: 2 && flex-basis: 50%  简写成以下格式 */
                flex: 1 1 0%;

                /* order 属性规定了 flex 元素在 flex 容器中布局时的顺序。
                在未设置任何 order 属性值或者设置了相同的 order 属性值时，会以元素在 dom 节点中出现的顺序进行布局；
                而如果我们修改了 order 的属性值，就将会以递增的方式排序，数字越大，flex 元素就排得越后面。
                order 属性仅仅只是将 flex 元素在页面展示时的视觉效果做了位置的调整，并不会改变其自身在 dom 节点的位置以及顺序
                属性值可以为负值，只要是整数就可以了
                */
                order: 99;
            }
        }

        /* ==================== 多媒体查询 =================== */
        /* 
                多媒体查询用于检测：
                    viewport(视窗) 的宽度与高度
                    设备的宽度与高度
                    朝向 (智能手机横屏，竖屏) 。
                    分辨率

                媒体类型：
                ---------------------------------------
                | 值       |  描述
                ---------------------------------------
                | all      |  用于所有多媒体类型设备
                | print    |  用于打印机
                | screen   |  用于电脑屏幕，平板，智能手机等
                | speech   |  用于屏幕阅读器
                ---------------------------------------

                书写格式
                @media not/only 媒体类型 and (表达式) {
                
                }

            */

        @media screen and (min-width: 600px) {
            .box-14 {
                border: 6px solid gold;
                margin-top: 20px;
                width: 200px;
                height: 100px;
                background-color: red;
            }
        }
    </style>
</head>

<body>
    <a href="https://www.baidu.com">点击前往百度</a>
    <ol>
        <li>第一个li标签</li>
        <li>第二个li标签</li>
        <li>第三个li标签</li>
    </ol>

    <div class="box-1">This is box-1</div>
    <div class="box-2">This is box-2</div>
    <div class="box-3">This is box-3</div>
    <div class="box-4">
        This is box-4
        <p>Hello World</p>
        <p>This is a message for you.</p>
        <p>How are you?</p>
    </div>
    <div class="box-5">This is box-5</div>
    <div class="box-6">This is box-6</div>
    <div class="box-7">This is box-7</div>
    <div class="box-8">This is box-8</div>
    <div class="box-9">
        This is box-9
        生活如酒，或芳香，或浓烈，因为诚实，它变得醇厚；生活如歌，或高昂，或低沉，因为守信，它变得悦耳； 生活如画，或明丽，或素雅，因为诚信，它变得美丽。
        若能掬起一捧月光，我选择最柔和的；若能采来香山红叶，我选择最艳丽的；若能摘下满天星辰，我选择最明亮的。也许你会说，我的选择不是最好，但我的选择，我相信。
    </div>
    <div class="box-10">This is box-10 万里悲秋常作客，百年多病独登台！</div>
    <div class="box-11">
        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1305/16/c4/20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC+0xTFvOYy5ds=&risl=&pid=ImgRaw&r=0"
            alt="">
    </div>
    <div class="box-12">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
    <div class="box-13">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
</body>

</html>

回顾

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box-1 {
            border: 6px solid gold;
            margin: 100px 0 0 10px;
            width: 200px;
            height: 120px;

            /* 下面的代码，仅作为absolute定位的铺垫，不会对该元素本身产生任何影响 */
            position: relative;
        }

        .box-2 {
            border: 6px solid red;

            /* 定位 */
            position: absolute;
            left: 50%;
            top: 50%;

            /* 通过2D平移元素的属性，进行位置的微调 */
            transform: translate(-50%, -50%);

            /* 设置元素为"隐藏"状态 */
            visibility: hidden;
        }

        .show:hover+.box-2 {
            /* 当.show:hover满足条件时，将.box-2元素设置为"可见"状态 */
            visibility: visible;
        }
    </style>
</head>

<body>
    <div class="box-1">
        <div class="show">显示</div>
        <div class="box-2">123</div>
    </div>

</body>

</html>

<!-- 
可能不常用但非常强大的选择器：
    :nth-child(n)：选择父元素中的第 n 个子元素。例如，:nth-child(2) 选择第二个子元素。
    :nth-of-type(n)：选择同类型元素中的第 n 个元素。例如，:nth-of-type(2) 选择同类型元素中的第二个。
    :not(selector)：选择不符合指定选择器的元素。例如，:not(p) 选择所有非 <p> 元素。
    :first-of-type：选择同类型元素中的第一个。
    :last-of-type：选择同类型元素中的最后一个。
    :only-child：选择父元素中唯一的子元素。
    :only-of-type：选择同类型元素中唯一的一个。
    [attribute^=value]：选择具有指定属性且属性值以给定值开头的元素。例如，[src^="https"] 选择 src 属性值以 "https" 开头的元素。
    [attribute$=value]：选择具有指定属性且属性值以给定值结尾的元素。例如，[src$=".jpg"] 选择 src 属性值以 ".jpg" 结尾的元素。
    [attribute*=value]：选择具有指定属性且属性值包含给定值的元素。例如，[class*="active"] 选择 class 属性值中包含 "active" 的元素。
-->

内容推荐

CSS 视频教程：https://www.bilibili.com/video/BV17X4y1d7mT/
CSS 文档教程：
- CSS2：https://www.w3cschool.cn/css/
- CSS3: https://www.w3cschool.cn/css3/
响应式布局：https://www.bilibili.com/video/BV1ov411k7sm/
CSS 编写工具：https://css.bqrdh.com/