如何理解css盒模型,如何快速理解css盒模型

1.padding:内边距

1、指定一个值时 该值指定四个边到父内边距的距离

2、指定两个值时 第一个值指定上下 第二个指定左右

3、指定三个值时第一个指定上边、第二个指定左右两边、 第三个指定下边

4、指定四个值时分别为上 右 下 左(顺时针顺序)

2.border:边框

border-width

border-style

border-color

3.margin:外边距

1、指定一个值时 该值指定四个边到父内边距的距离

2、指定两个值时 第一个值指定上下 第二个指定左右

3、指定三个值时第一个指定上边、第二个指定左右两边、 第三个指定下边

4、指定四个值时分别为上 右 下 左(顺时针顺序)

1.盒模型有两种分类 标准盒 和IE模型

标准盒模型

content=width+height

image.png

IE模型(怪异盒模型)

content=width+height+padding+border

image.png

从上面两图大家应可以看得出来在标准模型中，盒模型的宽高只是内容(content)的宽高，

css如何设置两种模型

box-sizing:content-box;

box-sizing:content-box;

盒模型的转换

box-sizing:content-box:w3c标准盒模型

box-sizing:contene-box:IE盒模型