盒子模型

CSS 盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

CSS 边框属性

border-style属性用来定义边框的样式
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

border-width 属性为边框指定边框宽度
可以指定长度值，比如 2px

border-color属性用于设置边框的颜色
指定颜色的名称，如 “red”
指定 RGB 值, 如 “rgb(255,0,0)”
指定16进制值, 如 “#ff0000”

CSS外边距属性
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

所有的CSS内边距属性
padding 使用简写属性设置在一个声明中的所有内边距属性
padding-bottom 设置元素的底部内边距
padding-left 设置元素的左部内边距
padding-right 设置元素的右部内边距、
padding-top 设置元素的顶部内边距

元素的宽度和高度

当指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度。
最终元素的总宽度计算公式：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

背景属性

background-color 指定要使用的背景颜色
background-position 指定背景图像的位置
background-size 指定背景图片的大小
background-repeat 指定如何重复背景图像
background-origin 指定背景图像的定位区域
background-clip 指定背景图像的绘画区域
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
background-image 指定要使用的一个或多个背景图像