# cssdemo

**Repository Path**: ponymym/cssdemo

## Basic Information

- **Project Name**: cssdemo
- **Description**: 关于css的小demo
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 11
- **Forks**: 1
- **Created**: 2020-04-17
- **Last Updated**: 2024-11-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# demo1：更易维护，有粘性的代码优化
### 原本代码
```
.childButton{
    font-size: 20px;
    line-height: 30px;
    padding: 6px 16px;
    border-radius: 5px;
    color: white;
    border: 1px solid #446d88;
    text-shadow: 0 -1px 1px #335166;
    box-shadow: 0 1px 5px gray;
    background: #58a linear-gradient(#77a0bb, #58a);
}
```
### 问题：
#### 1.
```
font-size: 20px;
line-height: 30px;
```
行高和字号有关联性的，每次修改字号，还需修改行高，应该修改成：
```
font-size: 20px;
line-height: 1.5;
```
#### 2.
```
font-size: 20px;
```
字号和父级字号有关联性的，每次修改父级字号，都需修改，应该修改成：
```
.parent{
        font-size: 40px;
    }
.childButton{
    font-size: 50%;
}
```
#### 3.
```
.childButton{
        font-size: 20px;
        line-height: 30px;
        padding: 6px 16px;
        border: 1px solid #446d88;
        border-radius: 5px;
        text-shadow: 0 -1px 1px #335166;
        box-shadow: 0 1px 5px gray;
    }
```
其它设置大小的，都可以修改成和父级有关的单位em，这样，父级修改了字体，整个按钮都会等比例修改，应该修改成：
```
.childButton{
        font-size: 50%;
        line-height: 1.5;
        padding: 0.2em 0.5em;
        border: 1px solid #446d88;
        border-radius: 0.17em;
        text-shadow: 0 -0.03em 0.03em #335166;
        box-shadow: 0 0.03em 0.17em gray;
    }
```
#### 4.
```
.childButton{
    border: 1px solid #446d88;
    text-shadow: 0 -1px 1px #335166;
    box-shadow: 0 1px 5px gray;
    background: #58a linear-gradient(#77a0bb,#58a);
}
```
如果想要其它颜色的按钮，且gray的阴影只适合白色背景，应该利用白色黑色的半透明，应该修改成：

```
.childButton{
    border: 1px solid rgba(0,0,0,0.1);  //黑色半透明
    text-shadow: 0 -0.03em 0.03em rgba(0,0,0,0.5);
    box-shadow: 0 0.03em 0.17em rgba(0,0,0,0.5);
    background: #58a linear-gradient(hsla(0,0%,100%,0.2),transparent);
}
.childButton.red{
    background-color: red;
}
```

### 修改后代码
```
.parent2{
    font-size: 40px;
}
.childButton2{
    font-size: 50%;
    line-height: 1.5;
    padding: 0.2em 0.5em;
    border: 1px solid rgba(0, 0, 0, 0.1);
    ;
    border-radius: 0.17em;
    color: white;
    text-shadow: 0 -0.03em 0.03em rgba(0, 0, 0, 0.5);
    box-shadow: 0 0.03em 0.17em rgba(0, 0, 0, 0.5);
    background: #58a linear-gradient(hsla(0, 0%, 100%, 0.2), transparent);
}
```
图示：
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo1.jpg)

# demo2：背景不包括边框
```
background-clip: content-box; /* 关键：加上后背景会不包括边框 */
```
图示：
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo2.jpg)

# demo3：需要多层边框，该怎么做呢？利用box-shadow/outline
### box-shadow用法
```
box-shadow: 20px 20px 12px 60px rgba(0, 0, 0, 0.6) inset;  //参数：x轴偏移量，y轴偏移量，模糊值，宽度,颜色，是否内嵌
```
### box-shadow优点：
1.可以累计多个阴影，逗号分隔，如下：
```
box-shadow: 0 0 0 20px red,0 0 0 40px orange,20px 20px 12px 60px rgba(0, 0, 0, 0.6);
```
注意：阴影是叠加的第四个参数也是叠加的
2.不影响布局，不受box-sizing影响，可以选择是内边距还是外边距
注意：不会响应鼠标事件，hover/click时不会响应
3.贴合border-radius产生的圆角

