一、盒子模型

​ 盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成是一个个盒子。盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)、外边距(margin)。转换到我们日常生活中，可以拿手机盒来对比，手机=内容，内边距=盒子中的填充物，边框=盒子的厚度，外边距=两个手机盒之间的距离。

通常我们设置的宽和高是指“手机”content的宽高，一整个盒子还包含了“填充物”、盒子、盒子与盒子的距离。

二、W3C盒模型

盒模型由内容(content)、==填充(padding)、边框(border)、边界(margin)==组成

也就是说边距的大小是包括在对象的大小里面的

注：子div如果没有设置长宽，那么默认是不会超过父div的大小的，==如果子div没有设置大小，那么会直接继承父div相应的大小（继承width和height都可以）==

####margin外边距

当前元素与其他元素之间的距离（==与父子元素都算，只要是其附近的元素==）

• 围绕在元素边框周围的空白区域

  • 会在元素外创建额外的空白区域

  • 外边距是透明的

• 语法：margin:value;

• 单边设置

  • margin-top/right/bottom/left: value;
  • value可取值为像素，%，==auto==，==可以为负值==

• 外边距简写，直接一起赋值

  • margin: value(四个方向相同) ;

  • margin: value(上下) value(左右);

  • margin: value(上) value(左右) value(下);

  • margin: value(上) value(右) value(下) value(左);

• 外边距合并

  • 1.两个元素之间的外间距合并：

  注：外边距不会叠加，如果两个div设置的margin重叠了，那么以大的数字为准

  • 当两个垂直外边距相遇时，他们将形成一个外边距，成为外边距合并

  • 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

  • 2.包含式的外间距合并：

#father{
    width: 500px;
    height:200px;
    /*加一像素红色 实线边框*/
    /*border: 1px solid red;*/
    /*或者：overflow: hidden;*/
    overflow: hidden;
    background: green;
}
#son{
    width:200px;
    height:100px;
    background: pink;
    margin-top:20px;
}

会造成里面的son带着外面的father一起和上面产生空隙

如何解决，不让他们一起：

1.加一像素红色 实线边框：border：1px solid red; 2.overflow：hidden;

• margin设置元素外边距的宽度，它有这么几个特点：

  • ==块级元素==的垂直相邻==外边距会合并==，左右外边距不会合并
  • 行内元素实际上不占上下外边距（本来就没有），行内元素的左右外边距不合并
  • ==浮动元素==的外边距也==不会合并==
  • 允许指定负的外边距值，不过使用时要小心

• 实现块状元素居中，在margin最后面加一个auto：

• #block{
      width:1200px;
      background: blue;
      height: 40px;
      /*可以实现让块状元素居中显示*/
      margin:10px auto;
  }

border边框

​ border属性设置一个元素的边框，它有三个要素：宽、样式、颜色，统称“边框三要素”。

• 三要素书写的时候一般如下顺序： border：宽度 样式 颜色 border: 1px solid red;

• 不过不按此顺序来写依然能正常显示。 div

• border-style设置边框的样式，有五种常用样式可选：

​ 点状dotted ​ 实线solid （常用） ​ 双线double （ 需要最起码设置为3像素，不然显示不下） ​ 虚线dashed ​ 无边框none

• border的==三要素可以统一写在”border”属性中，也可以单独设置。== 统一的写法：border: 1px solid red; 单独设置的写法： border-width: ; border-style: ; border-color: ;

  ​ 要注意，在style属性为空的情况下，整个边框是不会出现的，也就是说==必须要有style==。这不论是统一写在border或是单独设置都是这样的。 ​ 不写width会有默认3像素的值。 ​ 不写颜色会默认为黑色。

  ​ 注：单独设置并且单独设置某根线的写法：left,right,bottom,top

  border-right-width: ;

  border-right-style: ;

  border-right-color: ;

padding内边距

• 内容区域和边框之间的空间

  会扩大元素边框所占用的区域

  可以实现一个定位元内容的效果，还可以实现一个标签大小随这个内边距大小变动的效果

• 语法：padding:value;

  单边设置

  padding-top/right/bottom/left:value;

  value可取值为像素，百分比，但==不能为负数==

• 简写的方式与margin的相同

• 内边距的简写 padding: value(四个方向相同) ; padding: value(上下) value(左右); padding: value(上) value(左右) value(下); padding: value(上) value(右) value(下) value(左);

• padding和border要加在div的原本长宽上面，才是整个的一个长宽

• div{
      width:150px;
      height:150px;
      background: red;
      clear: both; /*避免重合，清除一下浮动*/
      border:5px solid red;
      padding: 20px;
      /*margin:20px;*/
      /*
          padding的宽高要记录在盒子模型的宽高之内，于此相同的是border也要记录在盒子模型的宽高之内，但是margin并不算在宽高之内。所以在书写div的宽高时注意在想要的一个宽高的基础上减掉内边距和边框(标准盒模型)
      */
  }

div的宽=width+padding+border

怪异盒模型

• 盒子模型分两种，一种是符合W3C规范的标准例子模型，另一种是IE的盒子模型，IE的盒子模型也被叫怪异盒子。
• 可以看到 IE 盒子模型也包括 margin、border、padding、content，不过，和标准盒子模型不同的是：IE 盒子模型的宽，包含了 border 和 padding。

div的宽=width（包括了border+padding）

• ​ box-sizing属性

  该属性允许你以“W3C的盒模型”或“IE盒模型”来定义元素，以适应区域。换句话说，当前元素使用哪种盒模型，可以由box-sizing属性来指定。 它有两个值： （1）content-box（标准） padding和border不被包含在width和height内，元素的实际大小为宽高+border+padding，此为标准模式下的盒模型，不设置则默认为这个。

  ​ （2）border-box（怪异） padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多宽。此属性为怪异模式下的盒模型。

  div{
      width:200px;
      height:200px;
      padding:20px;
      border:5px solid red;
      background: red;
      /*设置怪异盒*/
      box-sizing: border-box;
  }