盒子模型

CSS盒子模型

一、基本概念：

• 标准模型

标准模型

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

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

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

• IE模型

  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;

IE模型

这时候

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

也就是【一】中的两个图