css盒模型

什么是盒模型：

CSS 盒模型 也叫框模型 (Box Model) ，包含了元素内容（content）、内边距（padding，也叫填充）、边框（border）、外边距（margin），网页是由大小不同的盒子组成的，所有页面中的元素都可以看成一个盒子，并且占据着一定的页面空间。

如上图所示：

一：内容区content

内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的3部分都是可选的，可用width，height控制内容长宽（只适用于块元素）

二：内边距padding

1.是边框与内容区的空间。

2. padding:10px 20px 30px 40px（设置元素的上、右、下、左四个方向的内边距）
   padding:10px 20px 30px（设置元素的上、左右、下四个方向的内边距）
   padding:10px 20px;（设置元素的上下、左右四个方向的内边距）
   padding:10px（设置元素上下左右四个方向的内边距）

  也可以用单独设置单边的内边距：
  Padding-top、padding-right、padding-left、padding-bottom

3.
  1）在父元素设置了宽高时用padding时须留意要减少增加的padding值，因它是填充增加。    
  2）在子元素设置padding值后未超过父元素的范围，不用减。

三：外边距margin

 1.指的是两个盒子之间的距离。

 2.设置元素边距方式与padding相同。

 3.用法
   1）margin:0; 取消默认外边距；padding:0; 取消默认内边距
   2）margin:0 auto;左右自动外边距，实现标签在父标签范围内水平居中
   3）margin:-10px;标签反方向的微调

四：边框border:

  1.设置内容的边框。

  2.边框样式（常用属性）：例border-style：none
    1）none 没有边框
    2）solid 实线     
    3）dashed 虚线
    4）double双线

  3.可设置宽度（width）和颜色（color）
  
  4.简写：border：1px solid #fff；

  5.单边设置样式：border-top，border-left，border-bottom，border-right；

  6.设置元素边距方式与padding相同

五：盒子的最终尺寸计算

宽度=50px(width)+5px(左填充)+5px（右填充）+1px(左边框线)+1px(右边框线)
高度=50px(height)+5px(上填充)+5px（下填充）+1px(上边框线)+1px(下边框线)

六：注意事项

1.上诉是标准盒模型的概述，即W3C盒子模型；另一种为怪异盒模型（IE盒子），计算宽高方式与标准不同。

​以下内容是前端小白对CSS盒模型的小小理解。