刘哲 笔记

水平居中

 	margin的左右方向可以设置自适应auto，这样他所修饰的块属性标签
    就会在水平方向上自动居中
    注意：auto只能控制水平方向居中，不能控制垂直方向的自动居中

    margin：0 auto；
    
    auto的原理 
    auto 的值=（父元素的宽度-当前的宽度）/2

浮动

    浮动的原理：设置浮动的元素超出文档流.
    文档流：就是元素从上到下 从左到右的布局顺序

    浮动的作用：从整体出发，把标签元素进行横向布局

    使用inline-block横向布局的弊端：
    1  元素之间有缝隙
    2  低版本浏览器不支持 inline-block

    浮动的特点：
        1  浮动元素超出文档流
        2  块属性标签浮动后，不再独占一行空间，如果不设置宽高，
        则他的宽高由内容撑开
        3  块属性标签浮动后，他的margin属性的auto值失效
        4  行属性标签浮动后，可以设置宽和高，并且支持上下padding和
        上下margin

清浮动

	当子级元素进行浮动的时候，他的父元素会产生影响，由于浮动元素脱离文档流，
    父元素没有被子元素撑开，导致父元素没有高度，在布局的时候会产生混乱

    清楚浮动产生的影响（清浮动）
    1  给浮动元素的父级添加overflow：hidden
    2  给父元素设置指定高度，确保布局正确
    3  给父元素添加display:inline-block ,该方法兼容性差
    4  给父元素添加浮动,可能会影响布局
    5  设置一个空标签，在空标签中设置属性
        .clear{
            clear:both;
            /* 防止ie低版本具有默认高度*/
            height:0;
            overflow:hidden;
        }
    6  通过after伪元素清浮动
        .clearfix::after {
        content: '';
        display: block;
        height: 0px;
        overflow: hidden;
        clear: both;
    }

精灵图

	精灵图，又叫sprite（雪碧图）
    他是把在项目开发中所有用到的小图标拼合到一个图片上，这样在项目加载的时候
    ，一次性的把小图标请求到客户端，减少了http请求，减轻服务器压力，优化项目，
    提高了服务器效率

定位

	原理：定位的元素超出文档流

    什么时候需要用到定位？
    在同一块文档流的区域内，需要同时叠放多个标签

    定位的流程：
    1  通过position属性设置定位的参照物
    2  通过方位属性设置具体方位数据，方位属性有 top
    ，left，right，bottom 他是用来设置距离参照物有多远

    他们的优先级是 left>right
                  top>bottom

    position 属性的值
        static relative absolute fixed
    static  静态定位，无参照物，不定位
    relative  相对定位，以元素原位置为参照物
    absolute  绝对定位，以当前元素的具有定位属性的祖先级
    元素为参照物，此祖先元素必须有position: absolute;或者
    position: relative;若没有则参照物为body
    fixed  固定定位，相对于浏览器窗口定位

定位特点

	 相对定位的特点：
    1  相对定位是基于元素原来的位置进行定位
    2  元素相对定位以后，对元素本身没有任何影响
    3  元素设置了相对定位以后，虽然元素脱离文档流，但是
    元素本身的位置依然占据文档流的空间
    4  相对定位的元素，天然的提升层级，比没有定位的元素层级高
    5  相对定位的元素，可以通过left top bottom right 改变元素
    位置

    绝对定位的特点：
    1  设置了绝对定位的元素会脱离文档流，不占据文档流空间，并且
    提升层级
    2  行元素设置了绝对定位以后，可以设置宽高，可以设置上下padding
    和上下margin，如果不设置宽高，宽高由内容撑开
    3  块元素设置了绝对定位以后，自动的margin消失，如果不设置宽高
    ，宽高由内容撑开
    4  绝对定位是相对于他的第一个具有定位属性的祖先元素进行定位
    ，如果不存在这样的元素，则相对于document（文档）定位。具有定位的祖先
    元素，一般要有relative和absolute其中的一个定位属性
    5  一般的，如果设置了绝对定位，那么他们的父元素需要有一个固定的高

    固定定位的特点
    1  固定定位相对雨浏览器窗口定位
    2  固定定位脱离文档流

定位的层级

	不做特殊设置的时候，
    定位元素的层级比非定位元素的层级高
    定位元素后来者居上

    使用z-index 设置定位的层级，如果设置该属性，则默认为0
    如果z-index 的值相同，则还是后加载的元素高于先加载的元素
    如何不同 ，值越大层级越高

透明度

	transparent 透明色
    opacity:设置元素的透明度，可以使整个元素透明，包含元素里面所有的内容
    取值范围 0-1，0为完全透明  1为不透明

    行元素在垂直方向的对齐方式
    vertical-align
    值：
    top  顶部对齐
    middle  中间对齐
    baseline  基线对齐
    bottom  底部对齐
    vertical-align 只能使用在行元素或者内联元素（inline-block）上，不能使用
    在块元素上

    使用方式
    1  如果父元素的高度由其中一个子元素撑开，那么给其他元素设置vertical-align
    ：middle 就可以实现居中效果
    2  如果父元素高度固定，不是子元素撑开高度，则可以添加一个自定义标签，该标签的
    高度为父元素高度，然后设置vertical-align: middle;和display: inline-block;
    就可以使父元素的内容居中

    vertical-align 也可以用来解决img 标签的缝隙

表格

	table 表示表格
    表格的作用：
    1  在之前可以使用表格进行布局
    2  作为列表来显示数据

    一个表格使用 thead，tbody和tfoot组成，这三个标签可以不写，
    浏览器会自动添加

    想要创建一个表格，可以使用以下标签
    table ：表示当前创建一个表格
    tr ：表示表格中的一行
    th ：表示表格的一个单元格，一般是表头
    td : 表示表格的一个单元格，一般代表内容

    以上标签都是块标签

    给table添加border属性，设置边框
    cellspacing 设置单元格和单元格之间的距离
    cellpadding 设置单元格和边框之间的距离

    合并单元格
    colspan 合并列（横向合并）
    rowspan 合并行（竖向合并）

    width 设置表格的宽度，可以是具体的值，也可以是百分比
    height 设置表格的高度，可以是具体的值，也可以是百分比

    以上 width height属性，可以设置到table td th上 width影响的
    是一列，height影响的是一行
    
    使用border-collapse 设置单元格的边框是否合并
    border-collapse:collapse；合并
    border-collapse:separate；不合并

