css盒子模型

作者:fandonglai日期:2016-09-13 19:42:48 点击:544 css盒子模型

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;
/*上边框的颜色*/
}


上一篇: css的核心之一:css选择器

下一篇: css中的浮动float