### box-shadow缺点：
1.没有其它形状，只有实线
2.不能随意控制和盒子的距离

### outline用法
```
outline: 20px dashed orange;
outline-offset: 20px;
```
### outline优点：
1.线的形状可选
2.可以随意控制和盒子的距离，距离也可以是负数，到盒子内部

### outline缺点
1.不能用逗号分隔，只能加一个outline
2.不能贴合border-radius产生的圆角
图示：
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo3-1.jpg)
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo3-2.jpg)

# demo4：背景图固定在右下角
### 方案一:background-position: right 20px bottom 10px;
```
background: url(./img/bg.png) no-repeat bottom right #58a;  /* //同时设置背景图片和颜色哦! */
background-position: right 20px bottom 10px;
```
注意:bottom right也要写上,不支持可以固定到左下角,差别不大,防止浏览器对background-position不支持

### 方案二:background-origin: content-box;
```
background: url(./img/bg.png) no-repeat bottom right #58a;
padding: 0 20px 10px 0;
background-origin: content-box;
```
优点:padding和距离右下角的位置联动,不用两次修改

图示：
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo4.jpg)


# demo5：单侧阴影效果
```
box-shadow: 8px 16px 5px -8px rgba(0, 0, 0, 0.6); 
/* 往右偏移8,往下偏移16,阴影模糊度5,阴影扩张-8,关键是第四个参数 */
```

# demo6：父元素的宽度是最大的子元素的宽度
```
.box1 {
    border: 1px solid black;
    text-align: center;
    margin: auto;
    max-width: 300px;  <!-- 以防旧浏览器不支持max-width: min-content; -->
    max-width: min-content;
}
.box1 img{
    max-width: inherit; <!-- 以防旧浏览器不支持max-width: min-content; -->
}
```

图示：
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo6.jpg)

# demo7：设置滚动条的样式
```
    /* 整个滚动条的设置 */
    .box2::-webkit-scrollbar {
        width: 6px;
        /* background-color: transparent; */
        background-color: #fff;
    }

    /* 滚动条滑块的设置 */
    .box2::-webkit-scrollbar-thumb {
        background-color: #bbb;
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    }

    .box2::-webkit-scrollbar-thumb:hover {
        background: #000;
    }

    /* 滚动条轨道的设置 */
    .box2::-webkit-scrollbar-track {
        display: none;
    }

    /* 滚动条轨道内侧的设置 */
    .box2::-webkit-scrollbar-track-piece {
        background: orange;
    }

    /* xy滚动条相交拐角的设置 */
    .box2::-webkit-scrollbar-corner {
        background: #179a16;
    }

    /* 滚动上下按钮的设置 */
    .box2::-webkit-scrollbar-button {
        background-color: palegoldenrod;
    }

    /* 滚动水平下按钮的设置 */
    .box2::-webkit-scrollbar-button:horizontal:increment {
    }
    /* 滚动垂直下按钮的设置 */
    .box2::-webkit-scrollbar-button:vertical:increment {
        background: url(./img/down.png) no-repeat center;
        background-size: contain;
        background-color: palegoldenrod;
    }
    /* 滚动垂直上按钮的设置 */
    .box2::-webkit-scrollbar-button:vertical:decrement {
        background: url(./img/up.png) no-repeat center;
        background-size: contain;
        background-color: palegoldenrod;
    }
    /* 右小角拖动块的设置 */
    .box2 textarea::-webkit-resizer {
        background: blue;
    }
```
图示：
修改前：
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo7-1.jpg)
修改后：
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo7-2.jpg)

