# HTML-CSS

**Repository Path**: yang-yongliang/html-css

## Basic Information

- **Project Name**: HTML-CSS
- **Description**: 此仓库记录html,css(含h5,c3)的笔记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-01
- **Last Updated**: 2022-05-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

 # HTML基础
 ## 标签
 ### 单标签
 img,hr,br
 ### 双标签
 a,p ...
 * h1-h6：标题标签
 * br：换行标签
 * p ：段落标签
 * div ：没语义
 * span ：行内标签
 * img ：图片标签
 * a ：超链接
    * target="_blank"
 * base ：
    * `<base target="_blank">：所有a都是以_blank打开`
* pre:预格式化文本


 ## 路径
  * 相对路径
  * 绝对路径
 ## 锚点
 ```js
//  点击a标签跳转到p标签位置
 <a href="#content"></a>
 <p id="content"></p>
 ```
 ## 特殊字符
 * &nbsp;空格(&nbsp ;)
 * &lt;小于(& lt;)
 * &gt;大于(& gt;)

 ## 表格
 **展示数据**
```html
    <!-- 表格 -->
    <table>
        <!-- 行 -->
        <tr>
            <!-- 表头单元格 居中加粗 -->
            <th>name</th>
            <th>sex</th>
            <th>age</th>
        </tr>
        <tr>
            <!-- 列 -->
            <td>zhangsan</td>
            <td>male</td>
            <td>18</td>
        </tr>
    </table>
```
### 属性
```html
<!-- 
   border:表格边框
   width/height:表格宽高
   align：表格的对齐方式
   cellspacing:单元格的间距
   cellpadding:单元格内的padding
 -->
<table border="1" width="300" height="100" align="center"
    cellspacing="0" cellpadding="30">
    </table>
```
 ### 表格标题
 ```html
 <!-- 写在table标签里面 -->
     <caption>表格标题</caption>
 ```
 ### 合并单元格
 * 跨行合并:rowspan
 * 跨列合并:colspan
 ### 表格结构化分
 * thead **tead必须要有tr标签**
 * tbody
 * tfoot

 ## 列表
 **页面布局**
 * 无序列表：ul>li
 * 有序列表: ol>li
 * 自定义列表 :dl>dt+dd (名词解释)
 ```html
   <ul>
        <li>无序列表</li>
    </ul>
    
    <ol>
        <li>有序列表</li>
    </ol>
    <dl>
        <dt>自定义列表</dt>
        <dd>北京</dd>
        <dd>上海</dd>
        <dd>重庆</dd>
    </dl>
 ```
 ## 表单
 **收集用户信息**
### 组成
* 表单
* 提示文本
* 表单域
### 表单标签
* input
```html
  <form action="#">
        <!-- 
            type:
                text:文本
                password:密码
                radio:单选按钮
                checkbox:复选框 check="checked"选中状态
                button:普通按钮
                submit:提交按钮
                reset：重置按钮
                image图像形式的提交按钮：里面必须有src属性
                file：文件域
         -->
        <label for="">用户名：</label> <input type="text"><br>
        <label for="">密码：</label> <input type="password"><br>
        <label for="">性别：</label> 
        <label for="">男</label><input type="radio" name="sex">
        <label for="">女</label><input checked type="radio" name="sex"><br>
        <label for="">爱好：</label> 
        <label for="">睡觉</label><input type="checkbox" name="hobby">
        <label for="">打游戏</label><input type="checkbox" name="hobby"><br>
        <button>获取验证码</button> <br>
        <input type="button" value="获取验证码"><br>
        <input type="reset" value="重置内容"><br>
        <input type="submit" value="提交内容"><br>
        <input type="image" src="" value="图片形式提交内容"><br>
        <input type="file" value="上传文件"><br>
         <!-- 
             name:控件的名称，在提交表单时必须要有它才能成功
             value:表单里面默认显示的文本
          -->
        <label for="">username:</label> <input name="username" value="" type="text"><br>
        <label for="">password:</label> <input name="password" value="" type="password"><br>
        
    </form>
```
* label标签
**用于绑定一个表单元素，当点击label标签时，被绑定的过犹不及自动获得焦点**
```html
<!-- 
              1.label直接包含表单元素
              2.用for 和 id 来控制
           -->
          <label >test
              <input type="text" >
          </label><br>
        <label for="username">username:</label> <input name="username" id="username" value="" type="text"><br>
        <label for="password">password:</label> <input name="password" id="password" value="" type="password"><br>
```
* textarea文本域
**创建多行文本输入框**
* selected下拉框
```html
<select name="" id="">
      <option value="">请选择</option>
      <option value="">北京</option>
      <option value="" selected>上海</option>
</select>
```
### 表单域
`<form action="http://localhost:8000" method="post" >`
**属性我们在html中用双引号**

