padding（外边框、填充区）
含义：表示边框到内容之间的距离：上（top）、右（right）、下（bottom）、左（left）。
类似于箱子和物品之间的填充物。
border边框
dasher（虚线） dotted（点线） soild（实线）
圆角
border-radius：半径值；
一个值表示四个角的半径
两个值的话，第一个表示左上右下。第二个表示左下右上。
border-bottom-right-radius:半径值 半径值；
指定右下角的半径，第一个是水平，第二个是垂直。
border-top：transparent
不显示边框（透明色边框）
outline
格式：outline：边框值；
表示轮廓，用于布局，不占像素
- 只能设置四个边，不能分开设置
子盒子构成
边框盒border-box（背景色默认渲染区域）
由border、padding、content组成
填充盒padding-bow
padding、content，严格意义上overflow溢出，指溢出填充盒。
内容盒content-box
默认情况下width和height就是指内容盒的宽和高。
设置背景色的渲染区域，默认值：border-box（边框盒）
设置渲染区域格式：background-clip：子盒子；
box-sizing：设置元素的渲染尺寸
content-box（默认值）：高和宽设置的是内容盒。
border-box：高和宽设置的是边框盒。
可以解决横向滚动条问题。
视觉格式化模型（visual formatting model）
CSS的一种机制，它规定了页面中多个盒子如何布局。
视觉格式化模型规定，定位体系一共有三种。
- 常规流（normal flow）文档流 常规文档流
- 浮动（float）
- 绝对定位（absolute positionmed）
position默认值：static
float默认值：none
margin：px、em、%、auto（可为负值）
border：px、em
padding：px、em、%
width、height：px、em、%、auto
em单位是根据当前标签的font-size决定的，一个单位是字体大小的两倍。
注：如果当前标签没有设置font-size注意继承。
视口（viewport）
可视窗口，通常指浏览器的可视区域。
视口的尺寸仅受到浏览器可是窗口大小的影响，和内容无关。
包含块（containing block）
每个元素都有一个包含块，它指元素在页面中摆放的区域。
通常情况下元素的包含块是它父级元素的内容盒。
html包含块：初始化包含块（initial containing bolck）由浏览器生成。
原文地址：https://www.cnblogs.com/liuyizhou/p/9222201.html