CSS—盒子模型

盒子模型

在讲到盒模型之前需要知道元素分为块级元素与行内元素，盒模型只是针对于块级元素。行内元素可以通过display属性转换成块级元素；

块级元素与行内元素的区别

1. 块级元素(block)特性：
   总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
2. 内联元素(inline)特性：
   和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)， 外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小

通过box-sizing属性控制元素盒子

box-sizing的可以选择值为 content-box | border-box | inherit；

标准的盒子模型

盒子总宽度 = width + padding + border + margin;

盒子总高度 = height + padding + border + margin
也就是，width/height 只是内容高度，不包含 padding 和 border值

所以上面问题中，设置width为200px，但由于存在padding，但实际上盒子的宽度有240px

怪异盒子模型

从上图可以看到：

盒子总宽度 = width + margin;

盒子总高度 = height + margin;

也就是，width/height 包含了 padding和 border值