H5学习笔记（四）

1、框模型
    1、框模型
    框模型定义了元素的处理内容，内边距、外边距、边框
    2、详解
       1、width与height
          负责处理元素内容区域的宽度和高度
       2、增加边框、内边距和外边距
          元素的内容区域不会改变，但是，元素整体的占地尺寸会发生改变
       3、增加内边距
           元素的内容区域不会改变，但是，元素框内边框内的占地尺寸发生变化。
       4、框模型介入元素中
       元素实际宽度=左右外边距+左右边框+左右内边距+width
       元素实际高度=上下外边距+上下边框+上下内边距+height
    3、外边距
       1、什么是外边距
        位于元素边框之外的距离
        语法:margin
        取值:value
        单位：
         1、px
         2、%
         3、auto  只对左右边距有效
         4、负值
         数量：
        value:四个方向统一设置
        v1 v2：v1上下外边距 v2左右外边距
        v1 v2 v3：v1上外边距  v2左右外边距 v3下边距
        v1 v2 v3 v4 上右下左
        单边设置：
        margin-left:左外边距
        margin-right：右外边距
        margin-top:上外边距
        margin-bottom：下外边距
       1、取值为auto时，
        当块级元素设置宽度时，同时去设置左右外边距为auto时，当前元素可以实现水平居中的位置摆放。
       2、取值为负值时
       目的：向相反的方向去移动元素
       通常会设置margin-top或margin-left来实现元素上或左的移动。
       3、默认外边距
        在html元素中，有些是带有默认外边距的。
       4、外边距合并
       两个垂直外边距相遇时，会形成一个外边距，以较大的为准。
       5、外边距溢出
       父子元素中，设置子元素的上下外边距时，某些情况下（父元素无边框，设置第一个（最后一个）子元素时，有可能上下外边距会作用在父元素上）
       解决方案：
        1、为父元素加边框
        2、设置父元素的内边距替代子元素的外边距
       6、行内元素不允许设置上下外边距
          行内块元素，如果设置上外边距，同行的其他元素全部都会受影响
    4、内边距
        1、什么是内边距
          元素边框距离内容区域之间的空白距离就是内边距
          注意：元素设置了内边距之后，元素的占地区域会变大。
          2、语法:padding
             取值：单位px，%，没有负值，没有auto
         数量：
          value
          v1 v2
          v1 v2 v3
          v1 v2 v3 v4
          单边设置：
          padding-left.padding-right、padding-top、padding-bottom
 2、背景属性
    1、背景
      主要由背景颜色和背景图片组成
      背景颜色：由一种单一颜色进行填充
      背景图像：是以图片作为背景填充
    2、背景属性：
       1、背景颜色：
          background-color:任何合法的颜色值
     注意：背景颜色以及图像，默认都是从元素的边框开始填充。
    2、背景图片
      属性:background-image:
      取值：url(图像路径)
    3、背景重复
       属性：background-repeat
       取值:repeat 默认值，水平，垂直方向全平铺
            no-repeat不平铺。只显示一次背景图像
        repeat-x水平方向平铺
        repeat-y垂直方向平铺
        4、背景图片尺寸
        属性：background-size：
        取值:1、value value 宽度  高度
             2、v1% v2%宽度占比  高度占比
             3、cover
                将背景图像扩充至足够的大，以使背景图像完全覆盖背景区域
             4、contain
                将背景图像扩充至足够的大，直到背景图像的宽度和高度适应元素为止。
    5、背景图片固定
     属性:background-attachment
     取值：scroll：默认值，滚动的
           fixed:固定的
    6、背景图片定位
      1、什么是背景图片定位
        改变背景图在元素中的默认位置
       2、语法：background-position
           取值：
           1、x y:x表示背景图像的水平位置偏移，x取值为正，向右偏，取值为负，向左偏。y表示背景图像的垂直方向偏移，y取值为正，向下偏。
           2、x% y%
           3、x：left center right
              y：top  center bottom
      3、css sprite 
      将网页中的若干个小图片，合并成一张大图，从而减少http请求的次数。
    7、背景属性
        目的：将若干背景子属性放到一个属性中
    语法:background:color url(图像) repeat attachment position
    常用用法:background:url repeat position
   3、渐变
       1、什么是渐变
        两种或多种颜色之间形成的平滑过渡效果
    关键：颜色以及颜色出现的位置
    分类：1、线性渐变
          2、径向渐变
          3、重复渐变
    2、渐变语法
        允许出现背景图像的地方，就可以设置渐变
        属性:background-image
        取值：linear-gradient()线性渐变
              radial-gradient()径向渐变
          repeating-linear-gradient()重复线性渐变
          repeating-radial-gradient()重复径向渐变
        3、线性渐变
      语法:background-image:linear-gradient(angle,color point1,color point2,.....)
      angle:指渐变的方向或角度
      关键字：
         to top:向上显示渐变效果
         to right：向右显示渐变效果
         to bottom：向下显示渐变效果
         to left：向左显示渐变效果
         角度
           0deg-360deg
           0deg to top 90deg to right 180deg to bottom
           270deg  to left
           color point：颜色以及颜色出现的位置
    4、径向渐变
       语法：
         background-image:radial-gradient([size at position],color-point,color-point,...)
         position:为第一个参数，指定渐变的圆心位置，默认值center，可以取值为数字，百分比，或关键字

webstrom