盒子的三大部分
盒子的组成部分
盒子壁 border
内边距 padding
盒子内容 width + height;
外边距 margin

image.png

求盒子的可视区域

现在有一个 <div></div> ,要求这个div可视区域的宽高

  1. div{
  2.     width: 100px;
  3.     height: 100px;
  4.     background-color: red;
  5.     border: 10px solid black;
  6.     padding: 10px;
  7.     margin: 10px;
  8. }

image.png
如图所示。盒子的宽应该等于 内容宽 + 左border + 右border + 左padding + 右padding
盒子的高应该等于 内容高 + 上border + 下border + 上padding + 下padding

注意：margin不属于盒子的可视区域