css盒模型

盒子模型是HTML中最基础最核心的概念，理解了盒模型才能更好的开发网页，做出更美观的网页。下面来给大家总结下自己积累的盒子模型的知识，希望对初学者有用。

1、什么是盒模型

经常做网页设计的一定对内容(content)、填充(padding)、边框(border)、边界(margin)不陌生，这些都是盒子模型所具备的属性。盒模型就是网页设计css样式所使用的一种思维模型。

2、盒模型结构

（1）内容（content）：如果把盒模型比作一个精美包装的礼品，那拆掉外部装饰而要送的礼品就是盒模型的内容。

（2）填充（padding）：当我们拆开礼品盒时，不会立刻发现礼品而是发现了一些泡沫或是其他填充物，也就是盒模型的填充。

（3）边框（border）:不多解释，就是和礼品盒本身。

（4）边界（margin）：如果你人缘好，收到很多礼物，那么你就要考虑盒子的摆放问题了。通常为了美观和更好地保存我们会在盒子之间设置一定空隙，这个空隙就是边界。

如果觉得抽象就请看下图：

图中标明了盒子模型的各组成部分，还有出了内容以外，其他部分都分上下左右，你可以在设置它们的大小来调整盒模型样式。

3、盒模型宽度和高度

盒模型的宽度高度和我们平时所认知的宽度高度并不相同，css定义的宽高是填充以里的内容的宽高。因此一个盒子的实际宽度=左边界+左边框+左填充+内容宽度+右边界+右边框+右填充。

4、关于css盒模型的几点注意

（1）padding、border、margin都是可选的，若未设置初值默认为0。

（2）我们只介绍了标准盒模型的盒模型的高度宽度，但实际上还有一种怪异盒模型的宽高计算，它们的计算方式不同。默认情况下我们代码中元素的是以content-box作为标准的盒子。当不对doctype进行定义时，会触发怪异模式。

• 在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

• 在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

目前大部分主流浏览器支持W3C标准盒模型（标准盒模型），但IE依旧保持自己标准的盒模型（怪异盒模型）。

（3）一旦为页面设置了恰当的DTD大多数浏览器都会按照标准盒模型来显示内容。但就像前面所说IE保持了自己的模型标准，虽然目前有解决方案，但最好还是规避这类问题。就是说不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素中去。

end~