form表单

	form 标签，表单，可以用来提交数据
    form 是一个块标签
    action 属性，数据要提交到的服务器地址，一般是接口地址
    method属性，数据的提交方式
        他的值有
            get post put delete 等

        get:get请求可以把数据拼接到接口地址的url上，缺点是
        不安全，提交的数据较少
        post：post请求，在post提交的数据信息中，不会看到提交
        的数据结构，相比较get是安全的，并且提交的数据较大

    label 标签，行标签，经常和input搭配使用，表示input的标题
    input 标签，行标签，输入框，常用于表单输入
        type属性，用来设置输入框的类型
            属性值
            text 文本输入框
            password 密码输入框
            button 普通按钮
            submit 提交按钮
            reset 重置按钮
            radio 单选框
            checkbox 多选框
            hidden 隐藏框
            file提交文件
            number输入数字

    value属性，设置input的值
    name属性，对于界面显示没有任何影响，主要用于数据交互，实质上name的值
        既是后台数据的字段名

    placeholder属性，输入框的提示信息
    maxlength 属性，输入字符最大长度

    单选框和复选框的默认选中，只需要在input上设置checked属性即可

    禁用某一个input标签，只需要input添加disabled属性即可

    给某一个输入框添加只读属性readonly，确保该输入框内容可以通过程序修改，
    并且能提交到后台

    disabled和readonly的异同
    1  他们都不能手动修改
    2  disabled的值不能提交和使用，readonly的值可以提交到后台

表单标签

	    设置textarea
        通过css的resize属性，设置拖拽的方向

        horizontal 横向拖拽
        vertical 纵向拖拽
        both 双向拖拽
        none 不拖拽
        input属性,input虽然是行，但是可以设置宽高
        minlength 最少字符数
        required 设置为必填项
        
        type属性
        file提交文件
        number输入数字

    select 下拉框 行标签
        他的子级必须是 option标签，每一个option标签表示一个选项
        ，option具有value属性
    fieldset 创建一个组
        legend 组的标题
    textarea 多行文本输入框
        属性
            rows 设置具有多少行
            cols 设置具有多少列 

h5新标签

	h5新特性有哪些
    1  新增了很多语义化标签
    2  废弃了一些css修饰和html标签
    3  支持本地持久化数据
    4  增加了音视频标签的api
    5  提供了canvas画布及其api

    H5各种功能较新，低于ie9的浏览器支持的功能不够全面，建议使用ie9
    及其以上的浏览器
    常用于能量的使用或者内容的使用量 
属性
    value 当前电量的值
    max 最大值
    min 最小值
    low 用电量最低报警值
    high 用电量最高报警值

当前标签中的文字，只有在浏览器不支持的时候会被渲染出来

进度条标签
    只有最大max属性
    没有min属性
    value属性是当前值
    
	ruby标签
    常用来做拼音，注释，注音等
    rt 表示注释内容
    rp 如果浏览器不支持，显示的内容

	 datalist 数据列表
     通过input的list属性和datalist的id属性进行绑定

     datalist中的选项使用option标签
     通过datalist可以制作关联查询效果
     sup 上角标
     sub 下角标

     常用于注释
     details 展示内容标签，自带折叠效果
     summary 标签是details的标题

audio属性

     audio 标签，用来播放音频文件，支持mp3 ogg wav类型的文件
        属性
            controls  控制是否出现播放的控制条
            autoplay  控制自动播放
            loop  循环播放
            muted  静音
            preload  设置预加载
                值：auto  默认值，在整个网页加载之后立即加载音频文件
    metadata  只加载音乐的源文件
   none  不加载，可以用它来减少服务器压力
   如果设置了autoplay，则可以不设置preload，默认即可
    audio结合source标签 做音频播放兼容效果
    source 专门用来解决不同浏览器对不同浏览器格式的支持问题，做兼容
    video视频播放标签，支持MP4，ogg，webm格式
    controls  控制是否出现播放的控制条
    autoplay  控制自动播放
    loop  循环播放
    muted  静音
    width  视频播放区域的宽度
    poster  视频的封面

input标签

	普通的input的type类型
    text  password  hidden  button submit  reset  radio
    checkbox  file  number  button

    input属性
        autofocus 自动获取光标，自动聚焦

         <!-- email 约束输入内容为邮箱 -->
        邮箱：<input type="email" value="" autofocus><br>
        <!-- url 约束输入内容为网址 -->
        网址：<input type="url" value=""><br>
        <!-- number 约束输入内容为数字 
            step属性为，每次的步长
        -->
        数字：<input type="number" value="" step="10"><br>
        <!-- color 取色器 -->
        取色器：<input type="color" value=""><br>
        <!-- range 滑杆
            min 最小值
            max 最大值
            value 当前值
        -->
        滑杆：<input type="range" value=""><br>

        <!-- image 图片提交按钮 -->
        <input type="image" src="" width="100"><br>
        <!-- date 显示日期 -->
        日期：<input type="date" value=""><br>
        <!-- 显示日期到月 -->
        日期：<input type="month" value=""><br>
        日期：<input type="week" value=""><br>
        <!-- 设置时间 -->
        时间：<input type="time" value=""><br>

        <input type="datetime-local" value=""><br>

        <input type="submit" value="提交">

