【CSS相关】CSS布局

3.什么是层叠上下文？如何形层叠上下文？层叠顺序是怎样的？

4.如何解决inline-block 的间隙问题？

8.1 方法一：基于视口的垂直居中

9.1 方法一：text-align的center属性

# CSS基础
## 1.CSS样式（选择器）的优先级？
### 1.1 权重的计算规则
1. 第一优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。
2. 第一等：内联样式，如：style="color:red;"，权值为1000.（该方法会造成css难以管理，所以不推荐使用）
3. 第二等：ID选择器，如：#header，权值为0100.
4. 第三等：类选择器、如：.bar， 权值为0010.
5. 第四等：类型（标签）选择器和伪元素选择器，如：div ::first-line 权值为0001.
6. 通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000.
7. 继承的样式没有权值。

> [!NOTE]
> CSS选择器的优先级：!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 其他

### 1.2 实际案例
```html
<style>
    a{color: yellow;} /*权值：0,0,0,1*/
    div a{color: green;} /*权值：0,0,0,2*/
    .demo a{color: black;} /*权值：0,0,1,1*/
    .demo input[type="text"]{color: blue;} /*权值：0,0,2,1*/
    .demo *[type="text"]{color: grey;} /*权值：0,0,2,0*/
    #demo a{color: orange;} /*权值：0,1,0,1*/
    div#demo a{color: red;} /*权值：0,1,0,2*/
</style>

<body>
    <a href="">第一条应该是黄色</a> <!-适用第1行规则->
    <div class="demo">
    <input type="text" value="第二条应该是蓝色" /><!-适用第4、5行规则，第4行优先级高->
    <a href="">第三条应该是黑色</a><!-适用第2、3行规则，第3行优先级高->
    </div>
    <div id="demo">
    <a href="">第四条应该是红色</a><!-适用第5、6行规则，第6行优先级高->
    </div>
</body>
```

## 2.雪碧图的作用？
> [!NOTE]
> 减少HTTP的请求次数，提高加载的性能
> 在一些情况下可以减少图片的大小  
> 关键在于对background-position概念的理解和使用

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车特效</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .select{
            margin: 0 auto;
            display: block;
            width: 1000px;
            height: 35px;
            background-color:#F5FFFA;
        }
        div{
            width: 42px;
            height: 34px;
            background-image: url(amazon-sprite_.png);
            background-repeat: no-repeat;
            background-position: -8px -335px;
        }
        div:hover{
            background-image: url(amazon-sprite_.png);
            background-repeat: no-repeat;
            background-position: -55px -335px;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com" target='_blank' class="select">
        <div></div>

    </a>
</body>
</html>
```

## 3.自定义字体的使用场景？
> [!NOTE]
> 宣传/品牌/banner等固定文案   
> 字体图标中使用

```html
<style>
@font-face{
     font-family: '字体名称随便起'; 
     src: url('../font/字体名称.eot');
     src:url('../font/字体名称.woff') format('woff'),
         url('../font/字体名称.ttf') format('truetype'),
         url('../font/字体名称.svg') format('svg');
}
/* 使用方法：html中的代码中加一个h1或者其他的，里面写你自己想要的特殊文字 */
h1{
    font-size:36px; 
    color:#ccc;
    font-family: "字体名称随便起";
}

</style>
```

## 4.Base64的使用？
### 4.1 概念 
Base64就是一种基于64个可见字符(26个大写字母，26个小写字母，10个数字，1个+，一个 / 刚好64个字符)来表示二进制数据的表示方法。

> [!NOTE]
> 扩展：不可见字符其实并不是不显示，只是这些字符在屏幕上显示不出来，比如：换行符、回车、退格......字符。

Base64字符表中的字符原本用6个bit就可以表示，现在前面添加2个0，变为8个bit，会造成一定的浪费。因此，Base64编码之后的文本，要比原文大约三分之一
### 4.2 原理
+ 第一步，将待转换的字符串每三个字节分为一组，每个字节占8bit，那么共有24个二进制位。
+ 第二步，将上面的24个二进制位每6个一组，共分为4组。
+ 第三步，在每组前面添加两个0，每组由6个变为8个二进制位，总共32个二进制位，即四个字节。
+ 第四步，根据Base64编码对照表（见下图）获得对应的值。

> [!NOTE]
> 两个字节：两个字节共16个二进制位，依旧按照规则进行分组。此时总共16个二进制位，每6个一组，则第三组缺少2位，用0补齐，得到三个Base64编码，第四组完全没有数据则用“=”补上。因此，上图中“BC”转换之后为“QKM=”；
> 一个字节：一个字节共8个二进制位，依旧按照规则进行分组。此时共8个二进制位，每6个一组，则第二组缺少4位，用0补齐，得到两个Base64编码，而后面两组没有对应数据，都用“=”补上。因此，上图中“A”转换之后为“QQ==”；

### 4.3 作用
- 用于减少HTTP请求
- 适用于小图片
- base64编码图片之后的体积约为原图的4/3  

## 5.伪类和伪元素的区别？
- 伪元素是真的有元素
- 前者是单冒号，后者是双冒号

```html
<style>
li:first-child {
    height: 20px;
    width: 100px;
    background-color: #139aff;
}
li:last-child {
    height: 60px;
    width: 100px;
    background-color: #89ff56;
    line-height: 60px;
}
p:first-of-type {
    background-color:  red;
}
p:last-of-type {
    background-color:deeppink;
}


/*每个p标签之前新增一个Hello文本*/
.container p::before {
    content: 'Hello';
}
.container p::after {
    content: 'Thanks';
}
.container p::first-letter {
    font-size: 32px;
}
.container p::first-line {
    background-color: #f1ffad;
}

/*所有选中的元素会变色*/
.container p::selection {
    background-color: #1025ff;
    color: red;
}
</style>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
<div>
    <h1>h1文本</h1>
    <p>p文本1</p>
    <p>p文本2</p>
    <p>p文本3</p>
    <p>p文本4</p>
</div>

<div class="container">
    <p> css1 </p>
    <p> css2 </p>
    <p> css3 </p>
    <p>我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素</p>
</div>
</body>
</html>
```

## 6.如何美化CheckBox？
> [!NOTE]
> 1. label[for]和id
> 2. 隐藏原生的input
> 3. :checked + label 选择器

```html
<style>
#value1{
        display: none;
}
#value1:checked+label{
    color:blue;
    background: #4cda60;
}
#value1:checked+label:before{
    left:31px;
}
#value1+label{
    cursor: pointer;
    color:red;
    display: block;
    width:60px;
    height: 30px;
    background: #fafbfa;
    border-radius: 15px;
    position: relative;
    box-shadow:inset 0 0 0 0 #eee,0 0 1px rgba(0,0,0,0.4);
    transition: background 0.1s;
    -webkit-transition: background 0.1s;
    -moz-transition: background 0.1s;
    -o-transition: background 0.1s;
}
#value1+label:before{
    content:'';
    position: absolute;
    background: #fff;
    top:1px;
    left:1px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow:0 3px 1px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.3);
    transition: left 0.1s;
    -webkit-transition: left 0.1s;
    -moz-transition: left 0.1s;
    -o-transition: left 0.1s;
}
</style>
<body>
    <input type="checkbox" name="timeType" value="1" id="value1" checked="checked"/>
    <label for="value1"></label>
