一、子选择器

语法：selector1 > selector2（选中 selector1 的直接子元素 selector2）

<style>
    .box>a{
        /* 和文本 text 相关的 css样式*/
        /*
            text-decoration : 文本装饰
                none : 去掉文本下划线
                underline : 添加下划线
                overline : 添加上划线
                line-through : 添加删除线

            text-decoration-color : 文本装饰颜色

            text-decoration-style : 设置 装饰线条 样式
                solid : 直线（默认）
                dashed : 虚线
                dotted : 点装线
                double : 双直线
            上述三个属性可以简写为 text-decoration
        */
        text-decoration: line-through; /* 去掉文本装饰  */
        text-decoration-color: red;
        text-decoration-style: dashed;
        
        text-decoration: underline red dashed;

        /*
            text-transform 文本转换
                capitalize : 将每个单词的首字母转大写
                lowercase : 转全小写
                uppercase : 转全大写
        */
        text-transform: capitalize;
        
        /*
            text-indent :首行缩进。如果值是负数，代表首行悬挂
                支持 px 、 em 
        */
        text-indent: 32px;
        /*
            text-align : 文本水平对齐方式 
                left （默认值）
                right 
                center 
        */
        text-align: center;
        /* 最后一行文本的对齐方式 */
        text-align-last: center;
    }
</style>
<div class="box">
    <a href="">baidu</a>
    <p>
        <a href="">新浪</a> <!-- 该a标签不是.box的直接子元素，不被.box>a选中 -->
    </p>
</div>

二、兄弟（同胞）选择器

  • selector1 + selector2：获取 selector1 紧邻的下个兄弟元素
  • selector1 ~ selector2：获取 selector1 后面所有的兄弟元素

