CCSS 解决方案

最新推荐文章于 2019-05-29 01:44:18 发布

Mr_hermit

最新推荐文章于 2019-05-29 01:44:18 发布

阅读量1.2k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/Mr_hermit/article/details/80728087

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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;

13. 网站添加logo

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>