CSS盒子模型的使用及其注意事项——响应式Web系列学习笔记

Posted 2021-10-01 来老铁干了这碗代码

CSS中的一个基本概念就是盒子模型，所谓盒子模型就是把html页面中的元素看作是一个矩形区域，即元素的盒子。
盒子由margin（外边距）、border（边框）、padding（内边距）、content（内容）四部分组成。

多个盒子之间需要注意的问题

网页是由多个元素构成的盒子排列而成的。而多个盒子之间会出现外边距合并的现象，具体如下：

• 上下相邻相邻的块元素垂直外边距合并，如果上面的元素有下外边距，下面的元素有上外边距，则垂直边距为两者中的较大者。
  
• 嵌套块级元素的垂直外边距合并，父元素没有上内边距和边框，则父元素与子元素的上外边距合并为较大者。