</body>
```


【CSS相关】CSS基础

1.CSS样式（选择器）的优先级？

# CSS效果
## 1.使用div绘制图形（三角形）？
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .triangle-top {
            width: 0;
            height: 0;
            border-width: 0 40px 40px;
            border-style: solid;
            border-color: transparent transparent red;
        }

        .triangle-bottom {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 40px 40px 0 40px;
            border-color: blueviolet transparent transparent transparent;
        }

        .triangle-left {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 40px 0 40px 40px;
            border-color: transparent transparent transparent #89ff56;
        }

        .triangle-right {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 40px 40px 40px 0;
            border-color: transparent yellowgreen transparent;
        }


        /*缺口的三角形*/
        .box{
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height:0;
            border: 6px solid transparent;
        }
        .b1{
            /*底层的盒子三角形相当于全部是黑色的*/
            border-bottom-color:#000 ;
        }
        .b2{
            /*上层的为白色覆盖*/
            border-bottom-color:#fff ;
        }
    </style>
</head>
<body>

<div class="triangle-top"></div>
<div class="triangle-bottom"></div>
<div class="triangle-left"></div>
<div class="triangle-right"></div>

<div class="box b1"></div>
<div class="box b2"></div>
</body>
</html>
```

## 2.如何产生一个不占空间的边框?( box-sizing属性)?
> [!NOTE]
> 知识点：IE和标准盒子模型的异同点
> ![标准盒子模型](../../img/css-标准盒子模型.jpg)
+ 标准盒子模型：元素的width或height=content的width或height；

> ![IE盒子模型](../../img/css-IE盒子模型.jpg)
+ IE盒子模型：元素的width或height=content的width或height+padding*2+border*2；

