CSS3_css 父节点-CSDN博客

本文链接：https://blog.csdn.net/m0_73759720/article/details/142285241

一、CSS3选择器

1. 属性选择器

属性选择器是 CSS 中的一种选择器，用于选择具有特定属性或属性值的 HTML 元素。

2. 伪类选择器

伪类选择器是 CSS 中的一种强大工具，用于选择元素的特定状态或位置，而不需要增加额外的类或 ID。它们通常用于处理用户交互或文档结构的变化。

:hover（鼠标悬停）、:focus（获得焦点）、:active（被激活）、:nth-child(n)（选择第 n 个子元素）、:first-child（第一个子元素）、:last-child（最后一个子元素）、:not(selector)（不匹配指定选择器的元素）、:checked（被选中的复选框）和 :disabled（禁用的输入元素）

3. 兄弟选择器

在 HTML 中，兄弟标签（或兄弟元素）指的是同一个父元素下的不同元素。这些元素可以是同一类型或不同类型，并且它们共享相同的父元素。使用兄弟选择器，可以在 CSS 中选择这些元素并应用样式。

4. 相邻选择器

二、CSS3属性

1. 盒子模型

CSS3 的盒子模型是理解网页布局和设计的基础概念。它描述了每个元素在网页中占据的空间，包括其内容、内边距、边框和外边距。
内容：实际显示的内容，如文本和图像。可以通过 width 和 height 属性设置。
内边距：内容与边框之间的空间。使用 padding 属性设置，可以分别定义四个方向的内边距（padding-top、padding-right、padding-bottom、padding-left）。
边框：包围内边距和内容的边框。使用 border 属性设置边框的宽度、样式和颜色。
外边距：元素与其他元素之间的空间。使用 margin 属性设置，可以分别定义四个方向的外边距（margin-top、margin-right、margin-bottom、margin-left）。
总宽度 = width + padding + border + margin

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 盒子模型</title>
    <style>
        .box {
            width: 200px; /* 内容宽度 */
            padding: 20px; /* 内边距 */
            border: 5px solid black; /* 边框 */
            margin: 10px; /* 外边距 */
            box-sizing: border-box; /* 使用替代盒子模型 */
        }
    </style>
</head>
<body>
    <div class="box">这是一个盒子模型示例。</div>
</body>
</html>

2. 背景图

在 CSS 中，背景图片用于为元素添加视觉效果，可以增强网页的美观性和吸引力。以下是使用背景图片的基本方法和常用属性。

3. 边框背景图

在 CSS 中，可以为元素的边框添加背景图像，这样可以创建丰富的视觉效果。尽管没有直接的 CSS 属性专门用于边框背景图，但可以通过一些技巧来实现类似效果。

4. 文本和盒子阴影

在 CSS 中，阴影效果可以通过 box-shadow 和 text-shadow 属性来实现。这些属性可以为元素和文本添加深度感，从而增强视觉效果。
box-shadow: h-offset v-offset blur-radius spread-radius color inset;
h-offset: 水平偏移量，阴影相对于元素向右的距离（负值表示向左）。
v-offset: 垂直偏移量，阴影相对于元素向下的距离（负值表示向上）。
blur-radius: 模糊半径，值越大，阴影越模糊。
spread-radius: 扩展半径，值为正时阴影扩大，值为负时阴影缩小。
color: 阴影的颜色。
inset: 可选，定义阴影是外部阴影还是内部阴影。

text-shadow: h-offset v-offset blur-radius color;
h-offset: 水平偏移量，阴影相对于文本向右的距离（负值表示向左）。
v-offset: 垂直偏移量，阴影相对于文本向下的距离（负值表示向上）。
blur-radius: 模糊半径，值越大，阴影越模糊。
color: 阴影的颜色。

5. 渐变

在 CSS 中，渐变是一种平滑过渡的颜色效果，可以用于背景、边框等元素。主要有两种类型的渐变：线性渐变和放射渐变。

6. 2d/3d转变

在 CSS 中，2D 和 3D 转变可以用来创建平滑的动画效果，使元素在不同状态之间过渡。以下是如何实现 2D 和 3D 转变的基本概念和示例。

7. 过渡

在 CSS 中，过渡是一个强大的功能，它允许你在元素的状态变化时创建平滑的动画效果。通过定义何时、如何以及延迟应用样式变化，可以增强用户体验。

过渡属性（property）：指定要应用过渡效果的 CSS 属性。
持续时间（duration）：指定过渡效果持续的时间。
速度曲线（iming-function）：定义过渡的速度变化，决定过渡效果的流畅度。
延迟时间（delay）：指定在开始过渡之前的等待时间。

transition: property duration timing-function delay;

8. 动画

