CSS盒子模型

一、基本概念：

• 标准模型

  height = content(height)
  width = content(width)

  标准模型的宽高就等于他们 content 的宽高

  ✨这是之前写的标准盒模型，可以去看看

• IE 模型

  width = content(width) + padding-left + padding-right + border-left+ border-right;
  height = content(height) + padding-top + padding-bottom + border-top + border-bottom;

  IE 盒模型的宽高包括 border 和 padding

二、CSS 设置盒模型

box-sizing:content-box; // 标准模型
box-sizing:border-box; // IE 模型 

默认是标准模型

看下面代码，这是一个 div 的 css 样式。(默认是标准模型）

width: 100px;
height: 100px;
background: #0f0;
border: 5px solid #f00;
padding: 10px;

这时候的 width 和 height 就是 content 的宽和高

下面我们改一下盒子模型

    width: 100px;
    height: 100px;
    background: #0f0;
    border: 5px solid #f00;
    padding: 10px;
    box-sizing: border-box;

这时候

width = content(width) + padding-left + padding-right + border-left+ border-right;
height = content(height) + padding-top + padding-bottom + border-top + border-bottom;

也就是【一】中的两个图