CSS篇学习笔记1

          任务名：了解盒子模型、任务名：熟悉常用属性

一、对于盒子的区域来说：
            盒子由四个区域组成，则有四个边界：
              内容边界 Content edge、内边距边界 Padding Edge、
              边框边界 Border Edge、 外边框边界 Margin Edge
          
二、对于box-sizing字段：
        content-box：默认字段
        border-box：给定的宽高中同样也包括了各个边界值的长度
        
三、对于边界值的设定：
        内边距：padding-top、right、left、bottom
        外边距：margin-top、right、left、bottom
          
四、对于属性默认值、继承等方面有以下内容：
none：这是默认值
initial：将此属性设置为默认值
inherit：关联元素采用其父元素
unset：
        1、如果该属性默认继承属性，该值等同于inherit
        2、如果该属性是非继承属性，该值等同于initial

五、标准盒子模型和怪异盒子模型：
        1、标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。
        标准盒模型下盒子的大小  = content + border + padding + margin
        w3c标准
        2、怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）
        ；height指的是内容、边框、内边距总的高度
        怪异盒模型下盒子的大小=width（content + border + padding） + margin
        IE使用
    
六、关于文字样式和设定等内容：
        1、line-height设置行高，但后面跟的内容为数字不带单位时，就为字体大小的数字倍数
        2、letter-spacing设置字与字之间的间隔大小

七、padding和margin（内外边距）：
        1、有一个值：上下左右
        2、有两个值：上下  左右  
        3、有三个值：上 左右 下
        4、有四个值：上 右 下 左
        
八、border（边框）：
        1、border-width：thin、medium、thick （细，中，粗）或者是具体的粗细        
        2、border-style：有多种border的样式
        3、border-collapse:separate分离贴合盒子的border collapse合并贴合盒子的border

九、float（浮动）：
        1、    浮动会使元素脱离文档流，即其他元素可以占用他在文档流当中的位置，可以达成文字环绕效果
        2、    left
                表明元素必须浮动在其所在的块容器左侧的关键字。
            right
                表明元素必须浮动在其所在的块容器右侧的关键字。
            none
                表明元素不进行浮动的关键字。
            inline-start
                关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。
            inline-end
                关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。
        3、清除浮动方法：overflow：hidden，给想要确保左对齐的新标题元素添加clear属性 即clear: both;

十、flex（弹性元素）：
        1、 flex-grow：设定弹性增长系数，这里我理解为在一个块中该元素的权重，权重越大，占的区块大小越大
        2、 flex-shrink：属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，
                         其收缩的大小是依据 flex-shrink 的值。
        3、flex-basis：指定了 flex 元素在主轴方向上的初始大小。如果不使用  box-sizing 改变盒模型的话，
                       那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
        4、flex-direction：row、column；父元素定义此属性 定义主轴是x轴还是y轴
        5、display：flex：定义该元素内的元素是弹性布局

十一、font（字体）：
        1、font-style：设定字体样式，如normal italic等
        2、font-variant：使字体变形，默认为normal
        3、font-weight：字体粗细 normal（400） bold（700） bolder（更粗的） lighter（更细的）
                        设定数字（1-1000）：定义由粗到细的字符 400 等同于 normal，而 700 等同于 bold。
        4、font-size：设定字体大小，单位em代表相对于父级元素的大小
        5、line-height设置行高，但后面跟的内容为数字不带单位时，就为字体大小的数字倍数
        6、font-family通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。
                      我理解为设置一个字体样式，可以用自带的也可以用下载下来的