CSS盒模型

盒模型有两种，一种为标准盒模型，又称为W3C盒模型；另一种为怪异盒模型，又称为IE盒模型。其区别在于两种盒模型的content的内容不同。

标准盒模型的content为 盒子的宽与高，而怪异盒模型的content为 盒子的 宽 、高、内边距以及外边距。

两种盒模型的切换为C3属性 box-sizing: content-box 为标准盒模型

                                                                border-box 为怪异盒模型 

盒模型结构 从外往里 分别为

                  外边距：margin

                  边框：border

                  内边距：padding

                  内容：content（width + height）

给标准盒模型加padding 以及 border时 会导致盒子变大

给怪异盒模型加padding以及border时  会导致盒子变小

margin：外边距  用来分配元素剩余空间

语法：

  margin： 10px；上、下、左、右 均为10px

  margin： 10px  20px； 上下为10px， 左右为20px；

  margin： 10px 20px 30px；上为10px 下为30px左右为20px

  margin： 10px 20px  30px  40px；上为10px  右为20px  下为30px  左为40px

  margin： 0  auto； 上下为0  左右居中

margin：A  B  C  D； 从上开始，顺时针方向外边距依次为 A(上)、B(右)、C(下)、D(左)

又可以拆分为：

      margin-top： 上外边距

                right： 右外边距

            bottom： 下外边距

                  left： 左外边距

margin重叠效应：默认取盒子之间的最大外边距

                正正取最大值

                正负取相加值

                负负取绝对值最大的

margin溢出现象：子元素想与父元素有间距，会将间距移到外面，导致父元素也向下

解决溢出方案：

（1）给父元素加属性  overflow：hidden

（2）给父元素加属性  border：1px  solid  #ccc；

（3）给父元素加属性  padding：1px（但是会导致父元素高度改变）

padding： 内边距 为 边框与内容之间的区域

语法等同于margin

border：边框 也为复合属性

   border：  10px  solid  red；

  边框宽度为  10    实线  红色

可拆分为

            border-top： 上边框

                     -right： 右边框     

                 -bottom： 下边框

                       -left： 左边框

还可拆分为

      border-width： 边框的宽度

                  -style： 边框的样式                     

                  -color：边框的颜色

又能拆分为

border-top-width： 上边框的宽度

                  -style： 上边框的样式

                  -color： 上边框的颜色

三角形： 

因为边框的形状为梯形，所以当盒子的宽高为零时，回出现四个三角形  将其中三边颜色设置为transparent （透明）

                width：0；

                height：0；

                border： 10px  solid  transparent；

                border-top-color： red；