背景与盒子模型

背景系列样式：

​ 设置标签的背景相关样式

• background-color：设置标签的背景颜色

• background-image：设置背景图像，它的属性值语法格式：url(相对路径);会自动平铺

• background-repeat:设置平铺的方式，有四个值，repeat默认值，no-repeat不平铺，repeat-x水平平铺，repeat-y垂直平铺

• background-position：设置背景定位方式，格式为：水平方向数值 垂直方向数值,

  水平方向有left center right 垂直方向有top center bottom,也可以是具体的像素值 100px 100px;\

• background-size：设置背景图像的尺寸大小，尺寸大小可以使用百分比，也可以使用具体的像素值

• background-attachment：设置背景的关联方式，常用的有两个scroll（会随着滚动条的滚动而滚动），fixed(不会随着滚动条的滚动而滚动)

• 连写-->background：颜色 图片 平铺方式 定位方式... 中间可以任意写。

边框系列样式

​ border属性，连写---> 格式：宽度 样式 颜色。倒角radius:设置边框四角的弧度。

盒子模型

padding：内容到边框的距离叫做为内边距，内边距属性按照上右下左顺序进行设置，也可以分开设置

改变内边距的宽度会影响元素的大小

如果我们采用的内容盒子模型，content-box,那么设置内边距后元素的自身的宽高也会发生改变。

但是如果我们设置盒子模型为边框盒子，border-box，那么设置内边距后自身的宽高不会发生改变，但是内容的宽高会发生改变。

margin：元素边框与元素边框之间的间距就是外边距，设置的顺序也是上右下左，如果我们设置margin的值为：0 auto就代表距离上方为0像素远，距离左右两边为水平居中

如果相邻元素对同一方向设置外边距，则浏览器去大值。

盒子模型的构成;(边框盒子border-box)

1. 元素的宽度：左边边框+左边内边距 +内容宽度+右内边距+右边边框---->width = padding+border+content
2. 元素的高度：上边边框+上边内边距+内容的高度+下边内边距+下边边框 height = padding+border+content
3. 元素空间的宽度：左边的外边距+元素的宽度+右边的外边距
4. 元素空间的高度：上边的外边距+元素的高度+下边的外边距

练习：定义两个div，一个宽高为500px,一个宽高为200px，让小的在大的正中央。