在 CSS 中，动画用于创建更加复杂的视觉效果，使元素在状态变化时能够进行平滑的过渡。与过渡相比，动画提供了更大的灵活性，可以通过关键帧控制多个样式的变化。

@keyframes: 定义动画的关键帧，描述动画的样式变化。
百分比： 0% 表示动画开始，100% 表示动画结束，中间可以有多个关键帧。
animation-name：指定动画的名称，引用 @keyframes 的名称。
animation-duration：定义动画的持续时间（如 2s）。
animation-timing-function：定义动画的速度曲线，如 linear、ease、ease-in、ease-out 等。
animation-delay：定义动画开始前的延迟时间（如 0.5s）。
animation-iteration-count：定义动画播放的次数（如 infinite 表示无限次）。
animation-direction：定义动画的播放方向，如 normal、reverse、alternate 等。
animation-fill-mode：定义动画结束后元素的样式状态，如 forwards、backwards、both 等。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            /* margin: 100px; */
        }
        /* 动画 */
        /* @-o-keyframes{} 欧胖 */
        /* @-moz-document 名称{} 火狐 */
        /* 定义动画 */
        /* @keyframes animat {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        } */
         
        @keyframes animat {
            0%{
                margin-left: 0;
                transform: scale(.5);
            }
            50%{
                margin-left: 500px;
                transform: scale(1);
            }
            100%{
                margin-left: 0px;
                transform: scale(0.5);
            }
        }

        .box-1{
            /* 名称 */
            animation-name: animat;
            /* 持续时间 */
            animation-duration: 2s;
            /* 匀速 */
            animation-timing-function: linear;
            /* 执行次数 */
            animation-iteration-count: infinite;
            /* 结束位置 */
            animation-fill-mode: backwards;
            /* 执行方向 */
            animation-direction: normal;
        }
        .box-1:hover{
            /* 停止动画 */
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div class="box box-1"></div>
    <div class="box box-2"></div>


    <script>


    </script>
</body>
</html>

9. 媒体查询

媒体查询是 CSS 中用于响应式设计的强大工具。它允许你根据设备的特性（如屏幕宽度、高度、分辨率等）来应用不同的样式。这使得网页能够在不同设备上（如手机、平板和桌面）表现良好。

min-width: 设备宽度大于等于指定值。
max-width: 设备宽度小于等于指定值。
min-height: 设备高度大于等于指定值。
max-height: 设备高度小于等于指定值。
orientation: 设备方向，例如 portrait（纵向）或 landscape（横向）。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        button {
            border: 0;
        }

        a {
            color: #000;
            text-decoration: none;
        }

        nav {
            background-color: #ccc;
            position: relative;
        }

        .container {
            width: 90%;
            margin: 0 auto;
        }

        .navbar {
            display: flex;
        }

        .navbar li a {
            display: block;
            padding: 15px 30px;
        }

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

        .btn {
            padding: 10px 30px;
            margin: 6px 15px;
        }

        .btn-toggle {
            float: left;
            display: none;
            cursor: pointer;
        }
        @media (max-width : 770px){
            .container{
                width: 100%;
            }
            .btn-toggle{
                display: block;
            }
            .navbar{
                width: 100%;
                display: none;
                position: absolute;
                top: 44px;
            }
            .navbar li a{
                width: 100%;
                box-sizing: border-box;
                background-color: #ccc;
                border-bottom: 1px solid #fff;
                padding: 10px 30px;
            }
        }
    </style>
</head>

<body>
    <nav class="nav">
        <div class="container">
            <button class="btn btn-toggle">菜单</button>
            <ul class="navbar">
                <li><a href="#">首页</a></li>
                <li><a href="#">公司简介</a></li>
                <li><a href="#">服务案列</a></li>
                <li><a href="#">合作伙伴</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
    </nav>


    <script>
        var btn = document.querySelector(".btn-toggle")
        var navbar = document.querySelector(".navbar")
        var isShow = true
        btn.onclick = function(){
            if(isShow){
                navbar.style.display = "block"
            }
            else{
                navbar.style.display = "none"
            }
            isShow = !isShow
        }
        var chang = function(){
            var width = window.innerWidth
            if(width > 770){
                navbar.style.display = "flex"
            }
            else{
                navbar.style.display = "none"
            }
        }
        window.addEventListener("resize",chang)
        chang()


    </script>
</body>

</html>

上诉代码运行的结果如下：

10. 字体

进入https://www.zhaozi.cn/ 网可以找到不同的字体，可以免费下载字体。

11. 列布局

列布局是网页设计中常用的一种布局方式，可以通过 CSS 的多种方式实现。以下是几种常见的方法来创建列布局，包括使用 Flexbox、CSS Grid 和传统的浮动布局。

12. 弹性布局

弹性布局（Flexbox）是一种一维布局模型，能够在容器内有效地分配空间并对齐元素。它特别适用于需要响应式设计的场景，能够轻松地调整子元素的大小和排列。

display: flex;: 将元素定义为弹性容器。
flex-direction: 定义主轴的方向。
row（默认）：从左到右。
column：从上到下。
justify-content: 定义主轴上的对齐方式。
flex-start: 默认，向开始对齐。
center: 居中对齐。
space-between: 项目之间均匀分布。
space-around: 项目之间留出相等的空间。
align-items: 定义交叉轴上的对齐方式。
stretch（默认）：拉伸以填满容器。
flex-start: 向开始对齐。
center: 居中对齐。
flex-end: 向结束对齐。

flex-grow: 定义项目的放大比例。
flex-shrink: 定义项目的缩小比例。
flex-basis: 定义项目在分配多余空间之前的基础大小。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局示例</title>
    <style>
        .container {
            display: flex; /* 创建弹性容器 */
            flex-direction: row; /* 主轴方向为行 */
            justify-content: space-between; /* 项目之间均匀分布 */
            align-items: center; /* 交叉轴居中对齐 */
            height: 100px;
            background-color: #f4f4f4;
            padding: 10px;
        }

        .item {
            flex: 1; /* 每个项目均等分配空间 */
            margin: 0 10px; /* 项目之间的水平间距 */
            padding: 20px;
            background-color: lightcoral;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">项目 1</div>
        <div class="item">项目 2</div>
        <div class="item">项目 3</div>
    </div>
</body>
</html>

13. 倒影

-webkit-box-reflect 是一个非标准的 CSS 属性，用于创建元素的倒影效果。它主要在 WebKit 内核的浏览器（如 Safari）中支持。虽然它非常简单易用，但由于其非标准性质，建议在使用时考虑兼容性。

14. 裁剪标签

clip-path 是 CSS 中的一个属性，用于定义一个元素的可见区域，可以用于创建各种形状的裁剪效果。通过设置不同的形状，可以实现独特的视觉效果。

clip-path: <shape> | <url> | none;

<shape>：可以是各种形状的关键字（如 circle()、ellipse()、polygon()、inset()）或 SVG 路径。
<url>：指向 SVG 图形的 URL。
none：表示没有裁剪。

15. 背景模糊

filter 是 CSS 中的一个属性，用于为元素应用各种图形效果，如模糊、亮度、对比度、灰度等。这个属性可以用于图像、文本或任何其他 HTML 元素，以实现不同的视觉效果

16. 网格布局

网格布局是 CSS 中一种强大的布局系统，允许开发者以二维方式排列和对齐元素。与 Flexbox 相比，Grid 更适合处理复杂的布局。

grid-template-rows：定义网格的行模式。
grid-template-columns：定义网格的列模式
align-content：控制网格内容在交叉轴方向（垂直）上的对齐方式。
row-gap：设置行间距
column-gap：设置列间距。

具体代码如下：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    
</head>

<body>
    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        ul {
            width: 600px;
            height: 400px;
            background-color: #ccc;
            /* 网格系统 */
            /* 把ul标签（父元素）设置成网格容器 */
            display: grid;
            /* 设置两行，每一行高度100px */
            /* grid-template-rows: 100px 100px; */
            /* grid-template-rows: 1fr 1fr; */

            /* 设置两行，每一行高度50px */
            grid-template-rows: repeat(4, 50px);

            /* 设置三列，每一列宽度为150px */
            grid-template-columns: 150px 150px 150px;
            /* 第一列（占2/4） */
            /* 第二列（占1/4） */
            /* 第三列（占1/4） */
            /* grid-template-columns: 1fr 1fr 1fr; */


            /* 设置网格内容水平居中 */
            justify-content: center;
            /* 设置网格内容垂直居中 */
            align-content: center;

            /* 行间距 */
            row-gap: 10px;
            /* 列间距 */
            column-gap: 10px;

            /* 给网格容器划分区域 */
            grid-template-areas: 
                'a   b   c'
                'd   e   f'
                '.   .   .'
                '.   .   .';
        }

        ul li {
            border: 2px solid #f0f0f0;
        }
        .c1 {
            background-color: deeppink;
            /* 根据单元格标记设置子元素的位置 */
            grid-area: f;
        }
        .c6 {
            background-color: deepskyblue;
            /* 根据单元格标记设置子元素的位置 */
            grid-area: a;
        }
    </style>
    <!-- 父元素（网格容器） -->
    <ul>
        <!-- 子元素（单元格） -->
        <li class="c1">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li class="c6">6</li>

        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>

</body>

</html>