快速回顾-CSS

最新推荐文章于 2024-09-01 21:50:19 发布

code_stream

最新推荐文章于 2024-09-01 21:50:19 发布

阅读量371

点赞数 7

分类专栏： # CSS 文章标签： css

本文链接：https://blog.csdn.net/code_stream/article/details/141784579

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>