简述盒子元素

一、css盒子模型概念
css盒子模型又称为框模型（Box Model），内容主要有4个要素。
1、元素内容（content）：
2、内边距（padding）
3、边框（border）
4、外边距（margin）

图中最内部的框就是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距（padding），然后是挨着（padding）的边框（border），然后最外层是外边距（margin），整个就组成了一个盒子模型。通常我们设置背景的区域就是内容，内边距 ，边框这一块范围。

二、盒子模型的属性
内容（content）的属性：
宽度 width：长度值，百分比（相对于父元素的百分比），auto
高度 height：长度值，百分比（相对于父元素的百分比），auto

内边距（padding）的属性：
padding-left：长度值 | 百分比
padding-right：长度值 | 百分比
padding-top：长度值 | 百分比
padding-bottom：长度值 | 百分比
注意：值不能为负值

边框（border）的属性：
border-width（边框宽度）
border-color（边框颜色）
border-style（边框样式）
如果想要单独修改某一条边的属性，则可表示为border-left/right/top/bottom-width/color/style

外边距（margin）的属性：
margin-left：长度值 | 百分比 | auto
margin-right：长度值 | 百分比 | auto
margin-top：长度值 | 百分比 | auto
margin-bottom：长度值 | 百分比 | auto
说明：值可以为负值

三、盒子模型的计算

元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度

元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。