CSS盒模型 笔记

盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）

盒子类型：
1. 行盒，display等于inline的元素
2. 块盒，display等于block的元素

行盒在页面中不换行、块盒独占一行
display默认值为inline
浏览器默认样式表设置的块盒：容器元素、h1~h6、p
常见的行盒：span、a、img、video、audio

盒子的组成部分

每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。

每个盒子有四个边界：

内容 Content （内容盒）

width，height，设置的是盒子的宽高

内边距 Padding （填充盒=填充+内容）

内边距的粗细可以由 padding-top、padding-right、padding-bottom、padding-left

简写属性 padding （上 右 下 左）

边框 Border （边框盒=边框+填充+内容）

边框样式：border-style

边框宽度：border-width

边框颜色：border-color

外边距 Margin

边框到其他盒子的距离

外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left

简写属性 margin

附：CSS 基础框盒模型介绍 – CSS：层叠样式表 | MDN (mozilla.org)