css继承-文字及inherit/优先级-权重/盒子问题box-sizing/溢出overflow

一. CSS继承

文字相关的样式可以被继承
color line-height font-style font-size font-weight …
布局相关的样式不能被继承 ( 默认行为 )
通过设置inherit值，可改变默认的继承方式。

二. CSS优先级

相同样式优先级
    当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
  
内部样式与外部样式
    内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

单一样式优先级
    style行间 > id > class > tag > * > 继承
    权重 1000   0100   0010   0001  ...

!important 权重 -> 10000 ( 建议不要乱用 , 非规范写法 )
    场景：紧急情况下才去用。

标签 + 类 和 单类？
    标签 + 类 > 单类

群组和单一样式？
    群组选择器与单一选择器的优先级相同，靠后写的优先级高。

层次选择器？

    权重： 把对应的数值加起来

    约分：把相同的相同的选择器约掉

    建议：层次选择器最好不要超过三层

三. CSS盒子模型

盒子： content < padding < border < margin
        物品      填充物    盒子    多个盒子之间的间隙

content : width + height

padding : 内填充（内边距）
    写了一个值 : 30px  ( 上右下左 )
    写了二个值 : 30px 40px ( 上下 左右 )
    写了三个值 : 30px 40px 50px( 上 左右 下)
    写了四个值 : 30px 40px 50px 60px ( 上  右  下  左)

    padding-left : 30px
    padding-right : 30px
    padding-top : 30px
    padding-bottom : 30px

margin : 外边距 
    写了一个值 : 30px  ( 上右下左 )
    写了二个值 : 30px 40px ( 上下 左右 )
    写了三个值 : 30px 40px 50px( 上 左右 下)
    写了四个值 : 30px 40px 50px 60px ( 上  右  下  左)

    margin-left : 30px
    margin-right : 30px
    margin-top : 30px
    margin-bottom : 30px

    注：
    1. 背景颜色会填充到margin以内的区域。
        背景图？默认背景图会平铺border padding content区域
                只有一张背景图的时候，从padding区域开始添加（默认行为）
    2. 文字会在content区域。
    3. padding不能出现负值，margin是可以出现负值。
    QQ : 51524499

四. box-sizing

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

content-box	
    这是由 CSS2.1 规定的宽度高度行为。
    宽度和高度分别应用到元素的内容框。
    在宽度和高度之外绘制元素的内边距和边框。

border-box	
    为元素设定的宽度和高度决定了元素的边框盒。
    就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
    通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

box-sizing : 
    默认值 content-box : 整个盒子的宽 -> 宽 content(width) + padding + border
    border-box : 整个盒子的宽 -> 宽 content (width-padding-border) + padding + border
       
应用场景：
    1. 可以省略一些计算的环节。
    2. 可以针对100%的换算。

五. 盒子模型的问题

1. margin叠加的问题：
        只会出现在上下margin中，左右是不存在margin叠加问题的。
        特点：会取叠加中较大的值。

    解决方案：
        1. BFC规范 （ 会专门针对BFC统一讲 ）
	    2. 想办法只给一个元素添加间距。

2. margin传递的问题：

    margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的。

    解决方案：
        1. BFC规范 (比较推荐)
        2. 给父容器加边框。(不太推荐的)
        3. margin换成padding。

盒子的应用：
    1. margin : 0 auto; 来实现盒子的左右居中（上下不行）

        上下想居中：( 后面讲 )
            1. position
            2. transition
            3. flex

        一段文本？
            上下 : line-height:height
            左右 : text-align:center

    2. 当一个盒子不写宽度的时候？
        盒子的宽度跟父容器的宽度相同。
        并且当设置了margin padding border的时候，盒子的content会自动重新计算。

六. overflow

给一个盒子固定大小后，当盒子里的内容比较多的情况下，就可能产生溢出的现象。
溢出隐藏
    hidden
    scroll
    auto

overflow-x: hidden;
overflow-y: scroll;