<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8" />
? ? <title>css的背景属性和显示模式</title>
</head>
<body>
? ? <!-- 背景色：background-color
? ? ? ? ?背景图：background-image
? ? ? ? ?作用：网页中，使用背景图实现装饰性的图片效果
? ? ? ? ?缩写：bgi
? ? ? ? ?属性值：url(背景图URL)
? ? ? ? ?注意：背景图默认是平铺（复制）的效果
? ? ? ? ?背景图平铺方式：background-repeat
? ? ? ? ?缩写：bgr
? ? ? ? ?属性值：
? ? ? ? ?no-repeat：不平铺，盒子左上角显示一张背景图
? ? ? ? ?repeat：平铺（默认效果）
? ? ? ? ?repeat-x：水平方向平铺
? ? ? ? ?repeat-y：垂直方向平铺
? ? ? ? ?背景图位置：background-position
? ? ? ? ?属性值：水平方向位置，垂直方向位置关键字
? ? ? ? ?提示：关键字取值写法，可以颠倒取值顺序
? ? ? ? ?可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中
? ? ? ? ?1.关键字
? ? ? ? ?letf：左侧
? ? ? ? ?right：右侧
? ? ? ? ?center：居中
? ? ? ? ?top：顶部
? ? ? ? ?button：底部
? ? ? ? ?2.坐标（数字+px，正负都可以）
? ? ? ? ?正数向右移动，负数向左移动
? ? ? ? ?例
? ? ? ? ?background-position:center bottom;
? ? ? ? ?background-position:50px 100px;
? ? ? ? ?background-position:50px center;
? ? ? ? ?背景图缩放：background-size
? ? ? ? ?作用：设置背景图大小
? ? ? ? ?常用属性值：
? ? ? ? ?1.关键字
? ? ? ? ?2.百分比：根据盒子尺寸计算图片大小
? ? ? ? ?如果写了100% 图片的宽度跟盒子宽度一样，图片的高度按照图片等比例缩放
? ? ? ? ?
? ? ? ? ?3.数字+单位
? ? ? ? ?cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见，
? ? ? ? ?contain：等比例缩放背景图片以完全装入背景图，如果图片的宽高和盒子尺寸相等，可能背景图区部分空白
? ? ? ? ?背景图固定：background-attachment
? ? ? ? ?作用：背景不会随着元素的内容滚动
? ? ? ? ?属性值：fixed
? ? ? ? ?background-attachment：fixed;
? ? ? ? ?背景复合属性：background
? ? ? ? ?属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）
? ? ? ? ?显示模式：标签（元素）的显示方式
? ? ? ? ?作用：布局网页时候，根据标签的显示模式选择合适的标签摆放内容
? ? ? ? ?块级元素特点：
? ? ? ? ?独占一行，宽度默认是父级的100%，添加宽高属性生效
? ? ? ? ?行内元素特点：
? ? ? ? ?一行共存多个，尺寸由内容决定，加宽高都不生效
? ? ? ? ?行内块：一行共存多个，默认尺寸由内容决定，加宽高生效
? ? ? ? ?转换显示模式
? ? ? ? ?属性名：display
? ? ? ? ?属性值：
? ? ? ? ?block：块级
? ? ? ? ?inline-block：行块级
? ? ? ? ?inline：行内
? ? -->
</body>
</html>