```css
    /*IE盒子模型：width_sum = margin + width*/
    .border-box-use {
        box-sizing : border-box;
        /*通过IE的盒子模型设置出来之后，这个盒子内容区域的宽度实际只有180px
            这里指定的width 实际上是包含了border的宽度的
        */
        width: 200px;
        height: 200px;

        border: 10px solid #89ff56;
    }

    /*标准盒子模型：width_sum = margin + width + padding + width*/
    .border-content-box-use {
        /*设置为标准的盒子模型，默认值*/
        box-sizing: content-box;

        width: 200px;
        height: 200px;

        padding: 1px;
        border: 10px solid #ff255f;
    }

    .parent-box-inhrit {
        /*设置当前的盒子模型是从父级盒子中继承，这里相当于是继承了IE的盒子模型*/
        box-sizing: inherit;
        width: 50px;
        height: 50px;
        background-color: #48adff;

        border: 1px solid #000;

        /*对一个元素自身设置padding，相当于是把盒子撑大了*/
        padding: 5px;
    }
```
### 2.1 使用box-shadow实现
```css
/*box-shadow 制作边框*/
.box-shadow-border {
    width: 200px;
    height: 200px;
    /*设置外阴影：x y 模糊区域 扩展区域*/
    box-shadow: 0 0 0 10px red , 0 0 0 10px blue;
}
```
### 2.2 使用outline实现
在元素边框边缘的外围绘制一条包围元素的线，包括outline-color、outline-style、outline-width三个子属性的设置，可缺省，无固定顺序。轮廓不占据页面空间，也不一定是矩形。即不会增加额外的width或者height。
```css
.borner-no-space {
    width: 200px;
    height: 200px;
    outline: 10px solid red;
}
```
## 3.如何实现IOS图标的圆角？
```css
/*clip-path的使用
            1. 对容器进行裁剪
            2. 常见集合图形
            3. 自定义路径
*/
.container-clippath {
    width: 400px;
    height: 300px;
    border: 1px solid #000;
    background-image: url("bg.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;

    /*开始进行区域裁剪*/
    /*clip-path: circle(50px at 100px 100px);*/
    /*clip-path: inset(100px 50px);*/
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    /*同时，也是支持svg矢量图的裁剪*/
}

.container-clippath:hover {
    clip-path: circle(80px at 100px 100px);
}
```

## 5.说下背景图的居中显示/重复/改变大小?
```css
background-position： 背景图片相对容器原点的起始位置
background-repeat
background-size : cover/contain(设置大小)

```
![background-position](../../img/css-background-position.png)
```css
/* 一个值: 这个值指定图片的宽度，那么第二个值为auto */
background-size: auto
background-size: 50%
background-size: 3em
background-size: 12px
 
/* 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/*多重背景，请用逗号隔开，在CSS语法中凡语法后跟*或者#，都是可以无限重复的，但是必须用逗号隔开。 */
background-size: auto, auto     /* 不要跟background-size: auto auto混淆了 */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
 
background-size: inherit
```

## 6.如何平移/放大一个元素？如何实现0.5px的边框？
> [!NOTE]
> 知识点:transform的灵活使用

```html
<style>
.custom-border{
    width:200px;
    margin:10px auto;
    height:100px;
    border:1px solid #333;
    background-color:#eee;
    padding:10px;
}
.scale-border{
    margin:10px auto;
    height:100px;
    position:relative;
    padding:10px;
    width: 200px;
}
.border{
    -webkit-transform:scale(0.5);
    transform:scale(0.5);
    position:absolute;
    border:1px solid #333;
    top:-50%;
    right:-50%;
    bottom:-50%;
    left:-50%;
    background-color:#eee;
}
.content{
    position:relative;
    z-index:2;
}
</style>

<body>
    <div class="custom-border border-color">边框宽度1px</div>
    <div class="scale-border">
        <div class="content">边框宽度0.5px</div>
        <div class="border border-color"></div>
    </div>
</body>
</html>
```

## 7.如何实现3D效果（旋转的硬币）？
```css
/* 1. 设置一个透视变换，相机距离图像的距离 */
/* perspective : 500px */
/* 2. 设置视觉查看的样式 */
/* transform-style : perspective-3d */
/* 3. 变换图像 */
/* transform : translate rotate */


/*旋转的硬币效果*/
.money {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: #48adff;
    border: 2px solid #000;

    /*开启3D效果*/

    perspective: 500px;
    transform-style: preserve-3d;
    /*transform : rotateY(180deg);*/
    animation : rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform : rotateY(0deg);
    }
    to {
        transform : rotateY(360deg);
    }
}
```


【CSS相关】CSS效果

1.使用div绘制图形（三角形）？

2.如何产生一个不占空间的边框?( box-sizing属性)?

5.说下背景图的居中显示/重复/改变大小?

6.如何平移/放大一个元素？如何实现0.5px的边框？

7.如何实现3D效果（旋转的硬币）？