# CSS层叠样式表
HTML不能美化页面，所以有了css
作用：**版面布局和外观显示样式**
## 样式种类
### 行内（内联）样式
当前元素
### 内部样式
`<tr style="background:pink;">`
当前页面
```html
    <style>
        img {
            width: 20px;
            height: 20px;
        }
        tr {
            height: 40px;
        }
    </style>
```
### 外部样式
多个页面，可复用
新建一个css文件，当前页面通过link来引入
## css选择器
**把我们想要的标签选择出来**
### 基础选择器
* 标签选择器（相同的标签）
* id选择器（只选择1个特定的标签）
* 类选择器（一个或多个）
* 通配符选择器（*所有标签）
### 复合选择器

#### 复合选择器

```css
 /* 复合选择器 : 交集/并集选择 */
    /* p标签中类名为two的 */
    p.two{
        color: red;
    }
    /* span 标签和 p标签类名为two的 */
    span,p.two{font-size: 50px;}

```
#### 关系选择器

```css
/* 关系选择器  */
div>p.one,span.th{
    background-color: salmon;
}
div~div{ background-color: slategray;}
div p,span.th{
    color: green;
}
   
```



#### 属性选择器

```css
/* 属性选择器 */
p[title]{
    background-color: hotpink;
}
p[title^=abc]{
    background-color: indigo;
}
p[title$=e]{
    color: rgb(178, 73, 226);
}
p[title*=sa]{
    font-size: 40px;
}
```



#### 伪类选择器

```css
ul>li:first-child{color: brown;}
/* 选择li的同类中最后个 */
ul>li:last-of-type{font-size: 30px;}
/* 选择奇数的孩子 */
ul>li:nth-child(2n+1){
    background-color: cornflowerblue;
}
/* 除开 li中第二个孩子 */
ul>li:not(:nth-child(2)){
    font-size: 50px;
}
/* p标签的第一个字 */
p::first-letter{
    font-size: 30px;color: black;
}
/* p标签的第一行 */
p::first-line{
    color: tomato;
}
/* p标签的最后 */
p::after{
    content: 'abc';
}
```
#### 链接选择器

```css
a:link {
    color: blue;
}
a:visited {
    color: brown;
}
a:hover {
    color: tomato;
}
a:active {
    color: red;
}
```

## 元素的分类

:one:块级元素 :two:行内元素 :three:行内块元素

## 背景

```css
background-image: url(../image//咸鸭蛋英语故事.png);
background-color: pink;
background-repeat: no-repeat;
background-attachment: scroll;
/* 可以写 left center right top center bottom 
也可以写（x,y） 坐标 ： 50px center 可以混合*/
background-position: top center;
background: pink url(../image/咸鸭蛋英语故事.png) no-repeat  center center;
```

## css三大特性

:one:继承性::two:优先级 :three:权重叠加

**样式的继承**：font- line- text-开头和 color 可以继承

<img src="./typora-img/Snipaste_2022-05-02_14-50-50.png" alt="">

## 字体

