谈谈css中对盒子的理解

一.什么是盒子？

盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。
盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

二.盒子的宽高如何确定

盒子宽度：外边框宽度+盒子边框宽度+内边距宽度+内容宽度
盒子高度：外边框高度+盒子边框高度+内边距高度+内容高度

1.box-sizing：content-box|border-box|inherit;
确认宽高之前我们得先了解box-sizing.
box-sizing :是用于告诉浏览器如何计算一个元素是总宽度和总高度（这边主要针对内容的宽高）
当box-sizing：content-box时，这种盒子模型成为标准盒子模型，当box-sizing: border-box时，这种盒子模型称为IE盒子模型。

演示为

<div class="content-box">Contentbox</div>
<br>
<div class="border-box">Border box</div>

div {
width: 160px;
height: 80px;
padding: 20px;
border: 10px solid orange;
background: lightgreen; 
}  
   /**元素的总宽度 = 160 + 20*2 + 10*2; 总高度 = 80 + 20*2 + 10*2 ;光内容部分宽高就是160*80 */
.content-box {     box-sizing: content-box;   }
/** 元素的总宽度 = 160; 总高度 = 80px;内容部分宽高就是100*20 */   
.border-box {     box-sizing: border-box;  }

当box-sizing：content-box时盒子的各个属性如下（不写box-sizing默认为content-box）

当box-sizing：border-box盒子显示如下

2.其他元素
边框:boder:颜色 大小 样式
圆角:border-radius:int px;
阴影:box-shadow:offset-x offest-y shadow-radius shadow-color
内边距：padding int px; 嵌套（父子）父子关系用内边距外边距:margin: int px; 并列（兄弟）关系用外边距