CSS笔记5-盒模型

块级盒子（Block box）和内联盒子

1. 块级盒子：
   • 盒子会在内联方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
   • 每个盒子都会换行
   • width和height属性可以发挥作用
   • 内边距（padding），外边距（margin）和边框（border）会将其他元素从当前盒子周围推开
2. 内联盒子：
   • 盒子不会产生换行
   • width和height属性将不起作用
   • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于inline状态的盒子推开
   • 水平方向的内边距、外边距以及边框会被应用且会把其他处于inline状态的盒子推开

什么是CSS盒模型

1. 盒模型的各个部分
   • Content box：这个区域是用来显示内容，大小可以通过设置width和height
   • Padding box：包围在内容区域外部的空白区域；大小通过padding相关属性设置
   • Border box：边框盒包裹内容和内边距。大小通过border相关属性设置
   • Margin box：这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过margin相关属性设置