背景

border: 20px solid red;
background-color: #B0E0E6;
background-color: powderblue;
background-image: url(img/logo_05.jpg);/* 背景图 撑不开盒子  在前景图后 */
background-repeat:no-repeat;/* 参数 no-repeat repeat-x  repeat-y水平  */
background-size:100% 100% ;
background-position: center center;/*默认的0px 0px 其他参数top bottom	*/

利用背景来渲染前端 ：

一张图片的不同部分做不同的背景 减轻服务器压力

移动 背景图片不动

显示部分 上 加 下减，左加 右减

多张图片作背景，

background: url(img/icon_21.jpg) no-repeat,url(img/icon_28.jpg) right top no-repeat ;

背景固定

background-attachment:fixed  ;/*固定 fixed  不随div滚动默认：scroll 随div滚动

背景图片

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

背景颜色定位裁剪

background-clip: border-box; // 默认
background-clip: padding-box;//内边距里
background-clip: content-box;//内容里

# 块级元素 居中

**定宽度：**需要谁居中，给其设置 *margin: 0 auto;* （作用：使盒子自己居中）

不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为*display: inline-block;*** 或 ****display: inline;****即将其转换成行内块级/行内元素，给父元素设置 text-align: center;

定位

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；

​