week3 总结

1、表单

1. 单行文本框
   <input type="text">
2. 密码框
   <input type="password">
3. 单选框
   <input type="radio" name>
   单选框name必须一致
   默认选中 checked="checked" | checked
   默认不能选中 disabled="disabled" |disabled
4. 多选框
   <input type="checkbox" checked>
5. 下拉

<select name="" id="">
<option value=""></option>
<select>

6. 多行文本输入框|文本域：
   <textarea name="" id="" cols="30" rows="10"></textarea>
7. 文件
   <input type="file">
8. 邮箱
   <input type="email">
9. 颜色
   <input type="color">
10. 数字
    <input type="number">
11. 滑块
    <input type="range">
12. 日期

<input type="date">
<input type="month">
<input type="week">

13. 电话
    <input type="tel">
14. 时间
    <input type="time">
15. 按钮
    <input type="button">
<button><button>
    button有提交作用
16. 重置
    <input type="reset">
17. 提交
    <input type="submit">
18. 表单字段级：

        <fieldset>
            <legend>表单字段级</legend>
        </fieldset>

19. 表单属性值
20. action：设置提交地址
21. method：
    1. post：提交内容；相对安全
    2. get：获取内容；相对危险
22. name：告诉计算机是谁提交的

2、块级格式化上下文（BFC）

1. 概念：BFC可以作为一个独立的盒子，无论内部怎么变化，不影响盒子外部的变化
2. 触发条件
   1. 根元素html可以作为一个BFC
   2. float值不为none、单纯的div不是BFC，加了浮动后可以算作一个BFC
   3. overflow的值不为visible、单纯的div不是BFC，如果添加了overflow:hidden后可以算作一个BFC
   4. display的值为inline-block、table-cell、table-caption、flex、inline-liex
   5. position值为absolute或fixed

3、应用场景

1. 浮动引发的高度塌陷
   1. 原因

子元素添加浮动脱离文档流，父元素不能用子元素撑起来

2. 解决方法：
   1. 给父元素添加高度
   2. 给父元素添加**overflow:hidden;**
   3. 隔墙法：

给父元素添加最后一个子元素，再给子元素定义clear:both;

  4. 伪元素：		

ul::after{
  content:"";
  diaplay:block;
  clear:both;
}

2. 垂直外边距合并问题
   1. 垂直上边距上边距问题
      1. 引发：给父元素的以一个子元素添加margin-top，默认添加到父元素上
      2. 解决：
         1. 给父元素加border
         2. 给父元素加**overflow-hidden**；
   2. 垂直外边距下边距合并
      1. 引发：两个上下的盒子，给上边盒子添加margin-bottom；给下边盒子添加margin-top
      2. 解决：
         1. 创建BFC（块级格式化上下文） ——创建一个父级
         2. 给父元素添加overflow-hidden；

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            height: 600px;
            width: 600px;
            background-color: #ccc;
            overflow: hidden;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 30px;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: rgb(41, 86, 138);
        }
        .box3{
            height: 200px;
            width: 200px;
            background-color: aquamarine;
            margin-bottom: 30px;
        }
        .box4{
            height: 200px;
            width: 200px;
            background-color: rgb(170, 193, 210);
            margin-top: 20px
        }
        p{
            overflow: hidden;
        }
    </style>

    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>

    <p>
       <div class="box3"></div> 
    </p>
    <p>
        <div class="box4"></div>
    </p>
    

3. 阻止元素浮动覆盖问题（两栏布局模式、三栏布局模式）
   1. 两栏布局：先写宽度固定的子元素，并添加浮动；剩下的元素添加overflow:hidden;
   2. 三栏布局：先写宽度固定的两个元素添加左右浮动；剩下的元素添加overflow:hidden;

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            background-color: #ccc;
        }
        /* .left{
            width: 600px;
            height: 200px;
            float: left;
            background-color: red;
        }
        .right{
            background-color: palegreen;
            height: 400px;
            overflow: hidden;
        } */
        .left{
            height:600px;
            background-color: red;
            overflow: hidden;
        }
        .right{
            width: 500px;
            height: 200px;
            background-color: palegreen;
            float: right;
        }
    </style>
    <div class="box">
        <!-- <div class="left"></div>
        <div class="right"></div> -->
        <div class="right"></div>
        <div class="left"></div>
        
    </div>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1300px;
            background-color: #ccc;
            margin: 0 auto;
            overflow: hidden;
        }
        .left{
            width: 200px;
            height: 200px;
            float: left;
            background-color: aqua;
        }
        .right{
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            float: right;
        }
        .center{
            height: 600px;
            background-color: yellow;
            overflow: hidden;
        }
    </style>
    <body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
        
    </div>