# demo8：图片样式
object-fit一共有五个对应值，分别是：
###### fill: “填充”。默认值。使图片拉伸填满整个容器, 不保证保持原有的比例。
###### contain: “包含”。保持原有尺寸比例缩放。保证整个图片都可以出现在容器中。因此，此参数可能会在容器内留下空白。
###### cover: “覆盖”。保持原有尺寸比例缩放。宽度和高度至少有一个和容器一致（尺寸小的一致）。因此，此参数可能会让图片部分区域不可见。
###### none: “无”。保持原有尺寸比例。同时保持图片原始尺寸大小。多出的部分隐藏。
###### scale-down: “降低”。当实际图片尺寸大于容器尺寸时，表现为contain属性的结果；当实际图片尺寸小于容器尺寸时，表现为none属性的结果;
原图：
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo8-0.jpg)
效果：
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo8-1.jpg)
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo8-2.jpg)
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo8-3.jpg)
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo8-4.jpg)
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo8-5.jpg)
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo8-6.jpg)

object-position:图片位置

# demo9：不规则投影
特殊情况box-shadow加阴影满足不了需求，可用滤镜filter代替
###### box-shadow效果：
```
.box1 {
    box-shadow: 2px 2px 4px rgba(0, 0, 0,0.5);
}
```
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo9-1.jpg)
###### filter效果：不规则投影：
filter: blur(2px);模糊效果
```
.box2 {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0,0.5));  //阴影效果
}
```
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo9-2.jpg)

# demo10：毛玻璃滤镜
###### 普通提升背景透明度效果：
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo10-1.jpg)
###### 毛玻璃滤镜效果：
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo10-2.jpg)

# demo11：模拟下划线
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo11-1.jpg)
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo11-2.jpg)
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo11-3.jpg)

# demo12：文字效果
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo12.jpg)

# demo13：扩大可点击区域
有时候想要扩大点击的区域，如点击图标和点击图标旁的文字都触发事件：
1.将事件放到父元素上去
2.扩大可点击区域：
###### 2.1利用border扩大可点击区域
###### 2.2利用伪类扩大可点击区域

# demo14：自定义复选框
label::before实现

# demo15：滚动时出现阴影
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo15.jpg)

# demo16：两张对比图
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo16.jpg)

# demo17：根据兄弟个数设置样式
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo17.jpg)

# demo18：居中
###### 绝对定位和margin居中
###### 缺点：绝对定位影响布局，需知道居中盒子的宽高
 ```
 .box1{
    height: 300px;
    background-color: wheat;
    position: relative;
}
.box1 div{
    height: 100px;
    width: 80px;
    background-color: darkslategrey;
    position: absolute;
    /* top: 50%;   
    left: 50%; */
    /* margin: -50px -40px;    */
    top: calc(50% - 50px);   /* 和上面注释掉的是一个意思 */
    left: calc(50% - 40px);
}
 ```
######   绝对定位和translate居中
###### 缺点：绝对定位影响布局
```
.box2{
    height: 300px;
    position: relative;
    background-color: whitesmoke;
}
.box2 div{
    height: 30%;
    width: 20%;
    background-color: darkslategrey;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
```
 
######    margin和translate居中
###### 缺点：只能应用于相对视口居中的场景，示例中是相对最外层视口居中，没有相对box3居中
```
.box3{
    height: 300px;
    background-color: wheat;
}
.box3 div{
    height: 30%;
    width: 20%;
    background-color: darkslategrey;
    margin: 50vh auto;
    transform: translateY(-50%);
}
```

######     flex和margin居中
###### 缺点：浏览器不完全支持
```
.box4{
    height: 300px;
    background-color: whitesmoke;
    display: flex;
}
.box4 div{
    height: 30%;
    width: 20%;
    background-color: darkslategrey;
    margin: auto;
}
```

# demo19：将footer固定在底部
我们往往需要把footer放在页面最下方，当内容足够长时没问题，当内容不够时，出现如下场景：
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo19-1.jpg)
###### 解决办法：
###### 1.中间部分设置最小高度：视口高-头尾的高
```
main{
    min-height: calc(100vh - 160px);
    overflow: hidden;
}
```
###### 2.flex
```
body{
    display: flex;
    flex-flow: column;
}
main{
    flex: 1;
}
```
效果一致：
![Image text](https://gitee.com/ponymym/cssdemo/raw/master/img/demo19-2.jpg)