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;
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-left: 6px solid red;
      position: absolute;
      bottom: -20px;
      right: -20px;
}

3. 伪元素：三角边框

  • 两侧三角叠加
.square {
    width: 100px;
    height: 100px;
    background-color: #FFF;
    position: relative;
    border: 2px #000000 solid;
}

.square::before {
    content: "";
    width: 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: "";
    width: 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;
    width: 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){
    width: 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;
    width: 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
posted @ 2018-06-19 07:54  执着的程序员~  阅读(119)  评论(0)    收藏  举报