</body>

4、元素隐藏

1. 隐藏方式
   1. display:none; 不占位
   2. opacity:0; 占位、透明度改变
   3. visibility:hidden|visible; 占位
   4. transform:scale(0); 占位、转变（缩小0）

5、calc函数

1. 作用：用于动态计算长度值
2. 函数：calc()
3. 注意：运算符前后都需要保留空格如：width: calc(100% - 10px)；

6、iframe

1. 作用：在网页中插入第三方页面，
2. 语法：<iframe src="" frameborder="0" width="" height="" name="" scrolling="yes/no/auto"></iframe>
3. 注意：<a href="" target="iframe的name属性值"></a>表示超链接的目标地址在框架中打开

7、h5新增标签

1. 头部：<header></header>
2. 导航：<nav></nav>
3. 尾部：<footer></footer>
4. 内容块：<section></section>
5. 辅助信息：<aside></aside>
6. 文章：<article></article>
7. 媒体文件引入：<embed src=""></embed>
8. 独立内容块：<figure> <figcaption>这个是熊大小动物</figcaption> <img src="xiongda.png" /></figure>
9. 高亮显示文字：<mark></mark>
10. 标题组：<hgroup></hgroup>
11. 对话框：<dialog open>这是打开的对话框</dialog>
12. 定义图形：<canvas></canvas>

8、视频标签

1. 标签：<video src="" controls muted autoplay></video>
2. 播放控件：
   1. 播放进度条 controls
   2. 静音播放 muted="muted"|muted
   3. 自动播放 autoplay="autoplay"|autoplay
   4. 循环播放 loop="loop"loop
   5. 播放前预加载图片 poster="路径"
   6. 视频格式
      1. 书写type="video/mp4"
      2. 视频后缀名：
         1. .mp4（兼容性最好）
         2. .ogg（苹果）
         3. .mov
         4. .webm（）

9、音频标签

1. 标签：
2. 播放控件：
   1. 播放进度条 controls
   2. 自动播放 autoplay="autoplay"|autoplay
   3. 循环播放 loop="loop"loop
   4. 音频格式
      1. 书写type="aideo/mp3"
      2. 音频后缀名：
         1. .mp3（兼容性最好）
         2. .ogg（苹果）
         3. .mav

10、HTML5新增表单type属性值

1. 邮箱：<input type="email">
2. url：<input type="url">
3. 数字：<input type="number" min="" max="" step="">
4. 滑块控件：input type="range" min="" max="" step
5. 日：<input type="date">
6. 月：<input type="month">
7. 周：<input type="week">
8. 时间：<input type="time">
9. 本地时间：<input type="datetime-local">
10. UTC时间：<input type="datetime">

11、表单新增属性

1. required：必填内容，内容不能为空
2. autofocus：自动聚焦，一个一面只能有一个焦点；如果有多个autofocus的显示，优先显示第一个
3. placeholder：默认提示文字
4. main：最小 只能在number和range上使用，
5. max：最大 只能在number和range上使用，
6. step：步进值 只能在number和range上使用，
7. pattern：可以写正则表达式规定所输入的内容；点击提交时才会进行正则判断
8. multiple：上传多个文件，只能给file添加
9. novalidate：取消表单验证，添加给form；required不起作用
10. list：模拟下拉菜单
11. 创建一个普通text类型的input，给input添加list属性

<input type="text" list="">

2. 创建一个数据列表

<datalist></datalist>

3. 给数据列表起id名称

<datalist id="caidan">
<option value="百度" lable="baidu"></option>
</datalist>

4. 把id名赋值给list属性

<input type="text" list="caidan">

11. autocomplete：自动提示，在使用时，必须添加name属性

12、浏览器前缀

1. -ms-：浏览器
2. -moz-：火狐浏览器
3. -o-：欧朋浏览器
4. -webkit-：谷歌或safari

13、阴影

1. 盒子阴影
   1. box-shadow:10px 20px 13px #ccc;
   2. 盒子阴影：水平方向阴影大小 垂直方向阴影大小 模糊度 颜色
   3. 阴影可以写多个，中间用逗号隔开
