css3-盒模型

    css3-盒模型（盒模型实例.html）
大小：　box-sizing
溢出：　overflow-x
溢出：　overflow-y
缩放：　resize
外轮廓：outline

A:-------
        css中的每一个元素都是一个盒模型。包括html和body。
        W3C的盒模型标准：
            外盒尺寸计算：    
                element空间高度 = 内容高度 + 内距 + 边框 + 外距
                element空间宽度 = 内容宽度 + 内距 + 边框 + 外距
    
            内盒尺寸计算：
                element高度 = 内容高度 + 内距 + 边框（height为内容高度）
                element宽度 = 内容宽度 + 内距 + 边框（width为内容宽度）
        ＩＥ传统盒模型：（修改　元素边框或者内距，不会影响元素盒子的总尺寸）
            外盒尺寸计算：    
                element空间高度 = 内容高度 + 外距(height包括了内容高度 +内距 + 边框）
                element空间宽度 = 内容宽度 + 外距(width包括了内容高度 +内距 + 边框）
    
            内盒尺寸计算：
                element高度 = 内容高度(height包括了内容高度 +内距 + 边框）
                element宽度 = 内容宽度(width包括了内容高度 +内距 + 边框）
B:-------------
        box-sizing:    事先定义盒模型的解析方式
        用法：
            box-sizing: content-box | border-box | inherit
                content-box:    (默认)维持w3c的标准盒模型。元素的height和width都＝border +padding +内容 width/height
                border-box:    定义为CSS2.1模式。维持ＩＥ传统下盒模型。元素的width和height都＝内容的width/height
                            这里的内容width + height包括了　border+padding+content
                inherit:    继承父元素的盒模型模式
                    firefox中，元素还可以设置一个padding-box.
                            指定元素的宽度或高度　（内容的宽度或高度　＋　内距）

                
Ｃ－－－－－－－
        overflow-x,overflow-y    :对水平垂直方向内容溢出的剪贴
        用法：
            overflow-x: visible | hidden | scroll | auto | no-display | no-content
            overflow-y: visible | hidden | scroll | auto | no-display | no-content
                visible:    默认）不剪贴任何内容
                auto:        需要时候剪贴内容并添加滚动条
                hidden:        内容溢出容器时候，内容隐藏，无滚动条哦
                scroll:        有滚动条
                no-display:    内容溢出不显示元素
                no-content:    内容溢出不显示内容
                
Ｄ------------
        
        resize:        自由缩放（通过拖动方式修改元素的尺寸来改变元素的大小）
        用法：    
            resize:    none | both | horizontal | vertical | inherit
                none:        用户不能拖动元素修改尺寸
                both:        改变宽高
                horizontal:    改变宽
                vertical:    改变高
                inherit:    继承父元素

Ｅ－－－－－－－
        outline:    外轮廓～border，不占用网页布局空间，不一定为矩形，只有元素在获取焦点或被激活的时候呈现
        用法：
            outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit
                color:         颜色，默认黑色
                style:        轮廓线的样式，默认none
                width:        宽度，默认mediun
                offset:        轮廓边框的偏移位置的数值，可以为负数（向内偏移）　，　正数（向外偏移）
                inherit:    继承父元素

        outline 和　border：
            ＯＮＥ：　    border属于盒模型一部分，影响盒子的大小。outline创建的外轮廓线类似画在上面，不影响布局大小
            ＴＷＯ：　    outline各边相同，border可以不同
            ＴＨＲＥＥ：    border边框可以单设置，outline闭合
            ＦＯＵＲ：    外轮廓线可以非矩形，如果多行，外轮廓线至少包含该元素所有框的外轮廓
            ＦＩＶＥ：    outline可以向两端扩展