* font-size:字体大小
* font-family:字体类型（多个字体用逗号分隔）
   * unicode字体
* font-weight:字体加粗
      * bold(700)
      * normal(400)
* font-style:
   * normal
   * italic斜体 
* 综合性写法
  font: font-style font-weight font-size/line-height font-family的顺序来显示
  **font: italic 700 20px "Mircosoft YaHei";**
## 外观属性
* color:文本颜色
* line-height:行高
* texg-align:**文本**水平对齐方式
* text-indent:首行文本缩进
em是倍数关系，1em是1个字的宽度。
* text-decoration：文本装饰（none/underline）
```html
 <style>
        div {
            font: normal bold 20px '宋体';
        }
        .java {
            background-color: pink;
        }
        .python {
            font-style: italic;
        }
        #link {
            text-decoration: none;
        }
        p {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div class="java">hello,java</div>
    <div class="c++">hello,c++</div>
    <div class="python">hello,python</div>
    <a id="link" href="">click me</a>
    <p>n an age where our technology gets smarter and smarter by the month, we often overlook the integral machinery that makes our computers so intuitive.Each and every time you press your PC’s power button, the BIOS is the first operation to load your operating system and all of the personal settings that make your computer your own.</p>
    <p>Each and every time you press your PC’s power button, the BIOS is the first operation to load your operating system and all of the personal settings that make your computer your own.</p>
</body>
```
## 盒子模型（重点）
* 组成：content ,padding ,border ,margin
   * border:border-width border-style border-color;
   ` border:1px solid tomato;`
```css
     table {
            width: 500px;
            margin: 0 auto;
        }
        table,
        th,
        td{
            border: 1px solid red;
            border-collapse: collapse;
        }
```
**border-top/left/right/bottom**
   * padding
```css
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
            /* 上下左右10px */
            /* padding: 10px; */
            /* 上下5px 左右10px */
            /* padding: 5px 10px; */
            /* 上5px 左右8px 下10px */
            /* padding: 5px 8px 10px; */
            /* padding-left: 5px;
            padding-left: 8px;
            padding-bottom: 10px; */
            /* 上右下左 */
            padding: 5px 6px 7px 8px;
        }
```
**当设置padding会撑开盒子**，解决：

* 1.宽度 - padding 在给盒子大小
* 2.box-sizing: border-box;
  **如果没有给一个盒子指定宽度，则不会撑开盒子**
   * margin外边距，盒子之间的距离
```css
   width: 100px;
   height: 100px;
/* 盒子水平居中对齐 */
   margin: 50px auto;
   /* 文本（行内/行内块）水平居中 */
   text-align: center;
```
**块级盒子居中对齐**：
盒子必须指定宽度，左右边距设置为auto: margin: 0 auto;
**text-align:center;文本（行内/行内块）水平居中对齐**
   * 插入图片与背景图片的区别
```css
.insert_img {
            width: 200px;
            height: 200px;
            /* 插入图片可以用padding来改变位置 */
            padding-left: 30px;
        }
        .insert_img img {
            width: 80%;
        }
        .bg_img {
            width: 400px;
            height: 200px;
            background: url('./images/宫村.png');
            /* 背景图片的显示情况  */
            background-size: contain;
            /* 背景图片padding不可以改变位置
            用background_position可以改变位置 */
            /* padding: 50px; */
            background-position: 100px;
            /* 背景图片重复不 */
            background-repeat: no-repeat;
        }
```
   * 外边距合并问题（两个相邻的块元素有外边距时）

     * 垂直外边距合并：**取两个值中较大值**--解决方法：只给一个盒子设置margin

     * 嵌套关系的外边距合并（塌陷）：

        解决方案:one:父元素设置一个透明的上边框 。:two:父元素设置个上padding

       :three:父元素添加：overflow:hidden;
<img src="./typora-img/image-20220501131312479.png" alt="">

