CSS盒子模型

盒子模型

一、概述

所有HTML元素可以看作盒子。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括以下四个属性。

• 外边距（margin）：外边距是元素边框与周围元素相距的空间（透明的）。
• 边框（border）：可以在元素周围创建边框，边框是元素可见框的最外部。
• 内边距（padding）：内边距指的是元素内容区与边框以内的空间（透明的），默认情况下width和height不包含padding的大小。
• 实际内容（content）：内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。通过width和height两个属性可以设置内容区的大小。

width和height属性只适用于块元素。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

二、对两种盒模型的理解

W3C盒子模型(标准盒模型)

根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的；即在标准模式下的盒模型，
盒子实际内容（content）的width/height=我们设置的width/height;
盒子总宽度/高度=width/height+padding+border+margin。

IE盒子模型(怪异盒模型)

IE5.X 和 6 在怪异模式中使用自己的非标准模型，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的：
盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，
盒子总宽度/高度=width/height + margin = width/height （content宽度/高度） + padding + border + margin。

CSS3指定盒子模型种类

box-sizing : content-box || border-box || inherit;

box-sizing有两个值:content-box(W3C标准盒模型),border-box(怪异模型)，这个css 主要是改变盒子模型大小的计算形式。

.box {
  width: 200px;
  height: 200px;
  border: 20px solid black;
  padding: 50px;
  margin: 50px;
  }

content-box的计算公式会把宽高的定义指向 content，border和 padding 另外计算,也就是说
content(200px) + padding(100px) + border(40px) = 340px(盒子实际大小)

而border-box的计算公式是总的大小涵盖这三者, content 会缩小,来让给另外两者
content(60px) + padding(100px) + border(40px) = 200px（设置的宽高）

两种模式下如何解决样式的兼容性问题

建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。