盒模型组成部分

盒模型的组成：content(内容区)+padding(填充区)+border(边框区)+margin(外界区)。

不同部分的说明：

content(内容)：盒子的内容，显示文本和图像。

border(边框)：围绕在内边距和内容外的边框。

padding(内边距)：清除内容周围的区域，内边距是透明的。

margin(外边距)：清除边框外的区域，外边距是透明的。

css盒模型计算公式：

元素的实际宽度=宽度width+padding-left/padding-right+border-left/border-right 元素的实际高度=高度height+padding-top/padding-bottom+border-top/border-bottom

盒模型常用属性:

overflow: hidden;定义盒子不随浮动

margin-left: 50px:使盒子距离外边距左(右上下)50px

margin: 100px auto:使盒子距离外边距上下左右100px

margin: 使盒子距离外边距上右下左为50px 0 0 50px;

margin: 20px 30px:使盒子距离外边距上下20px,左右30px

margin: 10px:使盒子距离外边距上下左右都是10px

border: 5px solid red:定义盒子边框(5px 单实线 红色) {dotted点double双实线}

border-radius: 50px:使盒子边角变圆

border-radius: 50%:使盒子变圆

border-top-left-radius: 50%:使盒子左上角变圆

display: inline-block:将块级元素div盒子等放到一行