什么是盒模型? 谈谈你对盒模型的认识?

每个元素在页面中都会生成一个矩形区域(盒子)

盒子有两种类型:

1. 行盒, display属性等于inline的元素
2. 块盒, display属性等于block的元素

行盒在页面中不换行, 块盒则独占一行.
display属性的默认值是: inline
而浏览器默认样式表为某些元素设置成了块盒: 容器元素, h1~h6, P元素
常见的行盒则有: image, span, a, video, audio

盒子的组成部分

无论行盒块盒, 都由下面几个部分组成, 由内向外分别是:

1. 内容content, 内容部分通常叫做内容盒content-box
2. 填充(内边距)padding, 填充区+内容区=填充盒padding-box
3. 边框border, 边框+填充区+内容区=边框盒border-box
4. 外边距margin, 边框到其他盒子的距离