zoukankan      html  css  js  c++  java
  • CSS 解决方案

    1. 伪元素:清除浮动

    • 给需要清除浮动的元素添加类名 clearfix 即可
    .clearfix::after {
        content: '';
        display: block;
        height: 0;
        line-height: 0;
        clear: both;
        visibility: hidden;
    }
    
    .clearfix {
        zoom: 1;
    }
    

    2. 伪元素:实心小三角

    .box::after {
          content: '';
          display: block;
           0;
          height: 0;
          border: 6px solid transparent;
          border-left: 6px solid red;
          position: absolute;
          bottom: -20px;
          right: -20px;
    }
    

    3. 伪元素:三角边框

    • 两侧三角叠加
    .square {
         100px;
        height: 100px;
        background-color: #FFF;
        position: relative;
        border: 2px #000000 solid;
    }
    
    .square::before {
        content: "";
         0px;
        height: 0px;
        display: block;
        position: absolute;
        z-index: 2;
        top: 25%;
        right: -28px;
        border: 15px solid #FFF;
        border-color: transparent transparent transparent #FFF;
    }
    
    .square::after {
        content: "";
         0px;
        height: 0px;
        display: block;
        position: absolute;
        z-index: 1;
        top: 25%;
        right: -30px;
        border: 15px solid #FFF;
        border-color: transparent transparent transparent #000;
    }
    

    4. 伪元素:标点符号

    <style>
        span::after {
            content: ','
        }
    </style>
    <body>
        <span>张新</span>
    </body>
    

    5. 伪元素:鼠标悬浮,有间隙的元素显示

    • 场景:

      • 两元素 A、B 之间有间隙

      • 鼠标 hover 元素 A 时,元素 B 显示;在鼠标移动到元素 B 上,元素 B 一直显示

    • CSS 实现:

      • 方式一:兄弟元素,添加伪元素

      • 方式二:兄弟元素,给父元素 添加 hover

    6. 伪元素:hover 时,显示提示 不同的信息(替换 title)

    • CSS 实现:

      • 方式一:标签全局属性 title 属性

      • 方式二:自定义属性

      span {
          position: relative;
      }
      
      span:hover::before {
          content: attr(data-title);
          position: absolute;
          top: 200px;
          left: 0;
          display: block;
           200px;
          background: yellow;
      }
      
      <span data-title="张新是帅哥">张新</span>
      

    7. 伪类:CSS 计数

    <style>
        .box {
            counter-reset: aaa;
        }
    
        input:checked {
            counter-increment: aaa;
        }
    
        span::after {
            content: counter(aaa)
        }
    </style>
    
    <body>
        <div class="box">
            1
            <input type="checkbox" name="" id=""> 2
            <input type="checkbox" name="" id=""> 3
            <input type="checkbox" name="" id="">
        </div>
        <span></span>
    </body>
    

    8. 伪类:not child 伪类结合,简化 CSS 选择器

    // 最后一个li标签除外的li标签
    
    li:not(:last-child){
         100px;
        background-color: red;
    }
    

    9. 伪类:聚焦 input 文本标签,相邻元素颜色改变

    • CCSS 实现:
      • 方式一:伪元素 :focus

    10. 伪类:自定义 radio / checkbox 元素样式

    • CSS 实现:
      • 方式一:label 标签 + radio / checkbox 元素的 :check 伪元素

    11. CSS 清除浮动

    • 方式1: 父元素设置 overflow: hidden;

    • 方式2: 浮动元素后面添加 <div style="clear:both"></div>

    • 方式3: 使用伪元素清除浮动: 直接给要清除浮动的元素添加类名 clearfix,代码如下

      // 伪元素清除浮动:
      .clearfix:after {
          content: '';
          height: 0;
          line-height: 0;
          display: block;
          clear: both;
          visibility: hidden;
      }
          
      .clearfix {
          zoom: 1;
      }
      

    12. CSS 解决垂直外边距塌陷

    • 原因分析:

      • 情况1: 两个垂直方向的元素(第一个设置 margin-bottom; 第二个设置 margin-top

        • 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值

        • 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值

        • 两个外边距一正一负时,折叠结果是两者的相加的和

      • 情况2: 父子元素嵌套(子元素设置 margin-top , 父元素一起下来了)

    • 解决方案:

      • 尽量使用padding / margin-bottom

      • 父元素设置 overflow: hidden;

      • 父元素设置边框 border: 1px solid transparent;

    • a 标签 添加背景图片;设置 href 属性;a 标签中写:logo的中文名

    • 代码如下:

      a.logo {
          display: block;
           200px;
          height: 200px;
          background: url('../img.jpg') no-repeat;
          text-indent: -999px;
      }
      
      // text-indent 设置文本缩进
      

    14. 文字环绕图片

    • 实现1:img 标签设置属性 align="left" / align="right"

    • 实现2:图片设置 float 脱离标准流; 文字盒子不脱标 (经典),代码如下

      <!DOCTYPE html>
      <html>
          <head>
              <meta charset="utf-8">
              <title>2</title>
              <style>
                  img {
                      float: left;
                  }
              </style>
          </head>
          <body>
              <img src="./assets/img1.png" width="40">
              <span class="text">
                  腾讯大王卡,月费:19元,定向流量(国内):腾讯系列APP客户端免费流量
              </span>
          </body>
      </html>
      

    15. 超出部分省略号显示

    .text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    `text-overflow: ellipsis` 显示省略符号来代表被修剪的文本
    `white-space: nowrap` 文本不会换行,文本会在在同一行上继续,直到遇到 <br>   
    

    16. 设置文本 字间距 / 缩进

    • 设置文本 字间距 letter-spacing: 0.5px;

    • 设置文本 缩进 text-indent: 20px;

    17. 多列布局,行高 与 最大行高一致

    • CSS 实现:
      • 方式一:父元素 display: table; 子元素 diaplay: table-cell
  • 相关阅读:
    Openstack-Mitaka Ceilometer 部署心得
    Openstack-Mitaka Keystone 部署心得
    IO模型学习笔记
    TCP-IP协议学习笔记
    大规模分类问题作业报告
    RabbitMQ安装笔记
    5.7.8.framebuffer驱动框架分析3
    5.7.7.framebuffer驱动框架分析2
    5.7.6.framebuffer驱动框架分析1
    5.7.5.framebuffer驱动框架总览
  • 原文地址:https://www.cnblogs.com/zxvictory/p/9196960.html
Copyright © 2011-2022 走看看