盒子模型的简单了解

盒子模型的组成

盒子模型组成部分：标准盒子 从内向外

1.内容区：content：放置内容的

2.内边距：padding：设置内容与边框的距离

3.边框：border：设置区分盒子内外

4.外边距：margin：设置元素与元素之前的距离，设置元素的位置用法与padding基本一致

盒子模型组成图

盒子模型的分类

标准盒子/W3C盒子：元素默认设置的宽度和高度是指内容区域

IE盒子/怪异盒子：元素默认设置的宽度和高度是指内容区域+内边距+边框

盒子模型的属性

1、外边距属性

外边距属性作用

margin-top上外边距

margin-right右外边距

margin-bottom下外边距

margin-left左外边距

margin上 右 下 左（

对应3个值时margin: 上 右/左 下

对应2个值时margin: 上/下 左/右

对应1个值时margin: 上下左右

）

2、内边距属性

内边距属性作用

padding-top上边距

padding-right右边距

padding-bottom下边距

padding-let左边距

padding上 右 下 左（

对应3个值时padding: 上 右/左 下

对应2个值时padding: 上/下 左/右

对应1个值时padding: 上下左右

）

3、边框属性

边框属性作用

border-style边框线样式，上边 [右边 下边 左边]

border-width边框线宽度，上边 [右边 下边 左边]

border-color边框线颜色，上边,[右边,下边,左边]

border可以简化设置，四边宽度 四边样式 四边颜色

border-radius圆角边框，水平半径参数/垂直半径参数