css盒子模型

什么是盒子模型

• 在浏览器看来，所有网页元素本质上是许多盒子排列在一起或者相互嵌套的。
• 所有的页面元素都可以看成一个盒子，占据着一定的页面空间。
• 一般来说这些占据的空间往往要比单纯的内容大，比如盒子与盒子之间都是有距离的。
• 我们可以通过调整盒子的宽度、高度、边框内边距和外边距来调整盒子的为值和大
  小。
• 一个独立的盒子模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）四个部分组成。
• 盒子模型用来调整网页中的距离。

概念

• width:内容的宽度
• height:内容的高度
• padding（内边距）：内容与边框之间的距离
• border（边框）：盒子的边框
• margin（外边距）：盒子与盒子之间的距离

属性解析

• padding和margin都有四个方向的值

• padding

  padding-top 上内边距
  padding-right 右内边距
  padding-bottom 下内边距
  padding-left 左内边距

• margin

  margin-top 上外边距
  margin-right 右外边距
  margin-bottom 下外边距
  margin-left 左外边距

整个盒子的大小计算

• 一个盒子的宽度构成：
  左外边距 + 左边框宽 + 左内边距 + width值 + 右内边距 + 右边框宽 + 右外边距
• 一个盒子的高度构成：
  上外边距 + 上边框宽 + 上内边距 + height值 + 下内边距 + 下边框宽 + 下外边距

属性值的简写形式

我们可以对一个盒子的上下左右四个方向设置不同的值

• padding 内边距

    div{
        padding:10px;
        /*上下左右四个方向都是10px*/
        padding:10px 20px;
        /*      上下10px 左右20px*/
        padding:10px 20px 30px;
        /*       上   左右 下*/
        padding:10px 20px 30px 40px;
        /*       上   右    下   左  顺时针方向的*/
    }

• margin 外边距:也有四个值的情况，与padding是一样的

    div{
        margin:10px;
        /*上下左右四个方向都是10px*/
        margin:10px 20px;
        /*      上下10px 左右20px*/
        margin:10px 20px 30px;
        /*       上   左右 下*/
        margin:10px 20px 30px 40px;
        /*       上   右    下   左  顺时针方向的*/
    }

• border边框

边框由包括三个属性border-width、border-style、border-color我们可以将这三个属性写在一起，例如：

    div{
        border:1px solid red;
        /*     宽度  样式 颜色*/
        /*上边的例子是设置一个盒子上下左右四个方向的边框的样式，如果只想设置右边框的样式，那我们可以用下面的方式实现：*/
        border-right:2px solid yellow;
    }

    div{
        border-width:1px;
        /*边框的宽度*/
        border-style:solid;
        /*边框的样式*/
        border-color:red;
        /*边框的颜色*/
        /*以上三个属性都可以有四个值（上 右 下 左）、三个值（上 左右 下）、两个值（上下 左右）、一个值（上下左右）的情况*/  
        border-top:1px solid blue;
        /*上边框*/ 
        border-bottom:1px solid blue;
        /*下边框*/ 
        border-right:1px solid yellow;
        /*右边框*/
        border-left:1px solid plum;
        /*左边框*/

        /*还有更详细的写法：*/
        border-top-width:10px;
        /*上边框的宽度*/
        border-top-style:solid;
        /*上边框的样式*/
        border-top-color:10px;
        /*上边框的颜色*/
    }