css盒子模型

盒子模型

1、概念：

盒子模型是一种思维模型，主要用于实现布局效果。（组成：尺寸+内边距+外边距+边框）

2、两种模式：（box-sizing）

1. 标准模式（W3C盒模型） box-sizing:content-box;

CSS中设置的width和height只会影响内容区域的宽度和高度，如果额外设置了padding和border值，则会把标签的实际宽度撑大。

div {
            box-sizing: content-box;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

以上代码会得到一个宽高为200px的W3C盒模型，如图：

如果我们额外设置了padding和border值，则实际宽度会变大。

div {
            box-sizing: content-box;
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 10px solid black;
            background-color: purple;
        }

如图，div的宽高变为了260px，加上了padding和border的宽度。

2. 怪异模式（IE盒模型） box-sizing:border-box;
CSS中设置的width和height等于实际宽度和高度，如果额外设置了padding和border值，则实际宽高不变，内容区域变小。

div {
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

以上代码会得到一个宽高为200px的IE盒模型，如图：

如果我们额外设置了padding和border值，则实际宽度也不会改变，但内容区域会缩小。

div {
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 10px solid black;
            background-color: purple;
        }

如图，div的宽高不变，内容区域宽高缩小为140px，减去了padding和border的宽度。

区别：

元素实际占据的宽高的计算方式不一致：

• 标准模式：
  实际占据的宽度=width+border+padding+margin（高度height同理）
  实际显示的宽度=width+border+padding（高度同理）

• 怪异模式：
  实际占据的宽度=width+margin（高度同理）
  实际显示的宽度=width（高度同理）

**注意：**通常在手机（移动）端使用怪异模式！