css盒子模型

用户为html定义css样式，无非有两个作用：一个是用来修饰文字和图片，另外一个是用来排版和布局。

1.基本的box概念
    css将网页中的每一个html元素都视为一个长方形的盒子，每一个box都有数个不同的参数，从里到外包含
    content、padding（衬距）、border、margin(边距)。它们之间的关系如下:
    (1)border是设定的边框线条，其他的内容都是相对于border而言的，border是box的核心。
    (2)padding是指内容与border之间的距离，padding是透明的，这意味着box如果有背景，那么padding部分
      是可以显示出来的。
    (3)margin也是透明的，范围是border至元素最外边虚线的范围，但是这部分不能显示背景。
    (4)如果设定这个box有一个背景图片，那这个图片只会在border那个框的范围内中出现。box也可以同时设
       定背景色，他们的大小位置相同，但背景色位于背景图片的下层。
    (5)最中间的内容，位于padding之内。
     例:div{margin:1px 5px 5px 1px;}次序是"上右下左"
    
    1.1box幅面大小的计算
        至于box幅面的大小，可以通过计算获得，可以使用width和height属性来定义内容幅面的大小，注
        意，width和height指的是content的。

        box幅面大小计算规则:内容(的宽度或高度)+padding(两面)+border(两面)+margin(两面)

    1.2改变box幅面大小的计算方式
        使用css3新增的box-sizing属性可以改变box幅面大小的计算方式,该属性有两个值可选。
        （1）content-box
            这是默认值，该属性维持css2.1box模型的box幅面的计算方式，即:
                 box幅面大小=内容(的宽度或高度)+padding(两面)+border(两面)+margin(两面)
        （2）border-box
            此时box幅面大小=内容+margin(两面)(不推荐使用)

    1.3box容器
        也可以在一个box中放入其他box，做成嵌套结构，而这个结构的根部就是浏览器的窗口。每一个box
        都可以包住其他box，称这些外层的box为"box容器"。
        box容器为其包住的其他子box提供了一个位置与大小的参照。例如，如果box里面的一个box的with
        是50%，其所指的是外层box容器的width的一半。

    1.4box模型样式属性
        box模型用于呈现属性，属性width和height分别用来定义box内容的宽度和高度，值可以是相对值，
        也可以是绝对值。

        1.4.1定义边距大小
            属性margin-top、margin-right、margin-bottom、margin-left和margin(主要是快捷方式)
            值可以是:长度(0是默认值)、百分比或者auto
              如:h1{margin-top:12px;margin-right:10px;margin-bottom:12px;margin-left:10px;}
                 等同于h1{margin:12px 10px 12px 10px;}

        1.4.2定义衬距大小
            衬距用来描述box的边框和内容之间插入多少空间，和边框类似，也有padding-top、
            padding-right、padding-bottom、padding-left和padding(快捷方式)这5个属性
            值可以是:长度(0是默认值)、百分比或者auto

        1.4.3定义边框--粗细、颜色、样式
            1.4.3.1定义边框
                属性包括:border-top、border-right、border-bottom、border-left和border

            1.4.3.2定义边框线的粗细
                属性包括:border-top-width、border-right-width、border-bottom-width、
                     border-left-width和border-width可以定义边框线的粗细
                值：可以使用长度单位和关键字(thin[较细线条]\medium[中等线条]\thick[粗线条])

            1.4.3.3定义边框线颜色
                属性包括:border-top-color、border-right-color、border-bottom-color、
                     border-left-color和border-color可以定义边框线的颜色
                值:包含显示颜色所有的语法

            1.4.3.4定义边框线样式
                属性包括:border-top-style、border-right-style、border-bottom-style、
                     border-left-style和border-style可以定义边框线的样式
                值:none(没有边框)、hidden(与none相似,但是在表格元素中解决边框冲突时与none不尽相同)
                   dotted(边框是一系列点)、solid(单实线)、dashed（短划线）、double(双实线)
                   groove(凹线)、ridge(凸线)、inset(该值使整个看上去像是嵌在画布中)
                   oustet(与inset相反)

        1.4.4定义边框圆角
            属性:border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius、
                 border-top-left-radius和border-radius可以定义边框圆角
            一个box有4个角组成，每个角的圆弧都有两个值来定义,值之间使用空白来定义，分别表示边框外边缘
            的水平半径和垂直半径.
                 border-radius(快捷方式)：左上 右上 右下 左下/左上 右上 右下 左下 前面是水平半径...
        
        1.4.5以9切片图片修饰边框
            9切片也被称为九宫格，是指将一幅图片可以被分割成9个区。
            9切片一共分成9个区域:4个角、4个边缘与一个中间矩形,就像中文的"井"字，中间的矩形定义网格的中心
            区域，边框的图片填充就是用这9个区域完成的.
            
            属性border-image-source、border-image-slice、border-image-width、border-image-outset、
                border-image-repeat和border-image可以定义边框图片
                (1)border-image-source
                    该属性指定边框要使用的图片、属性值是一个图片的url
                如:div{border-image-source:url(heart.png);}如果无法显示，将会使用border-style的设置
                (2)border-image-slice
                    该属性指定边框图片的切片方法，属性值可以是1-4个数字或百分比值，也可以增加一个
                    fill关键字4个值分别表示相对于图片的上、右、下、左边缘的偏移量
                    如:div{border-image-slice:30 50 90 40;}                
                   (3)border-image-width
                    该属性用于定义边框图片的偏移量.边框图片描绘在一个区域之内,而这个区域叫做边框
                    图片区域，并且该区域的边界在正常情况下与border区域是相同的。
                (4)border-image-outset
                    该属性是用来指定边框图片区域超出边框图片区域时，上右下左4个侧边分别所代表的超出量
                    边框图片区域外边被渲染的图片不会触发滚动条滚动，这意味着此部分不会捕捉到鼠标事件.
                (5)border-image-repeat
                    该属性用来指定边框图片的侧边于中间部分图片应如何来缩放与平铺，可以指定两个关键字作
                    为属性值，两个属性值之间用空格隔开.如果第二个关键字不存在，默认与第一个关键字相同.
                   关键字:stretch(表示图像伸展)、repeat(表示图像平铺)、space(也是平铺，但与repeat不尽相同)
                      round(如果没有以整数倍来平铺填充图像区域，会对图像进行缩放以便于以整数倍来平铺)

