css盒子模型包括什么(css盒式模型)

导语：前端面试题-CSS盒模型

前端面试题：介绍一下前端的盒模型

前端的盒模型，其实就是CSS的盒模型。

每个HTML元素可以看做一个矩形方块，方块又会包含小方块，如同盒子一样层层包裹，所以被称为盒模型。

盒模型包括的元素有：内容（content）、内边距（padding）、边框（border）、外边距（margin）

CSS盒模型

一、盒模型的计算

CSS的盒模型，分两种，一种是W3C标准盒模型，一种是IE盒模型

1、W3C标准盒模型

在W3C标准盒模型中，设置元素的width 和 height，就是设置元素的内容区宽度和高度。内边距和边框的大小不会对元素内容区有影响。

width = content 宽度

height = content 高度

2、IE盒模型

在IE盒模型中，内边距和边框的大小会对元素内容区有影响。

width = content 宽度 + padding（左右内边距） + border（左右边框）

height = content 高度 + padding（上下内边距） + border（上下边框）

二、设置盒模型

CSS3 新增的属性 box-sizing，可以设置使用不同的盒模型

content-box：默认值，使用W3C标准盒模型border-box：使用IE盒模型inherit：继承父类的盒模型

三、代码实例

.box {

width: 200px;

height: 200px;

background: yellow;

padding: 10px;

border: 5px solid red;

margin: 10px;

}

.box-w3c {

box-sizing: content-box;

}

.box-ie {

box-sizing: border-box;

}

w3c标准盒模型

IE盒模型

本文内容由小悦整理编辑！