h5新增布局标签

    header  指的是页面的头部区域，要和head标签区分
    footdr  页面的底部区域
    nav  导航区域
    aside  侧边栏区域
    section  一个独立的区域，类似于div
    article  他一般包含在section中，使用article包裹一段独立的内容

单位

	em 相对单位，他是font-size单位的倍数
   可以理解为子级设置长度或者尺寸的时候，可以使用em
   作为单位，若没有则为父级font-size的倍数

    rem 相对单位，在html标签上设置一个font-size 作为整个页面
        的root，在设置所有标签尺寸的时候可以直接使用以html设置的字号
        大小为根字号，即为1rem
    rem 常用于移动端开发

    vh/vw vh是view-height 视窗的高度 
          1vh=视窗的高度*1%

    css的最大最小属性
    min-height：最小高度
    max-height：最大高度
    min-width：最小宽度
    max-width：最大宽度

弹性布局

	弹性布局
    1  他是css3推出的布局方式
    2  低版本浏览器不支持
    3  所有移动端都支持

    设置弹性容器（弹性盒子）
    块  弹性容器：display：flex；
    行  弹性容器：display：inline-flex；
    一般行不会设置弹性容器

    设置弹性布局，只需要给父容器设置display：flex；

    flex-direction 设置主轴方向
        row：默认值，主轴为水平方向，起点在左边
        row-reverse：主轴为水平，起点在右边
        column：主轴为垂直方向，起点在上面
        column-reverse：主轴为垂直方向，起点在下面

    flex-wrap： 设置子元素是否换行
        nowrap：默认值，子元素可能会被压缩
        wrap：换行，行的起点在上面
        wrap-reverse：换行，行的起点在下面

    以上两个属性可以合写为flex-flow
        flex-flow：direction wrap；

    align-content 设置多行元素的排列方式
        stretch 默认值。如果子元素没有设置高度，会被拉伸
        flex-start 根据主轴方向排列元素，第二排紧跟第一排
        他们之间的距离不会被弹性拉伸
        flex-end 根据主轴方向排列元素，第二排紧跟第一排，
        并且他的起始位置在主轴的垂直方向下边  
        space-around 行间距平分   
        space-between 第一行和最后一行分别出现在 垂直主轴方向
        的上边和下边，如果有第三行，则行间距相等

    justify-content 设置主轴方向的对齐方式（重要）
        flex-start：（默认值）从左到右
        flex-end：从右到左
        center：居中
        space-around: 在主轴方向把父级整的尺寸按照子元素的数量
        平分，并且子元素在平分的尺寸中范围居中
        space-between: 第一个子元素在主轴起始位置，第二个子元素
        在主轴结束位置
        如果子元素的数量大于等于3，则每一个
        子元素的间距相等 第一个子元素在主轴起始位置，最后一个元素
        在主轴结束位置

    Y轴垂直于主轴方向
    align-items 设置垂直于主轴方向的对齐方式
        flex-start: Y轴的起始点，如果子元素没有高度，不会拉伸
        flex-end：Y轴的结束点
        center：垂直居中
        stretch: 默认值 如果子元素没有高度，则就会被拉伸
        baseline：基线对齐

弹性布局子元素

	 设置弹性布局子级内容的属性
    order 设置单个弹性布局的顺序,order的值越大，元素越靠后
    ，默认是0
    flex-grow 设置元素的放大比例,默认值为0 使用条件是宽度有剩余
        元素的最终宽度=元素宽度+flex-grow的值/总flex-grow的值*总体剩余宽度
    flex-shrink 设置元素的缩小比例,默认值为1,使用条件是,总宽度大于父级的宽度
        如果值为0,则表示不缩小,保持原宽度

    flex-basis 设置子元素在父元素的主轴方向所占空间的大小,它的值可以是具体值
    也可以是百分比,默认是auto ,auto是遵循给该子元素设置的width的值

    以上三个属性可以合写
    flex:flex-grow  flex-shrink flex-basis;
    因此默认值为flex:0 1 auto;
    后面两个属性为非必写项
    flex:flex-grow

    align-self: 该属性可以设置单个子元素的垂直于主轴方向的对齐方式,它可以覆盖
    align-items 设置的方式
    align-self的属性值和align-items相同,意义相同

流式布局

    流式布局就是百分比布局

    高度的百分比，是基于父元素的百分比进行渲染，因此使用百分比
    作为高度，他的父级必须定高

    特殊属性百分比
    元素的margin-top，margin-bottom，padding-top，padding-bottom
    他们的百分比设置都是基于父元素宽度的百分比

    line-height 如果设置百分比，不是基于父元素的line-height值，而是
    基于他自己字号的百分比

媒体查询

		 媒体查询 根据不同设备的宽度，设置不同的样式，关键字是@media screen
    属性
        only 指的是针对某一种设备
        not 不针对某一设备
        screen 电脑屏幕，手机，ipad设备中的一种，print打印机，speech
        盲人听读机，all指所有设备
        and 链接后面括号中条件的关键字，and的左右两边必须有空格
        （）在（）里面设置条件，它里面的条件一般是max-width min-width的设置
        {}满足条件的时候，设置的css样式必须书写在{}中

    注意事项：媒体查询不提供优先级，因此，需要把媒体查询的样式最后加载，
    基础样式写在媒体查询的前面，这样才不会覆盖媒体查询的方式

@media screen and (max-width:800px) and (min-width:600px) {
            .left {
                background: #ccc;
            }

            .wp {
                height: 150px;
            }
        }

属性选择器

	属性选择器
    以下 E 代表标签名,attr 表示属性名 val 表示属性值
    1  E[attr] 选择所有具有attr属性的E元素
    2  E[attr=val] 选择所有具有attr属性并且它的值是val的E元素
    3  E[attr~=val] 选择所有具有attr属性并且它的值 包含val 的E元素
    4  E[attr|=val] 选择所有具有attr属性并且它的值是以val-开头的E元素
    5  E[attr*=val] 选择所有具有attr属性并且它的值具有val字符的E元素
    6  E[attr$=val] 选择所有具有attr属性并且它的值是以val字符结束的E元素
    7  E[attr^=val] 选择所有具有attr属性并且它的值是以val字符结束的E元素