* 案例：

  ```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>news</title>
      <style>
          * {
              /* 去除默认的内外边距 */
              margin: 0;
              padding: 0 ;
          }
          li {
              /* 去除li的小圆点 */
              list-style: none;
          }
          a {
              /* 去除下划线 */
              text-decoration: none;
          }
          .news {
              width: 350px;
              height: 230px;
              font-size: 14px;
              border: 1px solid #ccc;
              /* 盒子水平居中 */
              margin: 0 auto;
              /* 盒子内边距 */
              padding: 10px;
              /* 设置盒子大小包含边框 不会撑开盒子大小*/
              box-sizing: border-box;
          }
          .news h1 {
              font-size: 18px;
              border-bottom: 2px solid #ccc;
              margin-bottom: 10px;
          }
          .news li {
              height: 30px;
              line-height: 30px;
              background: url(./cc-arrow-right-square.png) no-repeat 0 7px;
              background-size: 5%;
              padding-left: 20px;
              border-bottom: 1px dashed #ccc;
          }   
          .news a {
              color: #666;
          }
      </style>
  </head>
  <body>
      <div class="news">
          <h1>最新文章/New Articles</h1>
          <ul>
              <li><a href="#">北京网页设计，平面设计</a></li>
              <li><a href="#">javascript 1</a></li>
              <li><a href="#">javascript 2</a></li>
              <li><a href="#">javascript 3</a></li>
              <li><a href="#">北京网页设计，平面设计</a></li>
          </ul>
      </div>
  </body>
  </html>
  ```

  

* 总结
<img src="./typora-img/image-20220501135034342.png">
 
  * 拓展：:one:圆角边框--border-radius:50%(xxpx);:two:盒子阴影——box-shadow:水平阴影 垂直阴影  模糊半径 影子大小  颜色  内（inset）/阴影；

  * **css 书写规范**
    * 空格规范
    * 选择器规范（另起一行），嵌套层不大于3层
    * 属性定义分号结束

## 浮动(float)

### 布局的三种机制：

#### 1.普通流：

#### :one:块级元素:two:行内元素

#### 2.浮动

**标准流不能满足我们的布局要求**