<style>
    /*
    white-space : 空白符处理方案
        wrap ： 自动换行 (默认值)
        nowrap : 强制不换行
        pre : 使用预设模式
    */
    .fox ~ p {
        /* 单行文本溢出显示省略号：
        white-space: nowrap;
        overflow:hidden;
        text-overflow: ellipsis; */
        
        /* 多行文本溢出显示省略号（仅webkit内核有效） */
        width: 400px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /* 显示3行 */
        line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

<div class="fox">
    <p>Hello</p>
</div>
<p>近期，随着大模型技术的发展，长文本问题逐渐成为热门且关键的问题，不妨简单梳理一下近期出现的典型的长文本模型：10 月上旬，Moonshot AI 的 Kimi Chat 问世，这是首个支持 20 万汉字输入的智能助手产品；
    10 月下旬，百川智能发布 Baichuan2-192K 长窗口大模型，相当于一次处理约35 万个汉字；
    11 月上旬，OpenAI 发布支持 128K 上下文窗口的 GPT-4 Turbo 模型；
    11 月下旬，Anthropic 发布支持 200K 上下文窗口的 Claude 2.1 模型;
    12 月上旬，零一万物开源了长文本模型 Yi-6B-200K 和 Yi-34B-200K。
    实际上，随着文本长度的提高，模型能够处理问题的边界也大大提高，因此研究并解决长文本问题就显得非常必要。本文将从长文本问题的本质出发，逐步分析和研究长文本实现的问题及解决办法。</p>

三、溢出解决方案

  1. 内容超出盒子高度（盒子设置了固定高度）

    • 高度自适应：height: auto
    • 使用overflow：控制溢出内容显示方式
      • visible：正常显示（默认）
      • hidden：隐藏溢出内容
      • scroll：强制显示滚动条
      • auto：溢出时显示滚动条
    • 多行文本溢出显示省略号（见上文兄弟选择器示例）

  2. 内容超出盒子宽度（默认自动换行，可通过white-space: nowrap强制不换行）

    • 单行文本溢出显示省略号：

      css

      white-space: nowrap; /* 强制不换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */

四、分组选择器

语法：selector1, selector2（同时选中多个选择器，应用相同样式）

<style>
    .box1 > p ,
    .box1 + div{
        /*  text-shadow 设置文字的阴影 
                值格式为：x y r color（可多个阴影）
            x: 水平方向投影偏移距离
            y: 垂直方向投影偏移距离
            r: 阴影模糊半径
            color : 投影颜色
        */
        text-shadow: 3px 2px 2px red;
    }
</style>

<div class="box1">
    <p>在实际中通常 
        (在长文本情况下，可能会出现 
        的情况，但影响不是决定性的)，因此该项可近似认为约等于 2。即在一次前向传递中，对于每个token，每个模型参数，需要进行2次浮点数运算(一次乘法法运算和一次加法运算)。考虑到后向传递的计算量是前向传递的2倍。因此一次训练迭代中，对于每个 token，每个模型参数，需要进行
       次浮点数运算。</p>
</div>

<div>
    除了模型参数、梯度、优化器状态外，占用显存的大头就是前向传递过程中计算得到的中间激活值。这里的激活（activations）指的是：前向传递过程中计算得到的，并在后向传递过程中需要用到的所有张量。
先分析 Decoder layer 中 self-attention 的中间激活：
1. 对于 
 ，需要保存它们共同的输入 
 ，这就是中间激活。输入 
 的形状为 
 ，元素个数为 
 ，占用显存大小为 
 。
</div>

五、行内元素垂直对齐

通过vertical-align控制行内（块）元素的垂直对齐方式：

  • baseline：基线对齐（默认）
  • top：与容器顶部对齐
  • middle：垂直居中对齐等

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .search{
        background-color: chartreuse;
        height: 80px;
        line-height: 80px; /* 行高等于高度，实现单行文本垂直居中 */
        text-align: center;
    }

    .search [type=text] {
        width: 500px;
        height: 60px;
        border:1px solid rgb(13, 6, 114);
        outline:none; /* 去掉聚焦时的默认边框 */
        vertical-align: middle; /* 与按钮垂直居中对齐 */
    }

    .search [type=button]{
        width: 80px;
        height: 60px;
        border: 1px;
        vertical-align: middle; /* 与输入框垂直居中对齐 */
    }
</style>

<div class="search">
    <input type="text">
    <input type="button" value="搜索">
</div>

六、元素显示与光标样式

  1. display 属性：控制元素显示类型

    • block：转为块元素（独占一行）
    • inline-block：转为行内块元素（可设置宽高，不独占一行）
    • inline：转为行内元素（不可设置宽高）
    • none：隐藏元素（不占用空间）

  2. visibility 属性：控制元素显示状态

    • visible：显示（默认）
    • hidden：隐藏（仍占用空间）

  3. opacity：设置透明度（1 为不透明，0 为完全透明，子元素会继承透明度）

  4. cursor：设置光标形状

    • pointer：手指（链接默认）
    • help：帮助图标
    • move：移动图标

<style>
    a{
        display: block; /* 超链接转为块元素，独占一行 */
    }

    a:hover{
        color: aqua;
        cursor: pointer; /* 鼠标悬停时显示手指光标 */
    }

    /* [type=checkbox]:checked{
        width: 40px;
        height: 40px;
    } */

    /* input:focus{
        border: 10px solid black;
    } */
</style>

<a href="https://www.baidu.com">百度</a>
<a href="https://www.sina.com">新浪</a>
<a href="https://www.yahoo.com">雅虎</a>
<a href="https://www.163.com">网易</a>
<a href="http://www.qikuedu.com">奇酷</a>

<input type="checkbox" value="1">吃饭
<input type="checkbox" value="2">睡觉
<input type="checkbox" value="3">拉粑粑

七、伪类选择器

选中指定状态或位置的元素，分为以下几类：

1. A 标签特有伪类
  • :link：未访问过的超链接
  • :active：鼠标按下未弹起时
  • :visited：已访问的超链接
  • :hover：鼠标悬停时
2. 状态相关伪类
  • :checked：选中的单选框 / 复选框
  • :selected：选中的下拉列表项
  • :focus：获取焦点的元素（如输入框）
  • :disabled：被禁用的元素
3. 位置相关伪类
  • :first-child：第一个子元素（需满足条件）
  • :last-child：最后一个子元素（需满足条件）
  • :nth-child(exp)：指定位置的子元素（exp 为表达式，如 2n 选偶数位，2n+1 选奇数位）
  • :first-of-type：同类型中第一个元素
  • :last-of-type：同类型中最后一个元素
  • :nth-of-type：同类型中指定位置的元素
4. 其他伪类
  • :not(css-selector)：排除指定元素
  • :has(css-selector)：包含指定元素的父元素

<style>
    .dlbox input:not([type=submit]){ /* 排除type=submit的input */
        width: 300px;
        height: 30px;
    }

    .dlbox:has(a){ /* 包含a标签的.dlbox */
        background-color: aquamarine;
    }
</style>

<div class="dlbox">
    <input type="text"><br>
    <input type="password"><br>
    <input type="submit" value="登录">
</div>

<div class="dlbox">
    <a href="">百度</a>
</div>

八、伪元素选择器

生成并样式化元素的虚拟子元素，语法为::伪元素：

  • ::before：在元素所有子元素前生成虚拟子元素
  • ::after：在元素所有子元素后生成虚拟子元素（需配合content属性设置内容）
  • ::first-letter：选中元素中第一个字符
  • ::first-line：选中元素第一行内容
  • ::selection：选中光标选中的文字
  • ::placeholder：选中输入框的提示文本

<style>
    .wbox::before{
        content:":)"; /* 必须设置content，可为空 */
    }
    .wbox::after{
        content: "T T";
    }
</style>

<div class="wbox">
    <a href="">百度</a>
    <a href="">新浪</a>
</div>

九、盒子模型

所有标签均可视为盒子，包含内容、内边距、边框、外边距四部分，分为两种类型：

类型 特点（width/height 含义） 总大小计算方式
标准盒子 仅指内容大小 内容 + 内边距 + 边框 + 外边距
怪异盒子 指内容 + 内边距 + 边框的总大小 width/height + 外边距

通过box-sizing设置：

  • content-box：标准盒子（默认）
  • border-box：怪异盒子

十、边框与圆角

1. 边框样式

.ppbox{
    width: 300px;
    height: 300px;
    /* 单边框设置（上、左、下、右） */
    border-top:5px red solid; /* 宽度 颜色 样式 */
    border-left:10px gold dashed;
    border-bottom:15px rebeccapurple dotted;
    /* border-right: 20px double rosybrown; */

    /* 统一设置四边边框 */
    border: 15px solid black;
}

/* 利用边框实现三角形（宽高为0，仅设置单边边框颜色，其他边透明） */
.sanjiao{
    width: 0;
    height: 0;
    border: 100px solid transparent; /* 其他三边透明 */
    border-top: 100px solid green; /* 上边设置颜色 */
}


<div class="ppbox"></div>
<div class="sanjiao"></div>
2. 边框圆角

通过border-radius设置圆角，值可为像素或百分比：

  • 1 个值：四边圆角相同
  • 2 个值：左上 = 右下，右上 = 左下
  • 3 个值：左上，右上 = 左下，右下
  • 4 个值：左上，右上，右下，左下

<style>
    .box_ll{
        font-size: 0; /* 解决行内块元素间隙问题 */
    }
    .box_ll *{
        box-sizing: border-box; /* 怪异盒子模型 */
        height: 36px;
        vertical-align: middle;
    }
    .box_ll input[type=text]{
        width: 600px;
        border: 2px solid #ddd;
        outline: none;
        border-right: none;
        border-radius: 12px 0 0 12px; /* 左上、右下圆角12px */
    }
    .box_ll input[type=submit]{
        width: 100px;
        border: 2px solid #ddd;
        border-left: none;
        border-radius: 0 12px 12px 0; /* 右上、左下圆角12px */
    }
</style>

<div class="box_ll">
    <input type="text">
    <!-- button也可表示按钮，type属性：submit（提交）、button（普通）、reset（重置） -->
    <input type="submit" value="搜索">
</div>

<div> dadas</div>

一、搜索框样式实现

要求：使用 CSS 样式实现特定搜索框效果（输入框、图标、按钮组合，带圆角）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索框样式</title>
    <style>
        .box{
            font-size: 0; /* 消除行内块元素间隙 */
        }
        .box *{
            box-sizing: border-box; /* 怪异盒子模型 */
            height: 30px;
            vertical-align: middle; /* 垂直居中对齐 */
        }
        .box input[type=text]{
            width: 300px;
            outline: none; /* 去掉聚焦边框 */
            border-radius: 8px 0 0 8px; /* 左圆角 */
            border: 1px solid #ccc;
            border-right: none; /* 去掉右侧边框，与图标衔接 */
            background-color: rgb(249, 247, 247);
        }
        .box img{
            border: 1px solid #ccc;
            border-left: none;
            border-right: none; /* 图标左右边框处理 */
        }
        .box input[type=submit]{
            width: 80px;
            border: 1px solid #ccc;
            border-left: none; /* 去掉左侧边框，与图标衔接 */
            border-radius: 0 8px 8px 0; /* 右圆角 */
            background-color: rgb(56, 56, 212);
            color: white;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text">
        <img src="../OIP-C.webp" alt="">
        <input type="submit" value="百度一下">
    </div>
</body>
</html>

二、超链接 (a 标签) 样式修改

要求：

  • 去掉超链接默认下划线
  • 字体颜色设为 #ddd（灰色）
  • 字体为黑体
  • 鼠标悬停时：字体改为微软雅黑，颜色改为 #ccc

<style>
    a{
        text-decoration: none; /* 去掉下划线 */
        color: #ddd; /* 灰色字体 */
        font-family: 黑体; /* 黑体字体 */
    }
    a:hover{ /* 鼠标悬停伪类 */
        color: #ccc; /* 颜色变为#ccc */
        font-family: 微软雅黑; /* 字体改为微软雅黑 */
    }
</style>

三、边框制作三角形

要求：定义 4 个 div 标签，使用边框样式制作 4 个不同方位的三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角形制作</title>
    <style>
        /* 下三角形（上边框有颜色，其他边透明） */
        .s1{
            width: 0;
            height: 0;
            border: 100px solid transparent; /* 四边透明边框 */
            border-top: 100px solid green; /* 上边框显色，形成下三角 */
        }
        /* 右三角形（左边框有颜色，其他边透明） */
        .s2{
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-left: 100px solid green; /* 左边框显色，形成右三角 */
        }
        /* 左三角形（右边框有颜色，其他边透明） */
        .s3{
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-right: 100px solid green; /* 右边框显色，形成左三角 */
        }
        /* 上三角形（下边框有颜色，其他边透明） */
        .s4{
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-bottom: 100px solid green; /* 下边框显色，形成上三角 */
        }
    </style>
</head>
<body>
    <div class="s1"></div> <!-- 下三角形 -->
    <div class="s2"></div> <!-- 右三角形 -->
    <div class="s3"></div> <!-- 左三角形 -->
    <div class="s4"></div> <!-- 上三角形 -->
</body>
</html>

四、b 标签盒子样式设置

要求：

  • 将 b 标签设置为 500×500 的盒子
  • 内容水平居中、垂直居中
  • 内容只允许一行显示
  • 字体大小 80px
  • 内容超出时显示滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>b标签盒子样式</title>
    <style>
        b{
            display: inline-block; /* 转为行内块，可设置宽高 */
            width: 500px;
            height: 500px;
            background-color: black; /* 背景色（示例） */
            color: white; /* 文字颜色（示例） */
            font-size: 80px; /* 字体大小 */
            white-space: nowrap; /* 强制不换行 */
            overflow-x: scroll; /* 水平溢出显示滚动条 */
            text-align: center; /* 水平居中 */
            line-height: 500px; /* 垂直居中（行高=高度） */
        }
    </style>
</head>
<body>
    <b>
        使用 CSS 将 b 标签 设置为 500 * 500 大小的盒子、并设置 内容 水平居中，b标签中的内容 只允许出现一行，且垂直居中在盒子中 字体大小设置为 80px 。如果内容超出了盒子，则自动显示滚动条
    </b>
</body>
</html>

五、商品信息文本溢出处理（单行）

要求：对商品描述文本实现单行溢出显示省略号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品文本单行溢出</title>
    <style>
        img{
            width: 300px;
            height: 300px; /* 图片大小（示例） */
        }
        div p{
            width: 300px; /* 与图片同宽 */
            display: block;
            white-space: nowrap; /* 强制不换行 */
            overflow: hidden; /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 溢出显示省略号 */
        }
    </style>
</head>
<body>
    <div>
        <img src="http://img11.360buyimg.com/jdcms/s230x230_jfs/t1/107298/1/49481/101814/6600d0a8F1b2bb986/c3f214edeb991002.jpg.avif"/>
        <p>希诺双层玻璃杯2024新款鹅蛋泡茶杯办公室大容量水杯车载杯子 9390珠光本色 280ml</p>
    </div>
</body>
</html>

六、商品信息文本溢出处理（多行）

要求：对商品描述文本实现多行（3 行）溢出显示省略号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品文本多行溢出</title>
    <style>
        img{
            width: 100px;
            height: 100px; /* 图片大小（示例） */
        }
        div p{
            width: 100px; /* 固定宽度 */
            display: -webkit-box; /* webkit内核盒子模型 */
            -webkit-box-orient: vertical; /* 垂直排列 */
            -webkit-line-clamp: 3; /* 显示3行 */
            line-clamp: 3; /* 标准属性（部分浏览器支持） */
            overflow: hidden; /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 溢出显示省略号 */
        }
    </style>
</head>
<body>
    <div>
        <img src="http://img11.360buyimg.com/jdcms/s230x230_jfs/t1/107298/1/49481/101814/6600d0a8F1b2bb986/c3f214edeb991002.jpg.avif"/>
        <p>希诺双层玻璃杯2024新款鹅蛋泡茶杯办公室大容量水杯车载杯子 9390珠光本色 280ml</p>
    </div>
</body>
</html>

七、横向一级导航实现

要求：

  1. 导航宽度铺满父容器，高度 80px，背景色 #01AAED，字体色 #f0f0f0
  2. 文字水平、垂直居中
  3. 鼠标悬停时：字体色 #fff，背景色 #1890ec
  4. 光标为 “小手” 形状

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>横向导航</title>
    <style>
        ul{
            margin: 0;
            padding: 0; /* 清除默认内外边距 */
            height: 80px;
            background-color: #01AAED; /* 导航背景色 */
            color: #f0f0f0; /* 文字颜色 */
            text-align: center; /* 子元素水平居中 */
            list-style: none; /* 去掉列表默认样式 */
        }
        li{
            display: inline-block; /* 转为行内块，实现横向排列 */
            padding: 0 20px; /* 导航项间距（示例） */
            cursor: pointer; /* 光标为小手 */
            line-height: 80px; /* 垂直居中（行高=高度） */
        }
        li:hover {
            color: #fff; /* 悬停文字色 */
            background-color: #1890ec; /* 悬停背景色 */
        }
    </style>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>学生中心</li>
        <li>个人信息</li>
        <li>退出登录</li>
    </ul>
</body>
</html>

# python # 前端 # css3 # 数据结构 # 算法
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

SeedVR2终极指南：如何用单步扩散模型实现专业级视频修复

还在为老旧视频的模糊画质而烦恼吗？面对抖动严重的监控录像或褪色的家庭影像，你是否曾希望有一种简单高效的修复方案？SeedVR2正是为解决这些痛点而生的一站式视频修复工具。作为字节跳动推出的先进视频修复模型，它能够在单步推理中实现专业级的视频质量提升，彻底改变了传统视频修复的工作流程。## 核心价值：为什么选择SeedVR2进行视频修复？**传统视频修复的三大瓶颈**：1. **计算成本高

avatar AI Agent技术社区

深度解析Amlogic S9xxx电视盒子Armbian系统：从闲置设备到Linux服务器的终极实战指南

你是否拥有一台闲置的Amlogic S9xxx系列电视盒子？想让它摆脱单一的视频播放功能，变身为功能强大的Linux服务器、开发平台或家庭媒体中心？本指南将为你详细解析如何通过Armbian系统实现这一转变，让你的电视盒子重获新生，成为高性能的Linux设备。Armbian系统基于Debian/Ubuntu构建，专为ARM芯片优化，提供了完整的Linux生态支持。## 🎯 核心价值与独特优势

avatar AI Agent技术社区

CANN/runtime Event管理API

本章节描述 CANN Runtime 的 Event 管理接口，用于事件的创建、记录、同步、计时及 IPC 跨进程共享。- [`aclError aclrtCreateEvent(aclrtEvent *event)`](#aclrtCreateEvent)：创建Event，创建出来的Event可用于统计两个Event之间的耗时、多Stream之间的任务同步等场景。- [`aclError

avatar AI Agent技术社区