2. 文字阴影
   1. text-shadow:10px 20px 13px #ccc;

14、字体库

1. 引入： @font-face{ font-family: "字体自定义的名称"; src: url(); }
2. 应用：{ font-family: "字体自定义的名称"; }

15、背景图片

1. 背景图片

{
    background-image：URL();
    background-repeat:no-repeat|repeat|repeat-x|repeat-y;
    background-position:x y; top left rgiht bottom center 
    background-size:width height;
}

2. 简写：background:red url() no-repeat center / cover;
3. 背景图片大小：
   1. cover：把背景图片扩展至足够大，使背景图像完全覆盖背景区域
   2. contain：把图像扩展至最大的尺寸，使其宽高完全适应内容区域
   3. 背景图片固定：background-attachment: fixed;

16、精灵图（雪碧图）

1. 优点：
   1. 减少http请求次数
   2. 方便更换风格
   3. 维护方便
2. 缺点：
   1. 量取麻烦（x,y）
   2. 位置不允许改变
3. 写法：

background:url() no-repeat x y

4. 注意：
   1. 盒子大小一定要精准
   2. 背景图一定不能定义大小
   3. 位置x,y是负数

17、字体库引入

1. css样式添加3个文件：.css文件、.woff文件、.woff2文件
2. link引入：<link rel="stylesheet" href="css/iconfont.css">
3. 使用：
   1. .html文件中图片名称：<div class="iconfont icon1"></div>
   2. .css文件中图片名称：<div class="iconfont icon-shouji"></div>

18、颜色渐变

1. 线性渐变

background: linear-gradient(rgb(5, 5, 167),rgb(155, 164, 211),rgb(36, 36, 77));

1. 改变方向：
   1. background: linear-gradient(to right, rgb(5, 5, 167),rgb(155, 164, 211),rgb(36, 36, 77)); ——从左往右
   2. background: linear-gradient(to top, rgb(5, 5, 167),rgb(155, 164, 211),rgb(36, 36, 77)); ——从下往上
   3. background: linear-gradient(to left, rgb(5, 5, 167),rgb(155, 164, 211),rgb(36, 36, 77)); ——从右往左
   4. background: linear-gradient(to bottom, rgb(5, 5, 167),rgb(155, 164, 211),rgb(36, 36, 77)); 从上往下
2. 兼容性：

background: -moz-repeating-linear-gradient(rgb(5, 5, 167),rgb(155, 164, 211),rgb(36, 36, 77));
            background: -o-repeating-linear-gradient(rgb(5, 5, 167),rgb(155, 164, 211),rgb(36, 36, 77));
            background: -webkit-repeating-linear-gradient(rgb(5, 5, 167),rgb(155, 164, 211),rgb(36, 36, 77));
            background: -ms-repeating-linear-gradient(rgb(5, 5, 167),rgb(155, 164, 211),rgb(36, 36, 77));
            background: linear-gradient(rgb(5, 5, 167),rgb(155, 164, 211),rgb(36, 36, 77));

3. 改变角度：最好添加兼容性写法
   1. background: linear-gradient(60deg, rgb(5, 5, 167),rgb(155, 164, 211),rgb(36, 36, 77));
4. 透明渐变：
   1. background: linear-gradient(rgba(5, 5, 167,.5),rgba(155, 164, 211,.5),rgba(36, 36, 77,.6));
5. 重复渐变：
6. 径向渐变:
   1. 默认写法

background: radial-gradient(rgb(61, 61, 79),rgb(155, 164, 211),rgb(57, 18, 232));

2. 改变方向：（添加兼容性）

background: -webkit-radial-gradient(left, rgb(61, 61, 79),rgb(155, 164, 211),rgb(57, 18, 232));
        background: -ms-radial-gradient(left, rgb(61, 61, 79),rgb(155, 164, 211),rgb(57, 18, 232));
        background: -o-radial-gradient(left, rgb(61, 61, 79),rgb(155, 164, 211),rgb(57, 18, 232));
        background: -moz-radial-gradient(left, rgb(61, 61, 79),rgb(155, 164, 211),rgb(57, 18, 232));
        background: radial-gradient(left, rgb(61, 61, 79),rgb(155, 164, 211),rgb(57, 18, 232));

