盒子模型基础知识

盒子相关的样式

    每一个元素都是一个盒子

    width    宽度

    height   高度

    padding 内边距

        padding-top

        padding-right
        
        padding-bottom

        padding-left

    margin   外边距

        margin-top

        margin-right

        margin-botoom

        margin-left

    border  边框

      border-width        为元素指定边框的宽度

        关键字    thin 、medium、thick
        单位    px、em

      border-style        为元素指定边框样式

        none    不设置
        hidden     隐藏
        dotted     显示一系列的点
        dashed  显示一系列小线段
        solid     显示一条单一的实心直线
        double     显示两条实心直线
        groove     边框雕刻效果(与ridge相反)
        ridge     与groove相反
        inset     嵌入式边界框(与outset相反)
        outset     突出的边界框

      border-color        为元素指定边框颜色

        关键字、十六进制、rgb函数、rgba函数

      border-radius   为元素指定圆角

      background      为元素设置背景

        background-color         为元素设置一种颜色

        background-image        为元素设置一个背景图片

        background-size         设置背景的大小

        background-repeat         设置背景图片的重复方式

        background-origin         设定背景的起始点

        background-clip         设定背景的覆盖范围

        background-attachment     设置背景图片的固定点

        background-position         设置为背景图像初始位置，可以实现图片精灵

盒子模型

  所有的元素都可以看作一个盒子

    内容盒子（w3c盒子、标准盒子）

      box-sizing:content-box

      width = 内容的宽度

    边框盒子（怪异盒子、IE盒子）

      box-sizing:border-box

      width = 内容 + padding + border