/* 属性class的值是abc */
        li[class="abc"] {
            border: 1px #f00 solid;
        }

        /* 属性class中包含show */
        li[class~="show"] {
            width: 200px;
            height: 200px;
            background-color: #04be02;
        }

        /* 属性class中的字符以abc开头或者abc-开头 */
        div[class|="abc"] {
            font-size: 30px;
            color: #f00;
        }

        /* 属性class中的字符含有bc */
        div[class*="bc"] {
            border: 1px #f00 solid;
            margin: 10px 0;
        }

        /* 属性class中的字值以li开头 */
        div[class^='li'] {
            color: #04be02;
        }

        /* 属性class的值以d结尾 */
        div[class$='d'] {
            color: #00f;
        }

        /* 给所有文本输入框设置样式  */
        input[type="text"] {
            color: #04be02;
        }

伪类选择器

	:focus 为所有获取焦点的input设置样式
    :disabled 为所有被禁用的input设置样式
    ：target 目标伪类选择器，当跳转到他所修饰的元素上的时候才会执行该选择器
    修饰的样式
    root 表示的是html

    E:empty 选中所有内容为空的E标签，并添加样式
    :empty 选中所有内容为空的标签，并添加样式

    E:only-child 选中父元素中只有一个E标签的E标签，并添加样式

伪元素选择器

	伪元素选择器：通过伪元素选择器可以给元素添加一个类似子元素的内容，不是真正的标签
    使用伪元素需要添加::
    ::first-letter表示修改第一个字符
    ::first-line表示修改第一个字符
    ::before 在元素内容的最前面添加一个伪元素
    ::after 在元素内容的最后面添加一个伪元素

		.txt::first-letter {
            font-size: 30px;
            color: #04be02;
        }

        .txt::first-line {
            font-size: 20px;
            color: #f00;
        }

        .cont::before {
            content: '张杰';
            border: 1px #f00 solid;
            font-size: 30px;
            color: #04be02
        }

结构伪类选择器

	结构伪类选择器
    父级 E：nth-child（num）选中同一个父级下，排名次数为num的E元素
    num从1开始

    使用n表达式，设置选中的标签，n从0开始计算
    偶数使用2n
    E：nth-child（2n）
    E：nth-child（2n+1）

    也可以使用odd表示奇数
    even表示偶数

    E：nth-last-child（） 表示从后往前数，使用方式和上面一样
    如果父元素中的子元素不是同一个类型，则不能使用nth-of-type(num)来设置
    css，匹配的元素不对
    使用E:nth-of-type（num）来匹配元素，他的意思是，找到和E标签同类型的第num
    个元素
    E:nth-last-of-type（num）使用方法和上面一样，倒着数 

ul li:nth-child(2) {
            background: #f60;
        }

.cont p:nth-of-type(2) {
            font-size: 30px;
            color: #f00;
        }

        .cont span:nth-of-type(2) {
            font-size: 30px;
            color: #f0f;
        }

圆角

    border-radius 设置圆角
    border-radius 左上 右上 右下 左下；
    右上=左下 
    border-radius 左上 右上 右下；
    左上=右下 右上=左下
    border-radious 左上 右上
    实质上，每一个角的上面，都有一个水平半径和一个垂直半径，
    如果每一个方向上的半径不同，则需要写成水平半径/垂直半径

    圆角的值可以设置百分比，一般的制作一个圆可以直接设置50%

背景

    background-origin 设置背景图渲染的起始位置
    值
        padd-box 默认值，从padding位置开始渲染
        content-box 从内容部分开始渲染
        border-box 从border开始渲染

    background-size 规定背景图片的尺寸。
    值
        cover 以最短边为基础渲染图片，长边按比例缩放
        ，有可能无法显示全部图片
        contain 以最长边为基础渲染图片，短边按比例缩放
        background-size ：宽度 高度；如果只写一个，另一个
        按比例缩放
        宽度和高度可以是具体的数值，也可以是相对于所在元素的百分比

背景蒙版

    背景蒙版 mask
    1  最初只有谷歌浏览器支持
    2  背景蒙版可以把透明图的透明部分渲染为不透明，
    把透明的渲染为不透明
    3  他的设置方式和背景图设置一致

    浏览器前缀
    -webkit-:是谷歌，苹果等浏览器内核的前缀
    -moz-：是火狐浏览器内核的前缀
    -ms-：是ie浏览器内核的前缀
    -o-：欧朋浏览器内核的前缀

    在css属性名之前添加浏览器前缀，表示该css属性是浏览器的私有属性

阴影

    box-shadow 设置阴影
    box-shadow x方向偏移量 y方向偏移量 阴影的发散度（模糊度） 阴影的宽度 阴影的颜色
    阴影的位置（可以忽略）
    inset 设置内阴影

    box-shadow：10px 10px 20px 0 #f00 inset；

    设置多种阴影，使用逗号隔开，设置方式一样

    注意：在元素上设置阴影通常是为了元素的立体感，阴影占据文档流空间，因此不会影响元素盒模型
    的变化

渐变

    渐变，至少ie10支持
    渐变也是背景图的一种
    1  线性渐变
        background: linear-gradient（to 方向，颜色 开始渐变的位置，颜色 开始渐变的位置。。。）

        linear-gradient 里面的参数
        1  to 方向，方向可以使用具体的方向单词，也可以使用角度度数
        如果是度数，则直接写具体角度
        正值：顺时针选择
        0  向上
        90  向右
        180  向下
        负值：逆时针选择

        开始渐变的位置可以是具体的数值也可以是百分比
        radial-gradient 设置径向渐变
    radial-gradient（半径 形状 at 圆心 颜色 渐变的开始位置。。。）

    形状的可选值：
    1  circle 圆形，默认值，可以省略


    半径可以是具体的数值，也可以是如下系统给定的值：
    farthest-corner 最远角
    closest-corner 最近角
    farthest-side 最远边
    closest-side 最近边

    圆心的设置
    1  可以是具体的数值，第一个数值代表水平方向，第二个数值代表垂直方向
    2  可以是 left top right bottom center 等方向名词的组合

    渐变开始的位置
    1  可以是具体的数值
    2  可以是百分比，百分比是以半径长度为基准