3. 改变形状：div { background: radial-gradient(circle, red, yellow, green); }
   1. circle：渐变为最大的圆形
   2. ellipse：根据元素性状改变
4. 多颜色节点不均匀分布：div { background: radial-gradient(red 5%, green 15%, blue 60%); }
5. 不同尺寸的渐变：
   1. div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); }
   2. 分类：
      1. closest-side：最近边
      2. farthest-side：最远边
      3. closest-corner：最近角
      4. farthest-corner：最远角
6. 重复渐变
   1. 重复性线性渐变：div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }10%的位置为yellow，20%的位置为green，然后按照这30%向下重复
   2. 重复性线性渐变：div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }

19、过渡

1. 写法：transition:all 5s linear 3s
2. 属性：
   1. transition-property：检索或设置对象中的参与过渡的属性
   2. transition-duration：检索或设置对象过渡的持续时间
   3. transition-delay：检索或设置对象延迟过渡的时间
   4. transition-timing-function：检索或设置对象中过渡的动画类型
3. 贝塞尔曲线
   1. 属性值：cubic-bizier()
4. 逐帧动画：transition-timing-function:steps(执行步数)

20、2D属性（transform）

1. 位移：
   1. 属性值：translate()
   2. 方向：
      1. x轴：transform:translateX
      2. y轴：transform:translateY
2. 缩放：
   1. 属性值：scale()
   2. 值：
      1. （0,1） 缩小
      2. 1 不变
      3. （1~+∞） 放大
      4. 0 消失
      5. （-1,0） 缩小倒影
      6. （-∞，-1） 放大倒影
3. 旋转：
   1. 属性值：rotate
   2. 值：
      1. x轴旋转：transform：rotateX();
      2. y轴旋转：transform:rotateY();
4. 拉伸：
   1. 属性值：skew
   2. 参数：
      1. 一个参数：水平方向的倾斜角度
      2. 两个参数：第一个表示水平方向倾斜角度，第二个表示竖直方向的倾斜角度
5. 变形点：transform-origin

21、3D变换

1. 景深
   1. 属性：perspective-origin
   2. 数值：通常在900~1200，数值越小，效果越明显
   3. 建议只设置父元素
2. 3d属性
   1. 属性：transform-style
   2. 属性值：
      1. flat：默认值，2d展示
      2. preserve-3D：所有子元素3D展示
3. 3D位移

translate3d(tx,ty,tz)
tx：横向左边位移长度
ty：纵向坐标位移长度
tz：z轴位移长度

4. 3D旋转

rotate3d(x,y,z,a)
x：0~1，绕x轴旋转的矢量值
y：0~1，绕y轴旋转的矢量值
z：0~1，绕z轴旋转的矢量值
a：角度值 为正，顺时针旋转；为负，逆时针旋转

5. 3D缩放

scale3d(sx,sy,sz)
sx：横向缩放比例
sy：纵向缩放比例
sz：x轴缩放比例

22、帧动画

1. 创建动画：

@keyframes mymove{ from{初始状态属性}
                  to{结束状态属性}
                 }
或
@keyframes mymove{
  0%{初始状态属性}
  100%{结束状态属性}
}（中间再可以添加关键帧）

2. 属性
   1. animation
      1. animation-name设置对象（即创建的动画的名称）
      2. animation-duration设置动画的持续时间
      3. animation-timing-funcition设置动画的过渡类型
      4. animation-delay设置动画的延迟时间
      5. animation-iteration-count设置动画的循环次数
         1. infinite：无限循环
         2. number：设置次数
      6. animation-direction设置动画循环中的方向
         1. normal：正常方向
         2. reverse：反方向
         3. alternate：先正后返持续交替
         4. alternate-reverse：先反后正持续交替
      7. animation-play-state设置动画的状态
         1. running：运动
         2. paused：暂停，鼠标移上去开始运动

23、怪异盒模型

1. 盒模型
   1. 组成：margin+border+padding+content
   2. 宽高：
      1. 宽度：width+左右padding+左右border
      2. 高度：height+上下padding+上下border
2. 怪异盒模型
   1. 属性：box-sizing:border-box;标准盒模型转化为怪异盒模型
   2. 宽度：padding+border+width 值是初始定义的宽度，自动压缩

24、权重

选择器	值
标签选择器	1
class选择器	10
id选择器	100
行内权重	1000
属性选择器	10
伪元素选择器	1
继承样式	0