盒模型

CSS中，所有的元素都被一个个的“盒子”包围，使用CSS实现精准布局、处理元素排列的关键是理解“盒子”

区块盒子与行内盒子

外部显示类型

block

block外部显示类型的盒子会有以下行为：

• 盒子会产生换行
• width和height属性可以发挥作用
• 外边距、内边距和边框会将其他元素从当前盒子周围“推开”
• 如果未指定 width ，方框将沿行向扩展，以填充其容器中的可用空间。大多数情况下，盒子变得和其容器一样宽，占据可用空间的100%

h1 和 p 默认使用block作为外部显示类型

inline

inline外部显示类型的盒子会表现出以下行为

• 盒子不会产生换行
• width 和 height 属性不起作用
• 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于inline状态的盒子推开
• 水平方向的内边距、外边距以及边框会被应用且会把其他处于inline状态的盒子推开

a、span、em和strong默认使用inline作为外部显示类型

内部显示类型

决定盒子内元素的布局方式