设置浮动的元素：:one:脱离标准流:two:元素移动到指定位置 :three:浮动的元素是没有边距行内块，（普通的inline-block是有一定的默认边距）:four:如果一行显示不下，会默认换行显示

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float</title>
    <style>
        * {
            margin: 0 ;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .box {
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            background-color: pink;
        }
        .left {
            float: left;
            width: 200px;
            height: 100%;
            background-color: purple;
        }
        .right {
            float: right;
            width: 800px;
            height: 100%;
            background-color: tomato;
        }
        .right li {
            float: left;
            width: 190px;
            height: 240px;
            margin-left: 10px;
            margin-bottom: 10px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <ul class="right">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
</body>
</html>
```
<img src="./typora-img/Snipaste_2022-05-01_15-46-49.png" alt="">

**拓展**：:one:子盒子的浮动参照父盒子对齐，:two:不会超过父盒子的内边距，也不会和父盒子边框重叠

##### 	清除浮动

**影响浮动的原因**：很多时候父元素不方便给高度，是内容来撑开，但是子元素浮动会脱离文档流，父盒子高度就为0，影响下面的标准流盒子

**清除浮动的本质**：解决父元素因子元素浮动引起高度塌陷为0 的问题，

**清除浮动方法**：:one: clear:left/right/both; （用结构来支持样式不支持做法）:two:父级添加overflow:hidden; （内容溢出会隐藏）:three:

```css
.clearfix:after,
.clearfix:before {
	content: "";
    display: block;/* display: table;*/
    clear: both;
    overflow: hidden;
}
.clearfix {
    *zoom: 1; /* 支持ie6/7*/
}
```
<img src="./typora-img/Snipaste_2022-05-01_16-34-59.png" alt="">

#### ps切图：

:one:切片工具划区域—>文件菜单—导出—导出为web—存储—选择**选中的切片** :two:图层菜单--新建基于图层的切片 —导出—导出为web—存储—选择**选中的切片** :three:cutterman插件

#### 3.定位(position)

css属性书写顺序：:one:布局定位 :two:自身属性 :three:文本属性 :four:其他属性
<img src="./typora-img/Snipaste_2022-05-01_18-56-57.png" alt="">

**小技巧**：子盒子可以比父盒子大，然后overflow:hidden;来实现装下元素不换行效果。

## 定位(position)

定位 = 定位模式 + 边偏移（left /right /top /bottom）

**子绝父相**

### 定位模式

#### 静态定位(static)

**没有定位**

#### 相对定位(relative)

**不会脱离标准流（文档流），原来 的位置还占有**

#### 绝对定位(absolute)

**不保留原来的位置,以离它最近的定位（除static）的包含块（元素）为基准，来移动**

#### 固定定位(fixed)

**脱离文档流，不占位置，而且跟父元素无任何关系，只认浏览器的可视窗口**

### 居中对齐

* 水平：:one:left:50%;margin-left:负自己宽度的一半

#### 叠放顺序（z-index)

属性值越大，盒子越靠上。

**定位改变display属性：inline-block**

**浮动元素，绝对/固定定位不会触发外边距合并问题**

**电梯导航**：:one:left:50%; :two:margin-left:负（屏幕宽度一半 + 版心宽度一半 ）

### 总结
<img src="./typora-img/Snipaste_2022-05-03_12-10-22.png" alt="">
<img src="./typora-img/image-20220503122136380.png" alt="">


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .box {
            position: relative;
            top: 0;
            width: 400px;
            height: 300px;
            margin: 100px auto;
        }
        .box img {
            width: 100%;
            height: 100%;
        }
        .arrow-l,
        .arrow-r {
            position: absolute;
            top: 50%;
            margin-top: -12px;
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            color: #fff;
            background-color: rgba(0,0,0,.3);
            border-radius: 0 10px 10px 0;
        }
        .arrow-r {
            right: 0;
            border-radius: 10px 0 0 10px;
        }
        .circle {
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -30px;
        }
        .circle li{
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            margin-left: 5px;
        }
        .circle .current {
            background-color: rgb(169, 14, 40);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/1.jpg" alt="">
        <div class="arrow-l">&lt;</div>
        <div class="arrow-r">&gt;</div>
        <ul class="circle">
            <li></li>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>
```

## css高级技巧

### 元素显示与隐藏

:one:display: none/block; (没留位置) （js中特效，鼠标经过，下拉框..）

:two: visibility: hidden/visible;（保留位置）

:three: overflow: visiible/hidden/scroll/auto; (清除浮动 ，内容不超出)

### css用户界面样式

#### 鼠标样式：
<img src="./typora-img/image-20220503135023690.png">

#### 轮廓线:

outline: none | 0;

#### 防止拖曳文本域

resize:none;

### vertical-align垂直对齐

**只对行内元素、行内块有效**

vertical-align : baseline | top | middle | bottom

去除图片底部缝隙：:one: vertical-align设置baseline外的值。:two: 设置块元素。

### 溢出的文字省略号显示

```css
/* 1.不允许换行 */
white-space: nowrap;
/* 2.超出的隐藏 */
overflow: hidden;
/* 3.省略号代替超出的部分 */
text-overflow: ellipsis;
```

### css精灵技术（重要）

**减少服务器接受和发送请求的次数，提高页面加载速度**

制作精灵图：1.确定图片的大小和位置，2.给盒子指定前景图片时，定位基本都是负值。

### 滑动门
<img src="./typora-img/image-20220503154017120.png">

### 拓展

:one:margin负值之美

水平垂直居中，2）压住盒子相邻边框：margin-left: -1px;margin-top:-1px;(负的是border边框的大小)

鼠标移动上去要突出显示的话，我们要设置当前的盒子要定位，（因为当前的位置要保留所以设置relative）,因为margin-left设置了，当前的右边框是被遮住了。

:two:css三角形之美
<img src="./typora-img/Snipaste_2022-05-03_16-04-05.png" alt="">

# HTML5
<img src="./typora-img/Snipaste_2022-05-03_17-01-42.png" alt="">

## 新增的语义标签
<img src="./typora-img/Snipaste_2022-05-03_17-05-39.png" alt="">

## 新增的多媒体标签

:one:audio
<img src="./typora-img/Snipaste_2022-05-03_17-10-20.png" alt="">

**因为不同的浏览器支持不同的格式 ，我们采取解决方案是准备多个格式**

```html
<audio controls>
    <source src="media/show.mp3" type="audio/mpeg"></source>
<source src="media/show.ogg" type="audio/ogg"></source>
</audio>
```

:two:video
<img src="./typora-img/Snipaste_2022-05-03_17-15-00.png" alt="">
## 新增的input标签
<img src="./typora-img/Snipaste_2022-05-03_17-16-55.png" alt="">
<img src="./typora-img/Snipaste_2022-05-03_17-17-48.png" alt="">

# css3

**类选择器 属性选择器 伪类选择器 权重为10**

### 伪类选择器
<img src="./typora-img/Snipaste_2022-05-03_17-24-48.png" alt="">
<img src="./typora-img/Snipaste_2022-05-03_17-26-05.png" alt="">
<img src="./typora-img/Snipaste_2022-05-03_17-27-33.png" alt="">


### 伪元素实现字体图标

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        p::after {
            content: '\e652';
            font-family: 'iconfont';
            font-size: 30px;
        }
 
    </style>
</head>
<body>
    <p class="icon-crame iconfont"></p>
</body>
</html>
```

## 2D转换(transform)

### 过渡

**过渡放在本身，谁做动画谁加transition**

### ——移动

**translate移动不会影响其它元素的位置**

translate的百分比是相对于自身来的:translate(50%,50%)

### ——旋转

```css
div {
    width: 200px;
    height: 200px;
    background-color: tomato;
    transition: all 1s;
}
/* div鼠标绕过 但是不包含son 和ipt 的div */
div:hover:not(.son, .ipt) {
    /* 移动 */
    transform: translate(200px,200px);
    /* 旋转 */
    transform: rotate(45deg);
}
.son {
    width: 100px;
    height: 100px;
    background-color: pink;
    transform: translate(50%,50%);
}
.ipt {
    position: relative;
    margin-top: 50px;
    width: 200px;
    height: 50px;
    border: 1px solid ;
    background-color: #fff;
}
.ipt::after {
    position: absolute;
    top: 5px;
    right: 10px;
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border: 2px solid red;
    border-color: red red transparent transparent;
    transform: rotate(135deg);
}
```

### 2D转换中心点

transform-origin: 50% 50% | center center默认(可以设置方位名词和px) ｜ transform-origin: left center;

### 2D转换缩放scale

transform: scale(x,y)

:one:里面写数字不带单位，是倍数的意思

:two:只写一个参数 是等比例缩放

 :three:不影响其它盒子，来实现缩放的中心点,也可以设置其它的缩放点

### 综合性写法
<img src="./typora-img/Snipaste_2022-05-03_19-09-11.png" alt="">

## 动画

:one:先定义动画（@keyframes）

:two:使用动画:animation 
<img src="./typora-img/Snipaste_2022-05-04_10-50-54.png" alt="">
<img src="./typora-img/Snipaste_2022-05-04_11-01-37.png" alt="">

**animation的简写不包含:animation-play-state**
<img src="./typora-img/Snipaste_2022-05-04_11-23-10.png" alt="">

###  热点图案例

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>animation</title>
        <style>      
            .map {
                position: relative;
                width: 400px;
                height: 400px;
                background-color: pink;

            }
            .city {
                position: absolute;
                top: 300px;
                right: 50px;
            }
            .city .addr {
                top: 310px;
                right: 60px;
                z-index: 9;
            }
            .map .city div{
                position: absolute;
                top: 50%;
                left: 505;
                width: 6px;
                height: 6px;
                transform: translate(-50%,-50%);
                border-radius: 50%;
                background-color: tomato;
            }
            .map div[class^='ring'] {
                background-color: transparent;
                box-shadow: 0 0 10px rgba(240, 110, 167, 0.826);
                animation: shine 2s linear infinite;

            }
            .map div.ring2 {
                animation-delay: .5s;
            }
            .map div.ring3 {
                animation-delay: .5s;
            }
            @keyframes shine {
                50% {
                    width: 15px;
                    height: 15px;
                    opacity: 1;
                }
                100% {
                    width: 30px;
                    height: 30px;
                    opacity: 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="map">
            <div class="city">
                <p class="addr">北京</p>
                <div class="pointer"></div>
                <div class="ring1"></div>
                <div class="ring2"></div>
                <div class="ring3"></div>
            </div>
        </div>
    </body>
</html>
```



### 行走的兔子

```css
.box {
    width: 132px;
    height: 271px;
    background-image: url(./images/day10/bigtap-mitu-queue-big.png);
    animation: walk 1s  infinite steps(3);
}
@keyframes walk {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -396px 0;
    }
}
```

## 3D转换

### translate3d:(x,y,z)

### perspective透视

 **父盒子加：      perspective: xx px;**
 <img src="./typora-img/Snipaste_2022-05-04_13-19-45.png" alt="">


### 3d旋转 rotate3d
<img src="./typora-img/Snipaste_2022-05-04_13-36-09.png" alt="">


```css
 /* z轴必须要设置了perspectiveft 才可以有效 */
  /* transform: translate3d(100px,100px,100px); */
transform: rotateX(45deg) ; 
transform: rotateY(45deg) ; 
transform: rotateZ(45deg) ; 
```

### 3d呈现 tranform-style

**tranform-style: preserve-3d;**
<img src="./typora-img/Snipaste_2022-05-04_13-49-34.png" alt="">

```css
.wrap {
    position: relative;
    width: 200px;
    height: 200px;
    transition: all 2s;
    margin: 0 auto;
    perspective: 500px;
    /* 写在父级 影响的是子元素  保持3d立体空间 */
    transform-style: preserve-3d;
}
.wrap:hover {
    transform: rotateY(80deg);
}
div[class^='box'] {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: tomato;
}
div.box2 {
    background-color: purple;
    transform: rotateX(45deg);
}
```

```css
.wrapper {
    margin: 100px auto;
    position: relative;
    width: 100px;
    height: 30px;
    perspective: 800px;
    transition: all 1s;
    transform-style: preserve-3d;
}
.wrapper:hover {
    transform: rotateX(90deg);
}
.front,
.back { 
    position: absolute;
    top: 0;
    left: 0 ;
    width: 100%;
    height: 100%;
    text-align: center;
}
.front {
    z-index: 1;
    background-color: pink;
    transform: translateZ(50%);
}
.back {
    background-color: purple;
    transform: translateY(50%) rotateX(-90deg);
}
```

### 练习

```css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes run {
    from {
        transform: rotateY(0);
    }
    to {
        transform: rotateY(360deg);
    }
}
.cube {
    position: relative;
    margin: 100px auto;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    perspective: 1400px;
    animation: run 10s linear infinite;
}
.cube div[class^="box"] {
    position: absolute;
    top: auto;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(./images/宫村.png) no-repeat center;
    background-size: contain;
}
.box1 {
    transform: translateZ(300px) ;
}
.box2 {
    transform: rotateY(60deg) translateZ(300px);
}
.box3 {
    transform: rotateY(120deg) translateZ(300px);
}
.box4 {
    transform: rotateY(180deg) translateZ(300px);
}
.box5 {
    transform: rotateY(240deg) translateZ(300px);
}
.box6 {
    transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<div class="cube">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</div>
</body>
</html>
```



## 浏览器私有前缀
<img src="./typora-img/Snipaste_2022-05-04_16-52-56.png" alt="">

# 移动端布局

**移动端现在主要对webkit进行兼容**

## 视口

浏览器页面内容的屏幕区域，

:one:  布局视口：内容可以显示全，但是内容太小

:two:视觉视口:  网站的宽度

:three:**理想视口**：布局视口的宽度和手机屏幕一样宽，添加meta标签

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
```

## 二倍图

### 物理像素：

屏幕显示的最小颗粒

### 物理像素比：

1px可以显示的物理像素点的个数，

pc端是1比1：移动端是1比多。（我们就要准备几倍图，然后缩小，他在移动端会自动放大就不会模糊）

## 移动端开发选择

### 单独移动端

:one:支持webkit，可以放心用h5,c3

:two:用normalize.css来初始化

#### 流式布局（百分比）

不用给宽度，而是用百分比来指定， 我们用max-width,min-width来限制它最大｜小宽度

```html
1.文件结构
2.meta视口标签
3.设置body: width:100%; min-width:320px; max-width:640px;margin: 0 auto; font-size:14px;
```
<img src="./typora-img/2022-05-06_20-47-08.png" alt="">

#### flex弹性布局

#### less + rem + media

#### 混合布局

 **移动端技术解决方案**
 <img src="./typora-img/Snipaste_2022-05-06_19-38-30.png" alt="">

### 响应式

**判断屏幕宽度来改变样式**

#### media

#### bootstarp

## flex布局

flex操作方便，布局简单，兼容性较差。

**任何的容器都可以设置为flex布局，当设置flex布局后，子元素的float,clear,vertical-algin属性将失效。**

### flex容器：采用flex布局的元素

### flex项目：flex item

### flex-direction

设置主轴的方向

### justify-content:

设置主轴的子元素排列方式

### flex-wrap

设置子元素是否换行

### align-content

设置侧轴的子元素排列方式（多行）

### align-items

设置侧轴的子元素排列方式（单行）

### flex-flow

复合属性： flex-direction + flex-wrap

-----------子项的属性

### flex

子项目占剩余空间的份数

### align-self

控制自己在侧轴的排列方式

### order

定义子项目的排列顺序

### 背景渐变

```css
background: -webkit-linear-gradient(left , red, blue);
```

## rem适配方案

作用：:one:文字随屏幕大小变化 :two:高度可变化 :three:屏幕变化宽高等比例缩放

rem: root em 根据html字体大小来说 ，可以修改html里面的文字大小来整体控制

em相对于父元素字体大小

## 媒体查询

针对不同尺寸设置不同的样式，重置浏览器过程中可重置样式。

**媒体查询一般从小到大顺序来**

```css
@media screen and (max-width:800px) {
    body {
        background-color: pink;
    }
}
//max-width:最大800px min-width:最小宽度
```

### 引入资源 

根据不同的屏幕引入不同的css文件。

```html
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
```

## 响应式Bootstrap

原理：不同屏幕下，通过媒体查询来改变布局容器的大小，来实现不同样式变化

container
row

* row可以取消父元素的padding，并设置高度种父级一样高
col-lg-number: number 1~12
col-md-number
col-sm-number
col-xs-number
* 列偏移number份 偏移为12减 已有盒子份数
col-md-offset-number

<!-- 列排序 -->
col-md-pull-number
col-md-push-number

```html
<div class='row'>
    <div class='col-lg-4' col-lg-push-8>左侧</div>
    <div class='col-lg-8' col-lg-pull-4>右侧</div>
</div>
```
* 响应式工具：实现不同屏幕下的显示与隐藏
hidden-xs:超小屏下隐藏
hidden-sm
hidden-md
hidden-lg

visible-xs:超小屏下显示
visible-sm
visible-md
visible-lg