2.box的外廓
    有时，我们可能在可视对象(如按钮、活动窗体域、图形映射等)周围创建外廓使它们突出显示.
    2.1对比外廓和边框
        （1）外廓不占用空间
            外廓起源于box边框外边缘之外，并且画在一个"box"上面，也就是外廓在顶上,不会影响box
        （2）外廓不一定是矩形
            外廓可能是非矩形的。如:假定该元素被分割在好几行，那么外廓就至少要包含所有box的外廓。与边框不同的是，
                           外廓在行box中总是完全闭合的。
            
    2.2定义外廓的属性
        外廓的属性包括(outline-width、outline-style、outline-color和outline)
            (1)outline-用于定义外廓线条的粗细，属性值的设置和border-width相同
            (2)outline-style:与border-style相似
            (3)outline-color:接受所有的颜色值，并包括关键字invert
            (4)outline-offset:指定轮廓边框偏移量位置的设置。它可以调整外框与容器边框的距离
            (5)outline是一个快捷方式
    
3.box的阴影效果
    语法:box-shadow:第一个值 第二个值 第三个值 第四个值 颜色 阴影关键字(默认为外阴影效果,当设置为inset时，为内阴影)
        第一个值表示阴影水平方向上的偏移量，正值向右，负值向左
        第二个值表示阴影垂直方向上的偏移量,正值向下，负值向上
        第三个值表示阴影模糊的距离值(可选),只允许为正值，值越大越模糊(默认为0)
        第四个值表示阴影的扩展的距离值(可选),正值表示在所有的方向扩展，负值表示在所有的方向上缩减
    如:img{box-shadow:0 0 20px #006699;}为图片img元素定义了外阴影