使用box-sizing布局

盒模型

---

• 在css中比较重要的就是 盒模型，它是在web中比较重要的一个基础点，当然其中涉及到 高度和宽度计算。

• width：宽度,在CSS中是指内容的宽度，并不是盒子的宽度

• height：高度，和宽度一样的原理

• padding:内边距

• border：变框

• margin:外边距

• 盒子的宽度 = padding + border +width

• 盒子的高度 = padding+border+height

---

box-sizing

• box-sizing: content-box|border-box|inherit

  .demo {
            padding: 30px;
            background-color: #036663;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            box-sizing: border-box;
            border: 5px solid red;
        }

• 当 设置是box-sizing: border-box; 盒子的整体宽度就是200px 包括padding ,content(真实的宽度和高度)，border

content-box

• 指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外

border-box

• 元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的"宽度"和"高度"属性计算

inherit

• 继承 父元素 box-sizing属性的值

---

兼容

• 在使用时 不同的浏览器不一样，所以下面的伪元素兼容

*, *:before, *:after {
　　-moz-box-sizing: border-box;
　　-webkit-box-sizing: border-box;
　　box-sizing: border-box;
　　}