CSS****属性的官方文档
◼ CSS****官方文档地址
◼ CSS****推荐文档地址:
◼ 由于浏览器版本、****CSS****版本等问题，查询某些CSS是否可用:
可以到https://caniuse.com/查询CSS属性的可用性;
这个网站在后续的browserlist工具中我们再详细说明;
目前需要掌握的****CSS****属性
◼ 要想深刻理解所有常用****CSS****属性，最好先学会以下几个最基础最常用的CSS属性
font-size:文字大小
color:前景色(文字颜色)
background-color:背景色
width :宽度
height:高度
CSS属性 - background-color
◼ background-color决定背景色
CSS属性 - color
◼ color属性用来设置文本内容的前景色
- 包括文字、装饰线、边框、外轮廓等的颜色
CSS属性 – text
CSS属性 – text-decoration(常用)
◼ text-decoration用于设置文字的装饰线
- decoration是装饰/装饰品的意思;
◼ text-decoration有如下常见取值:
- none:无任何装饰线
✓ 可以去除a元素默认的下划线 - underline:下划线
- overline: 上划线
- line-through:中划线(删除线)
◼ a元素有下划线的本质是被添加了text-decoration属性
text-transform(一般)
◼ text-transform用于设置文字的大小写转换
- Transform单词是使变形/变换(形变);
◼ text-transform有几个常见的值:
- capitalize:(使...首字母大写, 资本化的意思)将每个单词的首字符变为大写
- uppercase:(大写字母)将每个单词的所有字符变为大写
- lowercase:(小写字母)将每个单词的所有字符变为小写
- none:没有任何影响
◼ 实际开发中用JavaScript代码转化的更多.
text-indent(一般)
◼ text-indent用于设置第一行内容的缩进
◼ text-indent: 2em; 刚好是缩进2个文字
text-align(重要)
◼ text-align: 直接翻译过来设置文本的对齐方式;
◼ MDN: 定义行内内容(例如文字)如何相对它的块父元素对齐;
◼ 常用的值
- left:左对齐
- right:右对齐
- center:正中间显示
- justify:两端对齐
letter-spacing、word-spacing(一般)
◼ letter-spacing、word-spacing分别用于设置字母、单词之间的间距
- 默认是0，可以设置为负数
CSS属性-字体
font-size(重要)
◼ font-size决定文字的大小
◼ 常用的设置
- 具体数值+单位
✓ 比如100px
✓ 也可以使用em单位(不推荐):1em代表100%，2em代表200%，0.5em代表50% - 百分比
✓ 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半
font-family (重要, 不过一般仅设置一次)
◼ font-family用于设置文字的字体名称
- 可以设置1个或者多个字体名称;
- 浏览器会选择列表中第一个该计算机上有安装的字体;
- 或者是通过 @font-face 指定的可以直接下载的字体。
◼ 淘宝使用的字体:
font-weight(重要)
◼ font-weight用于设置文字的粗细(重量)
◼ 常见的取值:
- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 :每一个数字表示一个重量
- normal:等于400
- bold:等于700
◼ strong、b、h1~h6等标签的font-weight默认就是bold
font-style(一般)
◼ font-style用于设置文字的常规、斜体显示
- normal:常规显示
- italic(斜体):用字体的斜体显示(通常会有专门的字体)
- oblique(倾斜):文本倾斜显示(仅仅是让文字倾斜)
◼ em、i、cite、address、var、dfn等元素的font-style默认就是italic
font-variant(了解)
◼ font-variant可以影响小写字母的显示形式
- variant是变形的意思;
◼ 可以设置的值如下
- normal:常规显示
- small-caps:将小写字母替换为缩小过的大写字母
line-height(常用)
◼ line-height用于设置文本的行高
- 行高可以先简单理解为一行文字所占据的高度
为什么文本需要行高?
line-height
◼ 行高的严格定义是:两行文字基线(baseline)之间的间距
◼ 基线(baseline):与小写字母x最底部对齐的线
line-height
◼ 注意区分height和line-height的区别
- height:元素的整体高度
- line-height:元素中每一行文字所占据的高度
◼ 应用实例:假设div中只有一行文字，如何让这行文字在div内部垂直居中
- 让line-height等同于height
font
◼ font是一个缩写属性
font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写;
font-style font-variant font-weight font-size/line-height font-family
◼ 规则:
font-style、font-variant、font-weight可以随意调换顺序，也可以省略
/line-height可以省略，如果不省略，必须跟在font-size后面
font-size、font-family不可以调换顺序，不可以省略
CSS选择器(selector)
◼ 开发中经常需要找到特定的网页元素进行设置样式
- 思考:如何找到特定的那个元素?
◼ 什么是CSS选择器
- 按照一定的规则选出符合条件的元素，为之添加CSS样式
◼ 选择器的种类繁多，大概可以这么归类
- 通用选择器(universal selector)
- 元素选择器(type selectors)
- 类选择器(class selectors)
- id选择器(id selectors)
- 属性选择器(attribute selectors)
- 组合(combinators)
- 伪类(pseudo-classes)
- 伪元素(pseudo-elements)
通用选择器
◼ 通用选择器(universal selector)
- 所有的元素都会被选中;
◼ 一般用来给所有元素作一些通用性的设置
- 比如内边距、外边距;
- 比如重置一些内容;
◼ 效率比较低，尽量不要使用;
简单选择器
◼ 简单选择器是开发中用的最多的选择器:
- 元素选择器(type selectors), 使用元素的名称;
- 类选择器(class selectors), 使用 .类名 ;
- id选择器(id selectors), 使用 #id;
id注意事项
◼ 一个HTML文档里面的id值是唯一的，不能重复
id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
最好不要用标签名作为id值
◼ 中划线又叫连字符(hyphen)
属性选择器(attribute selectors)
◼ 拥有某一个属性 [att]
◼ 属性等于某个值 [att=val]
◼ 其他了解的(不用记)
[attr*=val]: 属性值包含某一个值val;
[attr^=val]: 属性值以val开头;
[attr$=val]: 属性值以val结尾;
[attr|=val]: 属性值等于val或者以val开头后面紧跟连接符-;
[attr~=val]: 属性值包含val, 如果有其他值必须以空格和val分割;
后代选择器(descendant combinator)
◼ 后代选择器一: 所有的后代(直接/间接的后代)
- 选择器之间以空格分割
◼ 后代选择器二: 直接子代选择器(必须是直接自带)
- 选择器之间以 > 分割;
兄弟选择器(sibling combinator)
◼ 兄弟选择器一:相邻兄弟选择器
- 使用符号 + 连接
◼ 兄弟选择器二: 普遍兄弟选择器 ~
- 使用符号 ~ 连接
选择器组 – 交集选择器
◼ 交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)
- 在开发中通常为了精准的选择某一个元素;
◼ 并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)
- 在开发中通常为了给多个元素设置相同的样式;
认识伪类
◼ 什么是伪类呢?
Pseudo-classes: 翻译过来是伪类;
伪类是选择器的一种，它用于选择处于特定状态的元素;
◼ 比如我们经常会实现的: 当手指放在一个元素上时, 显示另外一个颜色;
伪类(pseudo-classes)
◼ 常见的伪类有
-
1.动态伪类(dynamic pseudo-classes)
- :link、:visited、:hover、:active、:focus
-
2.目标伪类(target pseudo-classes)
- :target
-
3.语言伪类(language pseudo-classes)
- :lang( )
-
4.元素状态伪类(UI element states pseudo-classes)
- :enabled、:disabled、:checked
-
5.结构伪类(structural pseudo-classes)
:nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-of-type( )
:first-child、:last-child、:first-of-type、:last-of-type
:root、:only-child、:only-of-type、:empty
-
6.否定伪类(negation pseudo-classes)
- :not()
所有的伪类: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
动态伪类(dynamic pseudo-classes)
◼ 使用举例
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上(重要)
a:active 激活的链接(鼠标在链接上长按住未松开)
◼ 使用注意
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
所以建议的编写顺序是 :link、:visited、:hover、:active
◼ 除了a元素，:hover、:active也能用在其他元素上
动态伪类 - :focus
◼ :focus指当前拥有输入焦点的元素(能接收键盘输入)
- 文本输入框一聚焦后，背景就会变红色
◼ 因为链接a元素可以被键盘的****Tab****键选中聚焦，所以:focus也适用于a元素
◼ 动态伪类编写顺序建议为
- :link、:visited、:focus、:hover、:active
◼ 直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了
- 相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red
伪元素(pseudo-elements)
◼ 常用的伪元素有
:first-line、::first-line
:first-letter、::first-letter
:before、::before
:after、::after
◼ 为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line
伪元素 - ::first-line - ::first-letter(了解)
◼ ::first-line可以针对首行文本设置属性
◼ ::first-letter可以针对首字母设置属性
伪元素 - ::before和::after(常用)
◼ ::before和::after用来在一个元素的内容之前或之后插入其他内容(可以是文字、图片)
- 常通过 content 属性来为一个元素添加修饰性的内容。
CSS继承-层叠-元素类型
CSS的属性继承
◼ CSS的某些属性具有继承性(Inherited):
如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);
◼ 如何知道一个属性是否具有继承性呢?
常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性;
这些不用刻意去记, 用的多自然就记住了;
◼ 另外要多学会查阅文档, 文档中每个属性都有标明其继承性的:
tips:注意(了解):继承过来的是计算值, 而不是设置值
常见的继承属性有哪些呢?(不用记)
CSS属性的层叠
◼ CSS的翻译是层叠样式表, 什么是层叠呢?
- 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置;
- 那么属性会被一层层覆盖上去;
- 但是最终只有一个会生效;
◼ 那么多个样式属性覆盖上去, 哪一个会生效呢?
判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;
判断二: 先后顺序, 权重相同时, 后面设置的生效;
选择器的权重
◼ 按照经验，为了方便比较****CSS****属性的优先级，可以给CSS属性所处的环境定义一个权值(权重)
- !important:10000
- 内联样式:1000
- id选择器:100
- 类选择器、属性选择器、伪类:10
- 元素选择器、伪元素:1
- 通配符:0
HTML元素的类型
◼ 我们会经常提到div是****块级元素****会独占一行, span是****行内级元素****会在同一行显示.
- 到底什么是块级元素, 什么是行内级元素呢?
◼ HTML定义元素类型的思路:
HTML元素有很多, 比如h元素/p元素/div元素/span元素/img元素/a元素等等;
-
当我们把这个元素放到页面上时, 这个元素到底占据页面中一行多大的空间呢?
✓ 为什么我们这里只说一行呢? 因为垂直方向的高度通常是内容决定的;
比如一个h1元素的标题, 我们必然是希望它独占一行的, 其他的内容不应该和我的标题放在一起;
比如一个p元素的段落, 必然也应该独占一行, 其他的内容不应该和我的段落放在一起;
而类似于img/span/a元素, 通常是对内容的某一个细节的特殊描述, 没有必要独占一行;
◼ 所以, 为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML将元素区分(本质是通过****CSS****的)成了两类
块级元素(block-level elements): 独占父元素的一行
行内级元素(inline-level elements):多个行内级元素可以在父元素的同一行中显示
通过CSS修改元素类型
◼ 前面我们说过, 事实上元素没有本质的区别:
div是块级元素, span是行内级元素;
div之所以是块级元素仅仅是因为浏览器默认设置了display属性而已;
◼ 那么我们是否可以通过display来改变元素的特性呢?
◼ 当然可以!
CSS属性 - display
◼ CSS中有个display属性，能修改元素的显示类型，有4个常用值
- block:让元素显示为块级元素
- inline:让元素显示为行内级元素
- inline-block:让元素同时具备行内级、块级元素的特征
- none:隐藏元素
◼ 事实上display还有其他的值, 比如flex, 后续会专门学习;
display值的特性(非常重要)
◼ block元素:
独占父元素的一行
可以随意设置宽高
高度默认由内容决定
◼ inline-block元素:
跟其他行内级元素在同一行显示
可以随意设置宽高
可以这样理解
✓ 对外来说，它是一个行内级元素
✓ 对内来说，它是一个块级元素
◼ inline:
跟其他行内级元素在同一行显示; 不可以随意设置宽高;
宽高都由内容决定;
编写HTML时的注意事项
◼ 块级元素、inline-block元素
一般情况下，可以包含其他任何元素(比如块级元素、行内级元素、inline-block元素)
特殊情况，p元素不能包含其他块级元素
◼ 行内级元素(比如a、span、strong等)
- 一般情况下，只能包含行内级元素
元素隐藏方法
◼ 方法一: display设置为none
- 元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);
◼ 方法二: visibility设置为hidden
设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;
默认为visible, 元素是可见的;
◼ 方法三: rgba设置颜色, 将a的值设置为0
- rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素;
◼ 方法四: opacity设置透明度, 设置为0
- 设置整个元素的透明度, 会影响所有的子元素;
CSS****属性 - overflow
◼ overflow****用于控制内容溢出时的行为
visible:溢出的内容照样可见
hidden:溢出的内容直接裁剪
scroll:溢出的内容被裁剪，但可以通过滚动机制查看
会一直显示滚动条区域，滚动条区域占用的空间属于width、height
auto:自动根据内容是否溢出来决定是否提供滚动机制
CSS样式不生效技巧
◼ 为何有时候编写的CSS属性不好使，有可能是因为
选择器的优先级太低
选择器没选中对应的元素
CSS属性的使用形式不对
✓ 元素不支持此CSS属性，比如span默认是不支持width和height的
✓ 浏览器不支持此CSS属性，比如旧版本的浏览器不支持一些css module3的某些属性
✓ 被同类型的CSS属性覆盖，比如font覆盖font-size
◼ 建议 充分利用浏览器的开发者工具进行调试(增加、修改样式)、查错
CSS盒子模型
认识盒子
◼ 生活中, 我们经常会看到各种各样的盒子:
HTML每个元素都是盒子
◼ 事实上, 我们可以把HTML每一个元素看出一个个的盒子:
盒子模型(Box Model)
◼ HTML中的每一个元素都可以看做是一个盒子，如下图所示，可以具备这4个属性
-
内容(content)
- 元素的内容width/height
-
内边距(padding)
- 元素和内容之间的间距
-
边框(border)
- 元素自己的边框
-
外边距(margin)
- 元素和其他元素之间的间距
盒子模型的四边
◼ 因为盒子有四边, 所以margin/padding/border都包括top/right/bottom/left四个边:
在浏览器的开发工具中
内容 – 宽度和高度
◼ 设置内容是通过宽度和高度设置的:
宽度设置: width
高度设置: height
◼ 注意: 对于行内级非替换元素来说, 设置宽高是无效的!
◼ 另外我们还可以设置如下属性:
min-width:最小宽度，无论内容多少，宽度都大于或等于min-width
max-width:最大宽度，无论内容多少，宽度都小于或等于max-width
移动端适配时, 可以设置最大宽度和最小宽度;
◼ 下面两个属性不常用:
min-height:最小高度，无论内容多少，高度都大于或等于min-height
max-height:最大高度，无论内容多少，高度都小于或等于max-height
内边距 - padding
◼ padding属性****用于设置盒子的内边距, 通常用于设置****边框和内容之间的间距****;
◼ padding包括四个方向, 所以有如下的取值:
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
◼ padding单独编写是一个缩写属性:
padding-top、padding-right、padding-bottom、padding-left的简写属性
padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
◼ padding并非必须是四个值, 也可以有其他值;
padding的其他值
边框 - border
◼ border用于设置盒子的边框:
◼ 边框相对于content/padding/margin来说特殊一些:
边框具备宽度width;
边框具备样式style;
边框具备颜色color;
设置边框的方式
◼ 边框宽度
border-top-width、border-right-width、border-bottom-width、border-left-width
border-width是上面4个属性的简写属性
◼ 边框颜色
border-top-color、border-right-color、border-bottom-color、border-left-color
border-color是上面4个属性的简写属性
◼ 边框样式
border-top-style、border-right-style、border-bottom-style、border-left-style
border-style是上面4个属性的简写属性
边框的样式设置值
◼ 边框的样式有很多, 我们可以了解如下的几个:
groove:凹槽, 沟槽, 边框看上去好象是雕刻在画布之内
ridge:山脊, 和grove相反，边框看上去好象是从画布中凸出来
同时设置的方式
◼ 如果我们相对某一边同时设置 宽度 样式 颜色, 可以进行如下设置:
Border-top
Border-right
border-bottom
Border-left
border:统一设置4个方向的边框
◼ 边框颜色、宽度、样式的编写顺序任意
圆角 – border-radius
◼ border-radius用于设置盒子的圆角
◼ border-radius常见的值:
数值: 通常用来设置小的圆角, 比如6px;
百分比: 通常用来设置一定的弧度或者圆形;
border-radius补充
◼ border-radius事实上是一个缩写属性:
将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom- left-radius 简写为一个属性。
开发中比较少见一个个圆角设置;
◼ 如果一个元素是正方形, 设置border-radius大于或等于50%时，就会变成一个圆.
外边距 - margin
◼ margin属性****用于设置盒子的****外边距****, 通常用于****元素和元素之间的间距****;
◼ margin包括四个方向, 所以有如下的取值:
margin-top:上内边距
margin-right:右内边距
margin-bottom:下内边距
margin-left:左内边距
◼ margin单独编写是一个缩写属性:
margin-top、margin-right、margin-bottom、margin-left的简写属性
margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
◼ margin也并非必须是四个值, 也可以有其他值;
margin的其他值
上下margin的传递
◼ margin-top传递
- 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
◼margin-bottom传递
- 如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
◼ 如何防止出现传递问题?
给父元素设置padding-top\padding-bottom
给父元素设置border
触发BFC: 设置overflow为auto
◼建议
margin一般是用来设置兄弟元素之间的间距
padding一般是用来设置父子元素之间的间距
上下margin的折叠
◼ 垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能会合并为1个margin，这种现象叫做collapse(折叠)
◼ 水平方向上的margin(margin-left、margin-right)永远不会collapse
◼ 折叠后最终值的计算规则
- 两个值进行比较，取较大的值
◼ 如何防止margin collapse ?
- 只设置其中一个元素的margin
上下margin折叠的情况
◼ 两个兄弟块级元素****之间****上下margin的折叠
◼ 父子块级元素****之间****margin的折叠
外轮廓 - outline
◼ outline表示元素的外轮廓
不占用空间
默认显示在border的外面
◼ outline相关属性有
outline-width: 外轮廓的宽度
outline-style:取值跟border的样式一样，比如solid、dotted等
outline-color: 外轮廓的颜色
outline:outline-width、outline-style、outline-color的简写属性，跟border用法类似
◼ 应用实例
- 去除a元素、input元素的focus轮廓效果
盒子阴影 – box-shadow
◼ box-shadow属性可以设置一个或者多个阴影
每个阴影用<shadow>表示
多个阴影之间用逗号,隔开，从前到后叠加
◼ <shadow>的常见格式如下
第1个<length>:offset-x, 水平方向的偏移，正数往右偏移
第2个<length>:offset-y, 垂直方向的偏移，正数往下偏移
第3个<length>:blur-radius, 模糊半径
第4个<length>:spread-radius, 延伸半径
<color>:阴影的颜色，如果没有设置，就跟随color属性的颜色
inset:外框阴影变成内框阴影
盒子阴影 – 在线查看
◼ 我们可以通过一个网站测试盒子的阴影:
文字阴影 - text-shadow
◼ text-shadow用法类似于box-shadow，用于给文字添加阴影效果
◼ <shadow>的常见格式如下
- 相当于box-shadow, 它没有spread-radius的值;
◼ 我们可以通过一个网站测试文字的阴影:
行内非替换元素的注意事项
◼ 以下属性对行内级非替换元素不起作用
- width、height、margin-top、margin-bottom
◼ 以下属性对行内级非替换元素的效果比较特殊
- padding-top、padding-bottom、上下方向的border
CSS属性 - box-sizing
◼ box-sizing用来设置盒子模型中宽高的行为
◼ content-box
- padding、border都布置在width、height外边
◼ border-box
- padding、border都布置在width、height里边
box-sizing: content-box
◼ 元素的实际占用宽度 = border + padding + width
◼ 元素的实际占用高度 = border + padding + height
box-sizing: border-box
◼ 元素的实际占用宽度 = width
◼ 元素的实际占用高度 = height
IE盒子模型
元素的水平居中方案
◼ 在一些需求中，需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block)
◼ 行内级元素(包括inline-block元素)
- 水平居中:在父元素中设置text-align: center
◼ 块级元素
- 水平居中:margin: 0 auto
CSS设置背景
认识网页的背景
◼ 在开发中, 为了让网页更加美观, 我们经常会设置各种各样的背景:
- 我们前面已经学习了如何设置背景颜色, 这里我们要学习设置背景的更多知识;
background-image
◼ background-image用于设置元素的背景图片
- 会盖在(不是覆盖)background-color的上面
◼ 如果设置了多张图片
- 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
◼ 注意:如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的
background-repeat
◼ background-repeat用于设置背景图片是否要平铺
◼ 常见的设值有
repeat:平铺
no-repeat:不平铺
repeat-x:只在水平方向平铺
repeat-y:只在垂直平方向平铺
background-size
◼ background-size用于设置背景图片的大小
auto:默认值, 以背景图本身大小显示
cover:缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见
contain:缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
<percentage>:百分比，相对于背景区(background positioning area)
length:具体的大小，比如100px
background-position
◼ background-position用于设置背景图片在水平、垂直方向上的具体位置
可以设置具体的数值 比如 20px 30px;
水平方向还可以设值:left、center、right
垂直方向还可以设值:top、center、bottom
如果只设置了1个方向，另一个方向默认是center
background-attachment
◼ background-attachment决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
◼ 可以设置以下3个值
scroll:此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动
local:此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动.
fixed:此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
background
◼ background是一系列背景相关属性的简写属性
◼ 常用格式是
◼ background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面
◼ 其他属性也都可以省略，而且顺序任意
background-image和img对比
◼ 利用background-image和img都能够实现显示图片的需求，在开发中该如何选择?
◼总结
img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片
background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息