重复性渐变

    repeating-linear-gradient 设置重复线性渐变，设置方式合线性渐变一样，
    效果是自动渲染出重复的渐变内容
    repeating-radial-gradient 设置重复径向渐变，语法同径向渐变一致

    设置重复性渐变需要注意
    1  需要设置重复性渐变的颜色起始位置
    2  至少设置两种颜色

    同背景图一致，也可以设置多组渐变,同时设置多种背景图或者渐变图，后面设置
    会被前面设置的图覆盖

2d形变

    2D形变包含的内容是
    1  平移
    2  旋转
    3  缩放
    4  拉伸（倾斜）
    注意
    1  行元素不能形变，img和input除外
    2  仅仅是元素形状的变化，文档流的空间并没有变化

    设置形变，使用transform属性
        平移使用translate
            1  水平方向平移 translateX（num） num是具体值，正数向右平移，
            负数向左平移
            2  垂直方向平移 translateY（num） num是具体值，正数向下平移，
            负数向上平移
            3  复合写法 translate（x，y）
        选择使用 rotate（度数）度数的单位是deg
            度数为正，顺时针旋转
            度数为负，逆时针旋转
            形变的层级，后来者居上
            使用transform-origin属性，设置形变的参考点，默认值是center center
            transform-origin：x轴方向的位置，y轴方向的位置
            值
                1  具体的数值
                2  left top right bottom center 等方向名词的组合，如果只写一个词，
                则另一个默认是center
        使用缩放scale（x轴方向的倍数，y轴方向的倍数）
            如果x轴和y轴缩放倍数相同，则可以只写一个
            scale（n）

            如果需要把形变组合在一起
            transform：scale（2） rotate（180deg） translate（30px，50px）；
        设置倾斜 skew（）
            写法和translate 一样，分为x轴倾斜，y轴倾斜和复合写法
            skewX(n+deg) 元素倾斜，就是元素和y轴的夹角为n度
            x轴的度数为正，向左倾斜
            x轴的度数为负，向右倾斜
            y轴同理
            注意，度数之和不能是90度

过度动画

    如果同时设置平移和缩放，有两种写法
    1  先写平移，然后再缩放，他的结果是 先平移到具体位置，然后
    在该位置上执行缩放
    2  先写缩放，然后再平移，他的结果是 先把所有的值进行缩放
    然后按照缩放后的值平移
    一般都用第一种写法

    过度动画，设置元素从一种状态达到另一种状态的动画效果
    设置属性是transition

    transition-property 设置需要过度的css属性，如果有多个属性需要过度，
    则可以用英文逗号分开，也可以直接设置all，all表示所有变化的css属性
    都需要过度，如果不设置该属性，默认值为all
    transition-duration 设置过度动画的持续时间，单位是s秒
    transition-delay 设置过度动画的延迟时间，动画开始的时候有延迟，结束
    的时候也有延迟
    transition-timing-function 设置动画的变化曲线
        ease 默认值，先快后慢
        linear 匀速运动
        ease-in 淡入效果，先快后满
        ease-out 淡出效果，先匀速，再快，再慢
        ease-in-out 淡入淡出，两边慢，中间快
        以上均属于贝塞尔曲线的特殊曲线

    过度动画也可以合写：
    transition：property duration timing-function  delay
    后面两个可以省略，直接设置默认值

    过度动画的触发时机
    过度动画不会主动触发
    触发方式：
    1 通过伪类触发 hover focuse targeted
    2 媒体查询
    3 通过js触发

3d形变

    设置3D环境
    perspective：景深
    他的默认值是none
    需要把景深perspective 设置再3d环境的父级上
    他的值是具体的数值，不可以是百分比，因为z轴没有百分比
    也不能是0或者负值

    使用 transform-style 设置3d效果
        默认值是flat，表示2d
        preserve-3d 表示3d

    使用 perspective-origin 设置透视点的位置
        1  可以是 left top right bottom center 等方位名词的组合
        2  可以是具体数值
        3  可以是百分比

    perspective-origin：x轴的位置 y轴的位置

    以上三个关于3d设置的属性都设置再3d环境的父级上
    平移 可以使用translate3d（x，y，z）；
    也可以单独使用 translateZ(z)

    3d旋转
    rotateX（num）:num为正，以上边为基准，上边往视窗的里面翻转，num为负，上边的视窗往外面翻转
    rotateY（num）:num为正，以左边为基准，左边往视窗的里面翻转，num为负，右边的视窗往外面翻转
    rotateZ（num）
    也可以写成rotate3d(x倍数,y倍数,z倍数，度数)
    rotate3d（1,2,3,40deg）

    backface-visibility: 查看元素从后面看能否看到元素内容
    值
    1  visible 默认值，能看到
    2  hidden 不能看到

关键帧动画

    关键帧动画和过度动画的区别
    1 关键帧动画的触发时机是，只要添加关键帧动画，就会立即执行动画
    2 关键帧动画可以对动画的流程进行控制

    关键帧动画的使用流程
    1 先封装一组关键帧动画，使用关键字@keyframes
    2 给需要设置动画的元素，添加动画属性

    animation-name: 设置动画名称
    animation ： 设置动画持续时间
    以上两个属性不可以省略
    animation-timing-function： 设置动画运动函数
    delay 设置动画延迟时间
    animation-iteration-count:num 值是正整数，表示次数，默认为一次，也可以是infin 表示无限次
    animation-direction:
    值
    normal 默认值
    reverse 反方向运行
    alternate 往返运动 
    alternate-reverse 先反方向再往返运动
    animation-fill-mode: 设置动画最后一帧的状态 非默认值：forwards（both） 呈现结束状态
    合写
    animation: name duration timing-function delay iteration-count direction fill-mode;
    
    控制动画的播放状态
    animation-play-state
     值：
     paused 暂停
     running 运动

