第一周笔记

         multiple 可以上传多个文件，通常与file搭配使用
         placeholder  表单的请示文字
         required 表单输入不能为空
         autofocus设置默认焦点
         autocomplete记录历史输入  on打开  off关闭
         pattern 正则验证
         min  max  数字的值   通常与number和range
         step 数字的跳跃间隔
         readonly只读模式
         disabled禁用模式

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

        保存数据：localStorage.setItem(key,value);
        读取数据：localStorage.getItem(key);
        删除单个数据：localStorage.removeItem(key);
        删除所有数据：localStorage.clear();
        得到某个索引的key：localStorage.key(index);
        
        保存数据：sessionStorage.setItem(key,value);
        读取数据：sessionStorage.getItem(key);
        删除单个数据：sessionStorage.removeItem(key);
        删除所有数据：sessionStorage.clear();
        得到某个索引的key：sessionStorage.key(index);

       1.标准盒子模型
        box-sizing:content-box;
        2.IE盒子模型||怪异盒子模型
        box-sizing: border-box;
        
        flex 属性用于指定弹性子元素如何分配空间
        flex-direction 属性指定了弹性子元素在父容器中的位置
        flex-direction: row | row-reverse | column | column-reverse
         row横向从左到右排列（左对齐），默认的排列方式。
         row-reverse  反转横向排列（右对齐，从后往前排，最后一项排在最前面。
         column  纵向排列
         column-reverse  反转纵向排列，从后往前排，最后一项排在最上面。

内容对齐（justify-content）属性应用在弹性容器上，
        把弹性项沿着弹性容器的主轴线（main axis）对齐。
        justify-content: flex-start | flex-end | center | space-between | space-around 
        - flex-start
          弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
        - flex-end：
          弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
        - center：
          弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
        - space-between：
          弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
        - space-around：
          弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
        
        align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式 
        align-items: flex-start | flex-end | center | baseline | stretch
        - flex-start：
          弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
        - flex-end：
          弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
        - center：
          弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
        - baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
        - stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
        
        align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 
        但它不是设置弹性子元素的对齐，而是设置各个行的对齐
         align-content: flex-start | flex-end | center | space-between | space-around | stretch
         - stretch - 默认。各行将会伸展以占用剩余的空间。
         - flex-start - 各行向弹性盒容器的起始位置堆叠。
         - flex-end - 各行向弹性盒容器的结束位置堆叠。
         - center -各行向弹性盒容器的中间位置堆叠。
         - space-between -各行在弹性盒容器中平均分布。
         - space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
         flex-wrap 属性用于指定弹性盒子的子元素换行方式
         flex-wrap: nowrap|wrap|wrap-reverse
         - nowrap 
           默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
         - wrap 
           弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
         - wrap-reverse 
           反转 wrap 排列。

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
        flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
        flex-direction 属性规定灵活项目的方向。
        flex-wrap 属性规定灵活项目是否拆行或拆列。
        flex-flow:flex-direction flex-wrap;复合属性
        flex-direction代表的值有：row|row-reverse|column|column-reverse
        flex-wrap代表值有：nowrap|wrap|wrap-reverse
      
        order弹性子元素，排序，用整数值来定义排列顺序，数值小的排在最前面，
        可以 为负值，属性设置弹性容器内弹性子元素属性
      align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。注：给子元素设置
         align-self: auto | flex-start | flex-end | center | baseline | stretch
         - auto
           如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
         - flex-start
           弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
         - flex-end
           弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
         - center
           弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
         - baseline
           如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
         - stretch
           如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
         background-Origin属性指定了背景图像的位置区域 
         CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
        background ： [background-color] | [background-image] 
        | [background-position][/background-size] | [background-repeat] 
        | [background-attachment] | [background-clip] | [background-origin],
       线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
        background-image: linear-gradient(方向或角度, 颜色, 颜色, ...);
        默认从上往下
        to left|top|right|bottom  方向  ||to bottom right
        background-image: linear-gradient(to left,#36964e,#963674);
        设置角度deg
        background-image: linear-gradient(90deg,#36964e,#000);
        repeating-linear-gradient重复的线性渐变
        background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
        径向渐变（Radial Gradients）- 由它们的中心定义
        background-image: radial-gradient(形状  大小 at position, 颜色, ..., 颜色);
        形状circle 表示圆形，ellipse 表示椭圆形
        大小farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
        closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
        closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
        farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边