.demo{
width: 300px;
height: 200px;
padding: 300px;
border: 5px solid blue;
margin: 20px;
background: #fee;
box-sizing: border-box;
}
<div class="demo">
内边距区域padding area 用内容及可能的边框之间的空白区域扩展内容区域。它位于内边距边界内部,通常有背景——颜色或图片(不透明图片盖住背景颜色). 它的大小为 padding-box 宽与 padding-box 高。
内边距与内容边界之间的空间可以由 padding-top, padding-right, padding-bottom, padding-left 和简写属性 padding 控制。
边框区域border area 是包含边框的区域,扩展了内边距区域。它位于边框边界内部,大小为 border-box 宽和 border-box 高。由 border-width 及简写属性 border控制。
外边距区域margin area用空白区域扩展边框区域,以分开相邻的元素。它的大小为 margin-box 的高宽
</div>在这个例子中,文字会向下溢出content area部分到padding部分,不知道原因百思不得其解啊
padding会撑大盒模型
刚刚又看了一下,个人理解是层叠顺序的锅