/* animation: name duration timing-function delay
            iteration-count direction fill-mode; */
           animation: move 1s infinite;
           /* 设置动画名称 */
           animation-name: move;
           /* 设置动画持续时间 */
           animation: 10s;
           /* 设置动画运动函数 */
           animation-timing-function: ease;
           /* 设置动画的重复次数 */
           animation-iteration-count: infinite;
           /* 设置动画的方向 */
           animation-direction: reverse;
           /* 设置动画最后一帧的状态 */
           animation-fill-mode: forwards;
       }
       .wp:hover{
           /* 控制动画的播放状态 */
           animation-play-state: paused;
       }

       @keyframes move {
           from {
               left: 0;
           }

           to {
               left: 400px;
           }
       }

鼠标手势

    鼠标手势，指的是鼠标在页面内或者元素上的样式
    cursor
    值：
        crosshair 用于精确定位的十字形
        pointer 鼠标显示手性
        move 移动效果
        text 查看文本效果
        wait 鼠标等待效果
        help 带问号的箭头
        not-allowed 禁用效果
        default 默认值
        auto 根据内容改变样式

引用

	使用 animate.css
    1  直接在元素上使用 需要添加 公共类 animate__animated,然后根据效果添加需要
    使用动画类名,注意以animate__为前缀 animate__动画名
    2  使用 animate.css 的动画名
        不用刻意添加类名,可以直接在css中声明animation属性,然后他的动画名是animate.css中的动画即可
        
     引入外部字体
    字体格式
    1 ttf：专门用于标准浏览器和android等（最常用）
    2 svg：支持ios
    3 eit：仅支持ie浏览器
    4 woff：支持火狐和谷歌

    使用步骤
    1 将字体引入到项目中
    2 声明引入的字体族
    3 在设置css字体的时候，使用声明的字体族

    声明字体族的方式
    @font-face{
        font-family:'自定义的字体族名字';
        src:url(字体资源地址)
        
     1  下载并且引入iconfont.css
    2  在使用的标签上引入类名
    3  引入需要的图标类

怪异盒模型

    outline 轮廓线 他的使用方式和border一样
    轮廓线不占据文档流空间

    怪异盒模型
    box-sizing
    值:
    border-box border和padding 统一计入width内
    content-box 默认值
    padding-box;火狐支持，padding计入到width内
    由于padding-box 存在兼容问题，常用border-box

        标准盒模型
            宽度=border+padding+内容

        怪异盒模型
            宽度=内容设置的宽度（包含border padding）

多列布局

	css3中最新给出的多列布局方案，他是css布局的一个新的扩展

    设置列宽
        column-width：具体值/auto
        具体值是直接设置元素的宽度
        auto 是根据页面宽度，自定义列宽
    设置列数
        column-count：num
        num是具体的正整数，范围[1,10]
    以上两个属性合写
        columns:width count;
    设置列间距
        column-gap:normal或者是具体的数值
        normal 大小是1em
    设置列之间的边框
        column-rule: 设置规则和border一致

    设置标题跨列
        colum-span
        只具有两个值
        1. none 表示不跨列
        2  all 表示跨所有列 

            .cont {
            /* width: 600px;
            height: 400px; */
            background: #ff0;
            border: 1px #f00 solid;
            margin: 40px auto;
            overflow: auto;
            /* 分列的宽度 */
            column-width: 180px;
            /* 分列的列数 */
            column-count: 3;
            /* 合写 */
            columns: 180px 3;
            /* 设置列间距 */
            column-gap: 20px;
            /*  */
            column-rule: 1px #f00 solid;
        }

        .cont h2 {
            text-align: center;
            /* 设置标题的跨列 */
            column-span: all;
            line-height: 50px;
        }

网格布局

	网格布局，是css3新出的一种布局方式，常见的适用案例为九宫格布局

    声明网格布局的环境
    display：grid；（最常用）
    display：inline-grid

    设置列
    grid-template-columns
    值是fr，1fr就代表一个比例划分
    有几列就可以设置几个fr，每一个fr所占的宽度比例为1fr，如果需要设置
    其他比例的宽度，则可以设置整倍fr
    如
    grid-template-columns：1fr 2fr 3fr；
    设置当前网格为三列，第一列的宽度为1fr，第二列的宽度是第一列的2倍
    第三列的宽度是第一列的3倍
    有几个fr值，就有几列

    还可以直接设置 具体宽度
    grid-template-columns：100px 100px 200px
    还可以设置宽度＋auto auto是除了具体宽度列数之外的自适应宽度

    也可以 宽度+fr组合

    设置行
    grid-template-rows
    他的值是行高，有几个值，就设置几个行高
    grid-template-rows：100px 200px 300px；
    第一个行高是100px 第二行行高是200px 第三行行高是300px
    如果总行高小于父级grid的高度，则父级剩余的高度会被剩余的子元素平分

    行列合写
    grid-template:行 /列
    grid-template: 100px 100px 100px /1fr 1fr 1fr;
    设置列间距
        column-gap：
    设置行间距
        row-gap
    合写
       gap

    指定开始行
    grid-row-start:1 从第一行开始跨行
    指定结束行
    grid-row-end：span 3 到第三行结束，合并三行

    指定开始列
    grid-column-start:1 从第一行开始跨列
    指定结束列
    grid-column-end：span 3 到第三列结束，合并三列

.grid {
            /* 创建网格布局 */
            display: grid;
            height: 400px;
            border: 1px #f00 solid;
            /* 设置列 */
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 100px 100px 200px;

            width: 600px;
            margin: 20px auto;
            /* 行列合写 */
            grid-template: 100px 100px 100px /1fr 1fr 1fr;
            /* 设置列间距 */
            column-gap: 20px;
            /* 设置行间距 */
            row-gap: 20px;
            /* 合写 */
            gap: 40px 20px;
        }

bootstrap

	bootstarp的栅格系统
    栅格系统的最外层必须有一个类名container
    每一行的类名为row
    每一列的类名为col

    使栅格系统在不同屏幕的宽度下，显示不同的布局方式，可以使用col- 前缀添加列宽 列数来设置
    列宽设置依据
        SM ≥576px 
        md ≥720px
        LG ≥992px
        XL ≥1200px
        xxl≥1400px

    col-lg-4 含义是，在大于992小于1200的宽度下，占据4列栅格
    栅格系统，把屏幕的总宽度默认分割成12列，元素可以在这12列中布局

<div class="container wp">
        <div class="row">
            <div class="col col-sm-5 col-lg-6">黑云压城城欲摧</div>
            <div class="col col-lg-3">黑云压城城欲摧</div>
            <div class="col">黑云压城城欲摧</div>
            <div class="col">黑云压城城欲摧</div>
            <div class="col">黑云压城城欲摧</div>
        </div>
        <div class="row">
            <div class="col">须知少年凌云志
                须知少年凌云志
                须知少年凌云志
            </div>
            <div class="col">须知少年凌云志</div>
            <div class="col">须知少年凌云志</div>

        </div>
    </div>

	在bootstrap中使用按钮步骤
    1 给需要设置成为按钮的标签，设置基础类名btn
    2 根据按钮功能，设置不同功能名字的类名

<button type="button" class="btn btn-primary">按钮</button>
    <button type="button" class="btn btn-secondary">按钮</button>
    <button type="button" class="btn btn-warning">按钮</button>
    <button type="button" class="btn btn-danger">按钮</button>
    <button type="button" class="btn btn-light">按钮</button>
    <button type="button" class="btn btn-dark">按钮</button>

sass

sass 是css的预编译语言

    sass的写法 
        简单写法和css一样
    less的写法
        通过换行符和空格来表达层级关系

    css 写法
        div{border：1px #f00 solid；}
        div p {font-size：20px；}

    sass 写法
        div{
            border：1px #f00 solid；
            p{
                font-size：20px；
            }
        }
    less 写法
        div
            border：1px #f00 solid；
            p
                font-size：20px；

    Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、
    嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令
    CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管
    理样式文件，以及更高效地开发项目。

    使用sass，可以使用两种语法格式，语法格式不同，文件后缀名不同，具有scss和sass两种
    不同后缀名
    scss：支持css3语法格式，所有的css3语法都通用
    sass：被称为缩进格式 (Indented Sass) 通常简称 "Sass"，是一种简化格式。它使用 “缩进
    ” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性。
    在vscode中安装插件
    easy sass
    easy less
    主要使用的是easy sass，通过插件编译后的结果会自动生成一个css文件
    和一个min.css压缩文件

    声明变量
    通过关键字$声明变量，$name 此时的name就是变量名
    变量名的命名方式：
        以数字，字母，下划线— 短横线-组合在一起 组成的字符作为变量名
        注意 只能以字母和下划线—开头

    通过 #{} 插值语句可以在选择器或属性名中使用变量
    直接在属性中使用变量，sass会报错
    如 maring-$left:10px;报错
    maring-#{$left}:10px;正确

    全局作用域和局部作用域
    全局作用域范围是 整个sass文件，局部作用域范围是某一个选择器内部

    全局变量和局部变量
     全局变量：声明在全局作用域内的变量，可以在任何地方使用该变量
     局部变量：声明在局部作用域内的变量，只能在声明的地方使用
     sass的嵌套规则
    .wp{
        background:#f60;
        h2{color:#333}
        p{color:#333}
    }
    以上嵌套规则最终会被编译为后代选择器的形式，因此嵌套不宜过深

    属性嵌套:凡是可以进行拆分的属性，都可以使用属性嵌套，注意属性名
    后面的冒号和{}之间要有空格

    父选择器标识符 &，& 表示当前的父选择器

混合器

	混合器的作用，是把相同的css样式提取出来，单独设置一个模块，使用方便

    使用混合器 @mixin
    语法 @mixin name{
        css 样式代码
    }
    其中，name就是混合器的名字，他是一个变量，命名规则通变量的命名规则

    使用混合器
    @include name；通过@include把混合器的名字引入到使用混合器的位置

    复杂的混合器
    混合器也可以接受参数

    1 定义混合器
        @mixin name（arg1，arg2.。。）{
            css样式代码
        }
        （）中的arg列表，就是混合器的参数，由于他们只是形式上的参数，不具备
        任何意识，因此成为形参
        注意，参数本质也是变量，因此需要$开头
    2 使用混合器
        @include name(val1,val2,val3...)
        val 列表，是实际的数据，因此称为实参列表

    形参和实参是一一对应的关系  

bfc

	BFC 块级格式化上下文，bfc规定了在当前元素中块元素的布局方式，默认只有
    一个标签body是块级上下文标签

    bfc特点
    1 bfc是一个独立的布局环境，bfc内部的布局和外部不会相互影响
    2 可以通过一些方法触发bfc，完成一个独立的布局环境

    bfc的布局规则
    1 bfc内部块元素会从上到下一个一个的垂直排列
    2 bfc规定了两个相邻的块元素他们的上下margin重合
    3 每一个元素的margin盒模型的左边，与包含border盒模型
    的左边相接触
    4 每一个bfc区域不会和浮动的元素重叠
    5 每一个bfc区域都是独立的，它里面的内容和外面的内容相互不影响

    创建一个bfc的方法
    1 给元素添加overflow：hidden 它的值visible除外
    2 给元素设置浮动，注意 浮动值none除外
    3 给元素设置position，它的值是fixed或者absolute
    4 给元素设置display，它的值为flex inline-flex table-cell inline-block 

js介绍

	js 组成
    1  ECMAScript（js中的一些基本语法，变量，函数，对象等）
    2  DOM(document object moder 文档对象模型)，可以完成html文档中元素的操作
    3  BOM(browser object model 浏览器对象模型)，可以完成对浏览器对象的操作

    js特点
    1  弱类型语言
    2  不是完全的面向对象语言（仅针对于es6之前）
    3  跨平台
    4  动态性，事件驱动
    
    js的引入方式
    1  内部引入
    2  外部引入
    3  行间引入

    js一般写在head标签中，但是也可以写在body的后面

//  注释：
    // 1 注释一行使用 //注释内容
    // 2 注释一块区域 /* 注释内容 */
    /*
        结合浏览器进行调试的常用方法
        1 console.log('内容1'，'内容2',...)向控制台输出内容
        2 alert('输出内容')弹出警示框
    */
    console.log('李白', 20, '30')
    console.log(true);
    //  alert('千里不留行')
    /*
    对代码可能出现异常进行异常捕捉，异常捕捉之后不会影响后面的代码
    */

    // try {

    //     console.log('异常的代码');
    // } catch (e) {
    //     console.log(e);
    // }
    try {
        //try 中书写可能出现异常的代码
        console.log(abc);
    } catch (e) {
        //出现异常之后操作的内容，e就是错误对象，e.message 错误信息
        //出现异常后的补救措施
        console.log(e.message);
        console.log('你的方式出错')
    }
    //   console.log(abc);
    console.log('雄鸡一唱天下白');

变量和常量

/*
    声明变量的关键字是 var，变量的值在程序运行期间可以改变
    声明变量 var abc；abc是变量名
    定义变量的值 abc=100；

    直接声明和定义 var abc=100；
    */
    var abc = '飞鸟尽良弓藏，狡兔死走狗烹';
    console.log(abc);
    console.log(abc);
    //在运行过程中修改变量值
    abc = '杯酒释兵权';
    console.log(abc);
    //声明一个变量
    var aa;
    aa = 100;
    //变量在使用之前，最好先声明和定义，如果只声明没有定义则变量是undefined
    console.log(aa);
    // 变量声明前置，即使变量在使用该变量代码的后面，浏览器也会把变量的声明
    // 提升到作用域的最前面但是定义不会前置
    console.log(show);
    var show = 200;
    /*
    使用let声明变量
    在同一个作用域下，let声明的变量不能被重新声明，var可以
    不能使用let在同一个作用域下声明同名变量

    一个{}就是一个作用域块
    */
    let num = 10;
    console.log(num);
    //let num = 100;
    var num1=200;
    console.log(num1);
    var num1=300;
    console.log(num1);
    {

    }
    let n=100;
    console.log(n);

变量命名规则：

1 见名知意
2 变量只能是字母，数字，下划线，和$组成，不能以数字开头
3 不能使用系统的关键字和保留字

比如 var this class array string 等等

常用的命名方法
1 驼峰命名法：第一个单词的首字母小写，其余的首字母大写
    例如：myShopCar  useCenter
2 帕斯卡命名法（大驼峰）：每一个单词的首字母都大写
    例如：MyShopCar  UseCenter
3 匈牙利命名法：属性＋类名＋描述，使用下划线链接
属性：
    s表示静态变量，g表示全局变量
类型：
    string 字符串
    bool 布尔值
命名s_string_eat 表示静态字符串吃饭的意思

变量的分类

1 number 数字类型，整数和小数
2 string 字符串类型
3 boolean 布尔类型，布尔类型只有两个值 true真  false假
4 undefined 类型，未定义的类型
5 object 对象类型
6 null 空对象,特殊类型

/*
    使用typeof方法获取变量的类型
    使用方法：
        typeof 变量名
        typeof（变量名）
    返回的是变量的类型
    */
    console.log(typeof num1);
    console.log(typeof 123.12);

    //字符串类型
    let str1 = '莫听穿林打叶声';
    console.log(typeof str1);
    let str2 = '123';
    console.log(typeof str2);

    //布尔类型
    let bol1 = true;
    console.log(typeof bol1);
    let bol2 = 'false';
    console.log(typeof bol2);

    //undefined类型
    let abc;
    console.log(typeof abc);

    //对象类型
    /*
    js 中通过document.getElementById('元素id')；获取dom元素
    */
    let wp = document.getElementById('wp');
    console.log(typeof wp);
    console.log(wp.className);

    //null类型
    let n=null;
    console.log(typeof n);

变量注意问题

/*
    特殊的number NaN(不是一个数的number类型)
    NaN 是唯一一个和自己比较，结果值不相等的数据
    */
    let oNaN = NaN;
    console.log(oNaN, typeof oNaN);
    if (NaN == NaN) {
        console.log('两个值相等');
    } else {
        console.log('两个值不相等');
    }
    let n1 = 120;
    let n2 = 20;
    let n3 = n1 + n2;
    console.log(n3);
    let n4 = 150;
    let n5 = n4 - n1;
    console.log(n5);
    let str3 = '茉莉清'
    let str4 = '茉莉蜜'
    //字符串减去数字得到的是一个number类型，值是NaN
    let n6 = str3 - n1
    console.log(n6);
    let n7 = str4 - n1
    console.log(n7);
    if (n6 == n7) {
        console.log('不可能');
    } else {
        console.log('nan和nan不能相等');
    }

 字符串一般都由引号包裹，可以单引号，也可以是双引号
 如果字符串外部是单引号，内部如果有引号，只能是双引号，反之亦然

字符串的转义字符
\n:换行
\t:tab键
\':单引号
\"：双引号
\\:表示\