CSS:cascading style sheet(层叠 样式 表)
为网页添加样式
为网页添加样式
术语解释
h1{
color:red;
background-color:lightblue;
text-align: center;
}
CSS规则 = 选择器 + 声明块
选择器
选择器：选中元素
- ID选择器：选中的是对应id值的元素
- 元素选择器
- 类选择器
声明块
出现在大括号中
声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。
CSS代码书写位置
- 内部样式表
css代码在200多行以内，可以考虑使用这种方式，可以提高浏览器加载渲染的速度;
书写在style元素中,style元素放在head元素中(加载网页的时候最先加载的就是CSS代码，否则，以后显示网页就是先只显示HTML，然后有个明显的闪烁，变得有效果了，实质上style元素也可以放在其他位置)
- 内联样式表/元素样式表
常用于在浏览器中进行测试;而且在JS的学习中有用;
直接书写在元素的style属性中
- 外部样式表[推荐]
将样式书写到独立的css文件中。
用link元素把外部样式引入进来;
1). 外部样式可以解决多页面样式重复的问题
2). 有利于浏览器缓存，从而提高页面响应速度(浏览器会自动识别外部样式表，然后把CSS内容缓存起来，如果再次读到文件，就直接使用缓存的CSS内容)
3). 有利于代码分离（HTML和CSS），更容易阅读和维护
常见样式声明
常见样式声明
- color
元素内部的文字颜色
预设值：定义好的单词
三原色，色值：光学三原色（红、绿、蓝），每个颜色可以使用0-255之间的数字来表达，色值。
rgb表示法：
rgb(0, 255, 0)
hex（16进制）表示法：
#红绿蓝
淘宝红：#ff4400, #f40
黑色：#000000, #000
白色：#ffffff, #fff
红：#ff0000, #f00
绿：#00ff00, #0f0
蓝：#0000ff, #00f
紫：#f0f
青：#0ff
黄：#ff0
灰色：#ccc
马尔斯绿: #008c8c;
transparent：表示透明色;
2. background-color
元素背景颜色
- font-size
默认是16px; 设置的是字体的高度
元素内部文字的尺寸大小
1）px：像素，绝对单位，简单的理解为文字的高度占多少个像素
像素；国际标准是每英寸所能容纳的垂直像素点数;
2）em：相对单位，相对于父元素的字体大小 nem = n * font-size
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号(在浏览器中可以设置，默认是16px，但是互联网的字体一般用12px或14px)。
user agent，UA，用户代理（浏览器）
- font-weight
属性值:
lighter :细体
normal :正常(默认值)
bold :加粗(和strong效果是一样的)
bolder :加更粗
100, 200, 直到900(从细到粗，都是整百来表示)
文字粗细程度，可以取值数字，可以取值为预设值
strong，默认加粗。
- font-family
文字类型
arial :设置字体包的样式这个是乔布斯发明的字体
微软雅黑…
如果咱们在代码里写的字体用户，没有安装的话，浏览器就不会把这个内容显示出来，所以最好在font-family最后加上一个sans-serif，表示非衬线字体
必须用户计算机中存在的字体才会有效。
使用多个字体，以匹配不同环境
属性值可以填多个属性值，例如font-famliy:consolas,翩翩体-简,微软雅黑,Arial,sans-serif;
sans-serif，非衬线字体(字体的总类，表示字体边缘没有进行过修饰)
- font-style
字体样式，通常用它设置斜体
font-style的属性值
italic是斜体
i元素，em元素，默认样式，是倾斜字体; 实际使用中，通常用i表示一个图标（icon）
strong元素：默认加粗,表示重要的、不能忽略的内容
em元素:默认斜体,表示强调的内容
- text-decoration
属性值
line-through 中划线
none 没有线
underline 下划线
overline 上划线
文本修饰，给文本加线。
a元素
del元素：错误的内容
s元素：过期的内容
- text-indent
首行文本缩进
属性值填2em，就是表示首行缩进2em(2个文本单位)
- line-height
单行文本所在的高度
当line-height = height (文本所占高度=容器高度)时,单位文本水平垂直居中;
属性值
16px;
normal;
//决定normal大小的因素:字体和浏览器;属字体的影响最为重要;微软雅黑大概是1.32, 宋体是1.41;
200%;
1.2em;
1.5;表示相对于当前元素的字体大小(在学完继承后理解会更加深刻)
每行文本的高度，该值越大，每行文本的距离越大。
设置行高为容器的高度，可以让单行文本垂直居中
行高可以设置为纯数字，表示相对于当前元素的字体大小
- width
宽度
- height
高度
- letter-space
文字间隙
属性值
em
px
- text-align
元素内部文字的水平排列方式
属性值
left：左对齐
center: 居中
right 右对齐
- cursor
属性值为pointer
光标定位值，当鼠标移至该元素时,鼠标变成一个小手
选择器
选择器
可以查看CSS选选择器查看;
选择器：帮助你精准的选中想要的元素
简单选择器
-
ID选择器
-
元素选择器
-
类选择器
-
通配符选择器
*，选中所有元素
-
属性选择器
根据属性名和属性值选中元素
[属性名]/[属性名=属性值]{
}
/* 如果像class这种属性包含了多个属性值的话，不需要把class全部写出来,属性名~=属性值意味着包含了这个属性值的属性名
还有属性名 *= 属性值 */
- 伪类选择器
选中某些元素的某种状态(结合其他选择器使用,单个使用的话会全局选中，伪类通常多用于a元素)
如果a元素要下面四个都要设置，必须按照这个顺序书写，否则会出问题;
1）:link: 超链接未访问时的状态
2）:visited: 超链接访问过后的状态
3）:hover: 鼠标悬停状态
4）:active：激活状态，鼠标按下状态
爱恨法则：love hate
其他伪类选择器：
xxx:nth-child(n)
表示选中xxx元素里的第n个子元素
n如果是具体的数字，表示具体到第几个元素，如果直接写2n，就表示第偶数个子元素；2n+1表示选中奇数子元素;
- 伪元素选择器
::before
::after
属性
content:"文本内容"
元素选择器
xxx::first-letter
表示选中xxx元素内容的第一个文字
选择器的组合
- 并且 —— .
两个选择器之间加’.’
a.className and so on - 后代元素 —— 空格
- 子元素 —— >
- 相邻兄弟元素 —— +
- 后面出现的所有兄弟元素 —— ~(无法选择前面的兄弟元素，这个没有办法，和浏览器的渲染模式有关);
选择器的并列
多个选择器, 用逗号分隔
这只是一个语法糖(方便书写代码,避免代码重复),本质上浏览器渲染的时候都是分开的,即使及并列写到了一起，也会分开;
层叠
层叠
声明冲突：同一个样式，多次应用到同一个元素
层叠：解决声明冲突的过程，浏览器自动处理（权重计算）
1. 比较重要性
重要性从高到底：
作者样式表：开发者书写的样式
1） 作者样式表中的!important样式
2) 作者样式表中的普通样式
3) 浏览器默认样式表中的样式
2. 比较特殊性
看选择器
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个4位数（x x x x）(也其实就是权重,256进制)
- 千位：如果是内联样式，记1，否则记0
- 百位：等于选择器中所有id选择器的数量
- 十位：等于选择器中所有类选择器 + 属性选择器 + 伪类选择器的数量
- 个位：等于选择器中所有元素选择器 + 伪元素选择器的数量
3. 比较源次序
代码书写靠后的胜出
4.权重的运算
权重是256进制的数(0-256)
这个结果是一个很出名的工程师实操IE7.0版本实际测出来的
CSS权重
!important infinity
内联样式 1000
id选择器 100
class选择器、属性选择器、伪类选择器 10
元素选择器、伪元素选择器 1
通配符选择器 0
在计算机中,infinity + 1 > infinity
应用
- 重置样式表
书写一些作者样式，覆盖浏览器的默认样式
重置样式表 -> 浏览器的默认样式
常见的重置样式表命名：normalize.css、reset.css、meyer.css(可以网上自行下载)
根据需求写好重置样式表,在浏览器中link重置样式表(顺序就是先引用原有样式，然后再引入重置样式表)然后如果又想恢复到以前的状态，只需要删除link重置样式表;
- 爱恨法则
link > visited > hover > active
按照这样顺序的原因就是源次序规则;
继承
子元素会继承父元素的某些CSS属性(某些属性是无法继承的)可以在MDN清楚的看到属性是否可以继承，继承之后可以查看属性继承的来源(styles里面查看)
因为继承是一层层传的，所以后代元素也会收到影响;
通常，跟文字内容相关的属性都能被继承
属性值的计算过程
一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件：该元素的所有CSS属性必须有值
即使没有写或者说没有写全，浏览器也会补充全;
(所以说，没有CSS，html啥属性也显示不出来,这就要更加让我们要结构，样式相分离)
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程
特殊的两个CSS取值：
- inherit：手动（强制）继承，将父元素的值取出应用到该元素
- initial：初始值，将该属性设置为默认值
背景颜色的默认值是transparent
属性值计算步骤
1.确定声明值：参考样式表中没有冲突的声明，作为CSS属性值
作者样式表或者浏览器样式表
2.层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值
3.使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值
4.使用默认值：对仍然没有值的属性，使用默认值
强制使某个属性值继承于父元素的方法是，将该元素的属性值赋值伪inherit 相当于是提前了inherit的行为;
面试题
<head>
<style>
div{
color:red;
}
</style>
</head>
<body>
<div>
<a href = "">测试</a>
</div>
</body>
上述代码运行后a元素里面的内容并不会继承div的样式，因为a元素在属性值运算的第一步就会使用浏览器的默认样式表里面的内容渲染出来，所以后面第三步不会继承div的属性；
盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：
- 行盒，display等于inline的元素
- 块盒，display等于block的元素
行盒在页面中不换行、块盒独占一行
display默认值为inline该属性无法继承;
浏览器默认样式表设置的块盒：容器元素、h1~h6、p
常见的容器元素:div header flooter…
常见的行盒：span、a、img、video、audio
通常是跟内容相关的文本元素;
盒子的组成部分
无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：
- 内容 content
width、height，设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
- 填充(内边距) padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding: 简写属性
浏览器会自动转换成padding-left padding-right padding-top padding-bottom
padding: 上 右 下 左
顺时针
padding: 上 左右 下 (三个值)
padding: 上下 左右 (两个值)
填充区+内容区 = 填充盒 padding-box
- 边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
border: border-style border-width border-color
边框样式：border-style
边框宽度：border-width
边框颜色：border-color
边框+填充区+内容区 = 边框盒 border-box
腾讯面试题:如何画一个聊天气泡的三角形；有多少种方法?
solid：实线边框 其他的还有很多，可以去搜索;
- 外边距 margin
边框到其他盒子的距离
margin-top、margin-left、margin-right、margin-bottom
速写属性margin(只是为了人为的书写方便,也就是语法糖，浏览器实际计算的时候还是分开计算的)
盒模型应用
改变宽高范围
默认情况下，width 和 height 设置的是内容盒宽高。
页面重构师：将psd文件（设计稿）制作为静态页面
衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒
- 精确计算
- CSS3：box-sizing
属性值:content-box/border-box/margin-box;
改变背景覆盖范围
默认情况下，背景覆盖边框盒,可以修改，使用background-clip属性选择背景覆盖范围;
可以通过background-clip进行修改
溢出处理
溢出的内容默认情况下是可见的(visiable);
overflow属性，控制内容溢出边框盒后的处理方式(hideen-隐藏、scrool-滚动条、auto-自动)
scrool默认水平和竖直方向都出现滚动条,也可以单独设置x y两个方向
auto 自动，如果内容没溢出，不会出现滚动条，如果溢出了，就产生滚动条;
断词规则
word-break，会影响字符在什么位置被截断换行
normal：普通。CJK字符（文字位置截断），非CJK字符（单词位置截断）
CJK：chinese japan korea
break-all：截断所有。所有字符都在文字处截断
keep-all：保持所有。所有字符都在单词之间截断
空白处理
文字溢出的时候,用…表示后面的内容;
white-space:normal
默认值，表示会进行空白折叠
white-space: nowrap
表示空白字符的处理不换行
white-space: pre
表示所有空白字符全部显示
然后这样的话可能会使某些内容溢出(不溢出的话后面的操作没影响)，然后使用text-overflow:ellipsis 表示显示不完的位置会用…代替;
上面的方法只能控制单行文本，多行文本要通过JS处理;
行盒的盒模型
常见的行盒：包含具体内容的元素
span、strong、em、i、a、del、img、video、audio
因为行盒是内容，所以认为一切都跟着内容走，一切以内容为主;
显著特点
- 盒子沿着内容沿伸
- 行盒不能设置宽高
调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。
- 内边距（填充区）
水平方向有效，垂直方向不会实际占据空间。
- 边框
水平方向有效，垂直方向不会实际占据空间。
- 外边距
水平方向有效，垂直方向不会实际占据空间。
行块盒
display：inline-block 的盒子
img元素
- 不独占一行
- 盒模型中所有尺寸都有效
空白折叠
空白折叠，发生在行盒（行块盒）内部 或 行盒（行块盒）之间
可替换元素 和 非可替换元素
大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素
可替换元素：img、video、audio
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒，盒模型中所有尺寸都有效。
Img元素
object-fit属性
contain:不要打破图片的宽高比例;
fill:不管比例，全部填充 （默认元素）
cover:牺牲图片的有些信息，不要打破图片的宽高，全部填充;
视觉格式化模型
盒模型：规定单个盒子的规则
视觉格式化模型（布局规则）：页面中的多个盒子排列规则
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动
- 定位
常规流
常规流布局
不同的说法:常规流、文档流、普通文档流、常规文档流
所有元素，默认情况下，都属于常规流布局
总体规则：块盒独占一行，行盒水平依次排列
包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。
绝大部分情况下：盒子的包含块，为其父元素的内容盒(特殊情况后面再说)
<head>
<style>
.parent{
width:300px;
height:200px;
border:3px solid black;
background-color:lightblue;
padding:30px;
}
.content{
height:100px;
border:2px solid #008c8c;
background-color:red;
}
</style>
</head>
<body>
<div class = "parent">
<div class = "content"></div>
<div>
<!-- 父元素div的宽度就是子元素div的包含块 -->
</body>
块盒
div p ul li ol form address
- 每个块盒的总宽度(margin padding border content)，必须刚好等于包含块的宽度
水平方向上的margin：auto也代表将剩余空间吸收掉;
宽度的默认值是auto
margin的取值也可以是auto，默认值0
auto：将剩余空间吸收掉
width吸收能力强于margin
若宽度(width)、边框(border)、内边距(padding)、外边距(margin)计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收
在常规流中，块盒在其包含块中居中，可以定宽、然后左右margin设置为auto。
- 每个块盒垂直方向上的auto值
height:auto， 适应内容的高度
margin:auto， 表示0
- 百分比取值
padding、宽、margin可以取值为百分比
以上的所有百分比相对于包含块的宽度(与高度无关，即使竖直方向也与高度无关)。
高度的百分比：
1）. 包含块的高度是否取决于子元素的高度，设置百分比无效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent{
background: lightblue;
border: 2px solid;
padding: 30px;
margin: 30px;
width: 600px;
height: 1000px;
/* 若这里没有设置高度height，就是情况1，若这里设置了高度height，就是情况2 */
}
.child{
border: 2px solid;
background: red;
width: 100px;
margin: 0 auto;
height: 50%;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique totam quod quam repellat provident repudiandae, a reprehenderit voluptates fugiat laboriosam eveniet esse voluptas laudantium non porro hic ut neque tempora.
</div>
</div>
</body>
</html>
2）. 包含块的高度不取决于子元素的高度，百分比相对于父元素高度
- 上下外边距的合并
两个常规流块盒(不论是父子元素还是兄弟元素)，上下外边距相邻，会进行合并。
两个外边距取最大值。
margin塌陷 后面会有各种解决方案
浮动
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动
- 定位
应用场景
- 文字环绕(可以应用于报纸排版)
- 横向排列
浮动的基本特点
修改float属性值为：
- left：左浮动，元素靠上靠左
- right：右浮动，元素靠上靠右
默认值为none
- 当一个元素浮动后，元素必定为块盒(更改display属性为block)
- 浮动元素的包含块，和常规流一样，为父元素的内容盒
盒子尺寸
- 宽度为auto时，适应内容宽度
- 高度为auto时，与常规流一致，适应内容的高度
- margin为auto，为0.
- 边框、内边距、百分比设置与常规流一样
盒子排列
下面情况说的比较简单，更加复杂的细节在后面会提及
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子考上靠右排列
- 浮动盒子在包含块中排列时，会避开常规流块盒
- 常规流块盒在排列时，无视浮动盒子
- 行盒在排列时，会避开浮动盒子
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。
- 外边距合并不会发生
高度坍塌
高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子
清除浮动，涉及css属性：clear
- 默认值：none
- left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
- right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
- both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方
解决高度塌陷的方法：
用完浮动元素，一定要clearfix，否则会引起高度坍塌，致使其他元素可能会出问题;
哪个元素用了浮动就给它的父元素进行清除浮动
定位
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动：float
- 定位：position
定位：手动控制元素在包含块中的精准位置
涉及的CSS属性：position
position属性
- 默认值：static，静态定位（不定位）
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
一个元素，只要position的取值不是static，认为该元素是一个定位元素。
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：
- 文档流中的元素摆放时，会忽略脱离了文档流的元素
- 文档流中元素计算自动高度时，会忽略脱离了文档流的元素
相对定位
不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。
可以通过四个CSS属性对设置其位置：
- left
- right
- top
- bottom
盒子的偏移不会对其他盒子造成任何影响。
偏移可以认为只是视觉效果上产生了偏差，用户感觉偏移了;实质上这个盒子以前在哪，现在还在哪;
如果同时设置top 和 bottom则以top为准;
如果同时设置left right以left为准;尽量避免这种有矛盾的值;
绝对定位
- 宽高为auto，适应内容
- 包含块变化：找祖先(从父元素开始找)中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）
absolute定位:脱离原来位置进行定位，是相对于最近的有定位的父级进行定位，如果没有有定位的父级元素，就相对于文档进行定位;
relative定位:保留原来的位置进行定位，相对于自己原来(出生的)位置进行定位;
固定定位
其他情况和绝对定位完全一样。
包含块不同：固定为视口（浏览器的可视窗口）
绝对定位和固定定位的区别（面试爱考）:两者包含块不同;绝对定位的包含块就是找祖先中第一个定位元素，该元素的填充盒就是绝对定位的包含块，若找不到，它的定位元素就是整个网页；而固定定位的包含块固定为视口(浏览器的可视窗口)
整个网页(初始化包含块)就是html元素所占的大小
浏览器的可视窗口就是你只能看到的那一部分;
初始化包含块有时候比视口小，有时候比视口大;
当初始化包含块比视口大时，会出现滚动条
定位下的居中
整个页面居中:
position:absolute
left:50%
top:50%
margin-left:-width/2
margin-top:-height/2
某个方向居中(可视区)：
- 定宽、高
- 将左右、上下距离设置为0
- 将左右、上下margin设置为auto
绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间
多个定位元素重叠时
堆叠上下文(后面会讲更加详细的细节)
设置z-index，通常情况下，该值越大，越靠近用户
只有定位元素设置z-index有效
z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖
补充
- 相对定位不改变元素的类型，原来是行盒，现在还是行盒，原来是块盒，现在还是块盒
- 绝对定位、固定定位元素一定是块盒
- 绝对定位、固定定位元素一定不是浮动
- 没有外边距合并
<style>
div{
float:left;
position:absolute;
}
</style>
<!-- 强制改为绝对定位，浮动为none； -->
透明
每个颜色都具有透明通道, 0 ~ 1
- rgba(红, 绿, 蓝, alpha)
- hex： #红绿蓝透
第2种写法里透明通道也是00-ff
阴影的颜色一般都是黑色，然后调整它的通道;
更多的选择器
更多伪类选择器
- first-child
选择第一个子元素
first-of-type，选中子元素中第一个指定类型的元素
- last-child
last-of-type
- nth-child
选中指定的第几个子元素
a:nth-child(5) 表示选中a元素，并且这个元素是第5个元素;
even：关键字，等同于2n
odd: 关键字，等同于2n+1
- nth-of-type
选中指定的子元素中第几个某类型的元素
更多的伪元素选择器
- first-letter
选中元素中的第一个字母
- first-line
选中元素中第一行的文字
- selection
选中被用户框选的文字(浏览器有默认样式，可以修改)
更多的样式
透明度
- opacity，它设置的是整个元素的透明，它的取值是0 ~ 1
- 在颜色位置设置alpha通道(rgba )
背景颜色默认覆盖border-box，所以要是单独想让边框透明，那么需要将background-clip改为padding-box;
鼠标
使用cursor设置
属性值:
auto 默认样式，不同的内容鼠标样式会不同
pointer 当鼠标移入指定区域时，则会变成小手2
help
cursor:url(""), auto; auto的意思时如果图片出了问题，使用明默认的样式
设置图标,url里面图片的格式改为ico
盒子隐藏
- display:none，不生成盒子
- visibility:hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。
背景图
和img元素的区别
img元素是属于HTML的概念
背景图属于css的概念
- 当图片属于网页内容时，必须使用img元素
- 当图片仅用于美化页面时，必须使用背景图
涉及的css属性
- background-image
url("")
地址必须相对它所文件的路径
- background-repeat(速写属性，其实分repea-x和repeat-y两个属性)
no-repeat
默认情况下，背景图会在横坐标和纵坐标中进行重复
- background-size
预设值：contain、cover，类似于object-fit
数值或百分比
- background-position
设置背景图的位置。
它可以被定义为一个值或者两个值。如果被定义为两个值，那么第一个值代表水平位置，第二个代表垂直垂直位置。如果只指定一个值，那么第二个值默认为 center。
预设值：left、bottom、right、top、center
数值或百分比
当background-color:50% 50%时，背景图片居中(比较特殊)
雪碧图（精灵图）（spirit）
很多小图标整合在一张图片上，这样渲染效率更高，而且不易搞混淆;取出需要的图标时，使用background-position和定宽高即可;
- background-attachment
属性值:fixed;
//背景图相对于浏览器视口
通常用它控制背景图是否固定。
-
背景图和背景颜色混用
设置好背景图之后，再设置背景颜色，那么没有被背景图片覆盖的地方就会使用背景颜色; -
速写（简写）background
必须是先写位置(background-position)，再写尺寸(background-size)
中间用 / 隔开
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
