什么是CSS盒模型概念，如何计算其宽度？

Question

什么是CSS盒模型概念，如何计算其宽度？

Answer 1

盒模型是CSS控制页面布局的一个非常重要的概念，页面上的所有元素，包括文本、图像、超级链接、div块等，都可以被看作盒子。由盒子将页面中的元素包含在一个矩形区域内，这个矩形区域则称为“盒模型”。

盒模型由内到外依次分为内容（content）、填充（padding）、边框（border）和边界（margin）4部分，如图15-1所示。盒子的实际大小为这几部分之和，盒子宽度为：左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。