在CSS里,每个可视的HTML元素在页面上都会被渲染成一个矩形区域,通常被称为盒子模型。
区域组成
盒子模型主要定义四个区域:
- 内容(content)、
- 内边距(padding)、
- 边框(border)
- 外边距(margin)。
![b6041fbd50c459891ceefc91a49874dd.png](https://i-blog.csdnimg.cn/blog_migrate/70c5f9e5ebd984ef81ac6f3f2a3884b2.jpeg)
容器元素的客户区域包含内边距(padding)和内容(content),但不包含边框(border)。因此在position=absolute的情况下,left和top属性指定的是子元素的外边距(margin)的左上角相对于父元素的内边距(padding)左上角的位置。
类型
盒子模型有两种类型:传统的content-box和CSS3之后才导入的border-box,由box-sizing属性定义。虽然border-box更位直观,但因为兼容的原因,缺省值仍然是传统的content-box。
content-box
width和height定义的是内容(Content)部分的宽度和高度而不是整个盒子的高度,内边距(padding)、边框(border)和外边距(margin)依次加在外面。背景会填充padding和content部分。
![5c42dec35fa5056dca2699e667fcc680.png](https://i-blog.csdnimg.cn/blog_migrate/b71eaa67407d5df97a63e138bf72da89.jpeg)
border-box
width和height定义包含边框(border),内边距(padding)和内容(content),但不包含外边距(margin)
![887bcadc3d55d8a301b52c8b7613087a.png](https://i-blog.csdnimg.cn/blog_migrate/4c949ece56fc2a7cfbf6c22893e20c66.jpeg)