博主是前端小白，最近跟着一本叫做《从0到1：html+css快速上手》的书籍以及coursera的HTML, CSS, and Javascript for Web Developers学习。
以下为学习笔记：
css简介
css，指的是Cascading style sheet（层叠样式表），是用来控制网页外观的一门技术。
css引入方式
想要在一个页面引入CSS，共有以下3种方式：外部样式表、内部样式表、行内样式表。
外部样式表
外部样式表是最理想的CSS引入方式。在实际开发中，为了提升网站的性能速度和可维护性，一般都会使用外部样式表。所谓的外部样式表，指的是把CSS代码和HTML代码单独放在不同文件中，然后在HTML文件中使用link标签来引用CSS文件。
外部样式表在单独文件中定义，然后在HTML文件的标签对中使用link标签来引用。
语法
<link rel="stylesheet" type="text/css" href="文件路径"/>
rel即relative的缩写，它的取值是固定的，即"stylesheet"，表示引入的是一个样式表文件（即CSS文件）。
type属性的取值也是固定的，即"text/css"，表示这是标准的CSS。href属性表示CSS文件的路径。
如果你使用外部样式表，必须使用link标签来引入，而link标签是放在head标签内的。
内部样式表
内部样式表，指的是把HTML代码和CSS代码放到同一个HTML文件中。其中，CSS代码放在style标签内，style标签是放在head标签内部的。
语法
<style type="text/css"
</style>
type="text/css"是必须添加的，表示这是标准的CSS。
行内样式表
行内样式表与内部样式表类似，也是把HTML代码和CSS代码放到同一个HTML文件。但是两者有着本质的区别：内部样式表的CSS是在“style标签”内定义的，而行内样式表的CSS是在“标签的style属性”中定义的。
<div style="color:yellow">
I’m happy!
</div>
css选择器
在HTML中，id和class是元素最基本的两个属性。一般情况下，id和class都可以用来选择元素，以便进行CSS操作或者JavaScript操作。
id属性具有唯一性，也就是说，在一个页面中相同的id只能出现一次。
class，顾名思义，就是“类”，它与C++、Java等编程语言中的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使相同class的元素具有相同的CSS样式。
一个样式的语法由3部分组成，即选择器、属性和属性值。这种选中你想要的元素的方式，我们称之为“选择器”。
最实用的5种选择器：元素选择器、id选择器、class选择器。
语法
选择器
{
属性值1：取值1；
属性值n:取值n
}
元素选择器
元素选择器，就是选中相同的元素，然后对相同的元素定义同一个CSS样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style type="text/css">
div{
color:red;
}
</style>
</head>
<body>
<div>元素选择器</div>
<p>元素选择器</p>
<span>元素选择器</span>
<div>元素选择器</div>
</body>
</html>
div{color:red;}表示把页面中所有的div元素选中，然后定义它们的文本颜色为红色。
id选择器
我们可以为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式，这就是id选择器。
对于id选择器，id名前面必须要加上前缀“#”，否则该选择器无法生效，如下图所示。id名前面加上“#”，表示这是一个id选择器。
class选择器
class选择器，也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”定义相同的class属性，然后针对拥有同一个class的元素进行CSS样式操作。
class名前面必须要加上前缀英文句号（.），否则该选择器无法生效，如图12-9所示。类名前面加上英文句号，表明这是一个class选择器。
选择器的组合
元素和类的组合
要同时满足含该元素和class属性的标签才能被选中。
后代选择器
后代选择器，就是选择元素内部中某一种元素的所有元素：包括子元素和其他后代元素。
子选择器
子选择器，就是选择元素内部中某一种直接子元素。
群组选择器
群组选择器，指的是同时对几个选择器进行相同的操作。对于群组选择器，两个选择器之间必须要用英文逗号（,）隔开，不然群组选择器就无法生效。
伪类
CSS 伪类(Pseudo-classes)是用来添加一些选择器的特殊效果。由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
语法
selector:pseudo-class{property:value;}
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :active | a:active | 鼠标单击激活时的样式 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个 元素的第一个字母 |
| :first-line | p:first-line | 选择每个 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <]p> 元素 |
| :before | p:before | 在每个 元素之前插入内容 |
| :after | p:after | 在每个 元素之后插入内容 |
| :lang(language) | p:lang(it) | 为 元素的lang属性选择一个开始值 |
定义4个伪类，必须按照“link、visited、hover、active”的顺序进行，不然浏览器可能无法正常显示这4种样式。请记住，这4种样式的定义顺序不能改变~lvha（love hate）。
对于未访问时状态，我们直接针对a元素定义就行了，没必要使用“a:link”。
举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{text-decoration: none;}
a:link{color:red;}
a:visited{color:purple;}
a:hover{color:yellow;}
a:active{color:blue;}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
</body>
</html>
“:hover”伪类它的作用并不只是定义鼠标经过超链接样式，它可以定义任何一个元素在鼠标经过时的样式。注意，是任何元素。
举例 ”:hover“用于div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
color:white;
line-height: 32px;
text-align: center;
background-color: skyblue;
height: 32px; width: 100px;
}
div:hover{background-color:hotpink;}
</style>
</head>
<body>
<div>资源小白菌</div>
</body>
</html>
鼠标样式
在CSS中，对于鼠标样式的定义，我们有两种方式：浏览器鼠标样式和自定义鼠标样式。
1.浏览器鼠标样式
语法
cursor:取值；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{height: 30px;width: 100px;
text-align: center;
background-color: hotpink;
color:white;
font-size: 14px;
line-height: 30px;}
#default{cursor: default;}
#pointer{cursor: pointer;}
</style>
</head>
<body>
<div id="default">鼠标默认样式</div>
<div id="pointer">鼠标手状样式</div>
</body>
</html>
2.自定义鼠标样式
除了使用浏览器自带的鼠标样式，我们还可以使用cursor属性来自定义鼠标样式，只不过语法稍微有点不一样。
语法
cursor:url(图片地址),属性值;
鼠标图片后缀名一般都是“.cur”。属性值一般只会用到3个，分别是default、pointer和text。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{height: 30px;width: 100px;
text-align: center;
background-color: hotpink;
color:white;
font-size: 14px;
line-height: 30px;}
#default{cursor: url(img/cursor/default.cur),default;}
#pointer{cursor: url(img/cursor/pointer.cur),default}
</style>
</head>
<body>
<div id="default">鼠标默认样式</div>
<div id="pointer">鼠标手状样式</div>
</body>
</html>
css冲突解决规则
1.按照本身的优先级
当没有冲突的时候，css按照原有的优先级——即html是从上往下处理的。
2.合并
针对元素不同的声明，比如有声明字体的css，有声明字号的css，这些不同的声明一并作用于该元素。
3.继承
对父级元素的css声明，子级元素会自动继承。
4.明确性
当多种样式同时指向一个元素时，且存在冲突时，有如下公式：行内样式、ID、class（attribute、pseudo-class）从左到右排列，样式如果满足一点则j，分数最大的样式。
样式
字体样式
除了字体颜色，其他字体属性都是以“font”前缀开头的。
字体样式
在CSS中，我们可以使用font-family属性来定义字体类型。font-family可以指定多种字体。使用多个字体时，将按从左到右的顺序排列，并且以英文逗号（,）隔开。如果我们不定义font-family，浏览器将会采用默认字体类型，也就是“宋体”。
{font-family:Arial,Verdana,Georgia;} .p元素优先使用“Aria字体”来显示。如果你的电脑没有安装“Arial字体”，那就接着考虑“Verdana字体”。如果你的电脑也没有安装“Verdana字体”，那就接着考虑“Georgia字体”……以此类推。
字体大小
在CSS中，我们可以使用font-size属性来定义字体大小。
font-size属性取值有几种：一种是“关键字”，如small、medium、large等；另外一种是“像素值”，如10px、16px、21px等; 还可以通过em、%来控制字体的相对大小，比如2em表示为当前字体的两倍。
字体粗细
在CSS中，我们可以使用font-weight属性来定义字体粗细。font-weight属性取值有两种：一种是“100~900的数值”，另一种是“关键字”。
字体风格
在CSS中，我们可以使用font-style属性来定义斜体效果。
| 值 | 描述 |
|---|---|
| normal | 默认值。标准的字体样式 |
| italic | 斜体的字体样式 |
| oblique | 倾斜的字体样式 |
italic 和 oblique 都是向右倾斜的文字, 但区别在于 italic 是指斜体字，而 oblique 是倾斜的文字，对于没有斜体的字体应该使用 oblique 属性值来实现倾斜的文字效果。
字体颜色
在CSS中，我们可以使用color属性来定义字体颜色。color属性取值有两种，一种是“关键字”，另一种是“十六进制RGB值”。除了这两种，其实还有RGBA、HSL等，不过后面那几个都属于CSS3的内容。
此外，对于十六进制颜色值，有两个我们需要知道：#000000是黑色，#FFFFFF是白色。其中第一对零零代表红色，第二对零零代表绿色，第三对零零代表蓝色，所以#ff0000表示红色，#00ff00表示绿色。
文本样式
字体样式针对的是“文字本身”的形体效果，而文本样式针对的是“整个段落”的排版效果。
| 属性 | 描述 |
|---|---|
| text-indent | 首行缩进 |
| text-align | 水平对齐 |
| text-decoration | 文本修饰 |
| text-tansform | 大小写转换 |
| line-height | 行高 |
| letter-spacing、word-spacing | 字母间距、词间距 |
首行缩进
p元素的首行是不会自动缩进的，在CSS中，我们可以使用text-indent属性来定义p元素的首行缩进。
中文段落首行一般需要缩进两个字的空间。想要实现这个效果，那么text-indent值应该是font-size值的2倍。
水平对齐
在CSS中，我们可以使用text-align属性来控制文本在水平方向上的对齐方式。
| 属性值 | 说明 |
|---|---|
| left | 左对齐（默认值） |
| center | 居中对齐 |
| right | 右对齐 |
text-align属性不仅对文本有效，对图片（img元素）也有效。
文本修饰
在CSS中，我们可以使用text-decoration属性来定义文本的修饰效果（下划线、中划线、顶划线）。
| 属性值 | 说明 |
|---|---|
| none | 去除所有划线效果（默认值） |
| underline | 下划线 |
| line-through | 中划线 |
| overline | 上划线 |
超链接（a元素）默认样式有下划线，可以使用“text-decoration:none;”去除a元素的下划线。
大小写
在CSS中，我们可以使用text-transform属性来将文本进行大小写转换。text-transform属性是针对英文而言的，因为中文不存在大小写之分。
| 属性值 | 说明 |
|---|---|
| none | 无转换（默认值） |
| uppercase | 转换为大写 |
| lowercase | 转换为小写 |
| captialize | 将每个英文单词首字母转换为大写 |
行高
在CSS中，我们可以使用line-height属性来控制一行文本的高度。
line-height: 像素值;
行高是指文本行基线间的垂直距离，下图中两条红线之间的距离就是行高，基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。
上行的底线和下一行顶线之间的距离就是行距，行距的一半是半行距。
而font-size是同一行顶线和底线之间的距离是的大小。
字间距词间距
1.在CSS中，我们可以使用letter-spacing属性来控制字与字之间的距离。
letter-spacing: 像素值；
letter-spacing，从英文意思上可以知道这是“字母间距”。注意，每一个中文汉字都被当作一个“字”，而每一个英文字母也被当作一个“字”。
2.在CSS中，我们可以使用word-spacing属性来定义两个单词之间的距离。
word-spacing: 像素值;
word-spacing，从英文意思上可以知道这是“单词间距”。一般来说，word-spacing只针对英文单词而言。
边框样式
边框属性
浏览网页的过程中，边框样式随处可见。几乎所有的元素都可以定义边框。例如，div元素可以定义边框，img元素可以定义边框，table元素可以定义边框，span元素同样也可以定义边框。
| 属性 | 说明 |
|---|---|
| border-width | 边框的宽度 |
| border-style | 边框的外观 |
| border-color | 边框的颜色 |
想要为一个元素定义边框样式，必须要同时设置borderwidth、border-style、border-color这3个属性才会有效果。
1．border-width属性用于定义边框的宽度，取值是一个像素值。
2．border-style属性用于定义边框的外观，常用取值如下表所示。
| 属性值 | 说明 |
|---|---|
| none | 无样式 |
| dashed | 虚线 |
| solid | 实线的 |
3．border-color属性用于定义边框的颜色，取值可以是“关键字”或“十六进制RGB值”。
简写形式
想要为一个元素定义边框，我们需要完整地给出border-width、border-style和bordercolor。这种写法代码量过多，费时费力，不过CSS为我们提供了一种简写形式。
border:1px solid red;
等价于：
border-width:1px;
border-style:solid;
border-color:red;
局部样式
一个元素其实有4条边（上、下、左、右），如图15-7所示。上一节我们学习的是4条边的整体样式。那么，如果我们想要对某一条边进行单独设置，这该怎么实现呢？
- 上边框
border-top-width:1px;
border-top-style:solid;
border-top-color:red;
简写形式
border-top:1px solid red;
2.下边框
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:red;
简写形式
border-bottom:1px solid red;
左边框和右边框与上下边框类似。
注意：
“border-bottom:0px;”是把下边框宽度设置为0px。由于此时下边框没有宽度，因此下边框就被去除了。
此外，“border-bottom:0px;”“border-bottom:0;”和“border-bottom:none;”是等价的。
列表样式
列表项符号
在CSS中，不管是有序列表还是无序列表，我们都是使用list-style-type属性来定义列表项符号的。
语法
list-style-type:取值;
list-style-type属性是针对ol或者ul元素的，而不是li元素。
有序列表 list-style-type
| 属性值 | 是 |
|---|---|
| decimal | 1、2、3…(默认值) |
| lower-roman | 小写罗马数字 i、ii、iii、 |
| upper-roman | 大写罗马数字I、II、III |
| lower-alpha | a、b、c |
| upper-alpha | A、B、C |
无序列表 list-style-type
| 属性值 | 说明 |
|---|---|
| disc | 实心圆● （默认值） |
| circle | 空心圆○ |
| square | 正方形■ |
举例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>样式</title>
<style>
ul{list-style-type: circle;}
ol{list-style-type:lower-roman;}
</style>
</head>
<body>
<h3>无序列表</h3>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
</body>
</html>
去除列表项符号
在CSS中，我们也是使用list-style-type属性来去除有序列表或无序列表的列表项符号的。
语法
list-style-type:none;
列表项图片
在CSS中，我们可以使用list-style-image属性来定义列表项图片，也就是使用图片来代替列表项符号。
语法
list-style-image:url(图片路径);
表格样式
表格标题位置
在CSS中，我们可以使用caption-side属性来定义表格标题的位置。
语法
caption-side:取值;
caption-side属性取值只有2个：一是top 标题在顶部，另一个是bottom, 标题在底部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格样式</title>
<style>
table{caption-side:bottom;}
table,th,td{border:1px solid silver;}
</style>
</head>
<body>
<table>
<caption>标题</caption>
<!--表头-->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>刘二</td>
<td>男</td>
</tr>
<tr>
<td>王三</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
注意：给表格加边框样式时，如果只给table标签加，则只有外部边框才有边框，需要给th、td加边框样式，效果才会如上图。
如果想要定义表格标题的位置，在table或caption这两个元素的CSS中定义caption-side属性，效果是一样的。一般情况下，我们只在table元素中定义就可以了。
表格边框合并
在CSS中，我们可以使用border-collapse属性来去除单元格之间的空隙，也就是将两条边框合并为一条。
语法
border-collapse:取值;
border-collapse属性取值只有2个，如下表所示：
| 属性值 | 说明 |
|---|---|
| separate | 边框分开，有空隙（默认值） |
| collapse | 边框合并，无空隙 |
在CSS中，border-collapse属性也是在table元素中定义的。
图片样式
图片大小
在CSS中，我们也是使用width和height这两个属性来定义图片大小的（也就是宽度和高度）。
语法
width:像素值；
height：像素值；
在实际开发中，你需要多大的图片，就用Photoshop制作多大的图片。不建议使用一张大图片，然后再借助width和height来改变其大小。因为一张大图片体积更大，会使页面加载速度变慢。
图片边框
对于图片的边框，我们也是使用border属性来定义的。
语法
border:1px solid red;
图片对齐
1.水平对齐
在CSS中，我们可以使用text-align属性来定义图片的水平对齐方式。
语法
text-align:取值;
text-align属性取值有3个，如下表所示：
| 属性值 | 说明 |
|---|---|
| left | 左对齐(默认值) |
| center | 居中对齐 |
| right | 右对齐 |
text-align属性一般只用于两个地方：文本水平对齐和图片水平对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片样式</title>
<style>
div{border:1px solid silver;
width: 300px;
height: 80px;
}
#div1{text-align: left;}
#div2{text-align:center;}
#div3{text-align: right;}
img{width: 60px;height: 60px;}
</style>
</head>
<body>
<div id="div1">
<img src="img/girl.gif" alt="">
</div>
<div id="div2">
<img src="img/girl.gif" alt="">
</div>
<div id="div3">
<img src="img/girl.gif" alt="">
</div>
</body>
</html>
很多人以为图片的水平对齐是在img元素中定义的，其实这是错的。图片是在父元素中进行水平对齐，因此我们应该在图片的父元素中定义。
2.垂直对齐
在CSS中，我们可以使用vertical-align属性来定义图片的垂直对齐方式。
语法
vertical-align:取值;
vertical-align属性取值有4个，如下表所示。
| 属性值 | 说明 |
|---|---|
| top | 顶部对齐 |
| middle | 中部对齐 |
| baseline | 基线对齐 |
| bottom | 底线对齐 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直对齐</title>
<style>
body{font-size:25px }
img{width: 60px;height: 60px;}
#img1{vertical-align: top;}
#img2{vertical-align: middle;}
#img3{vertical-align: bottom;}
#img4{vertical-align: baseline;}
</style>
</head>
<body>
资源小白菌<img id="img1" src="img/girl.gif">资源小白菌(top)
<hr>
资源小白菌<img id="img2" src="img/girl.gif">资源小白菌(middle)
<hr>
资源小白菌<img id="img3" src="img/girl.gif">资源小白菌(bottom)
<hr>
资源小白菌<img id="img4" src="img/girl.gif">资源小白菌(baseline)
</body>
</html>
此例与上例不同，上例水平对齐作用于父元素div，此例垂直对齐直接作用于img元素。
W3C对vertical-align属性的定义是极其复杂的，其中有一项是“vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式”。它是直接作用于要使用的元素，而非父元素。
文字环绕
在CSS中，我们可以使用float属性来实现文字环绕图片的效果。
语法
float:取值;
float属性取值只有2个：left 元素向左浮动，right元素向右浮动。
img{float: left;}
img{float: right;}
背景样式
在CSS中，背景样式包括两个方面：一个是“背景样色”，另外一个是“背景图片”。定义“背景颜色”使用的是background-color属性，而定义“背景图片”则比较复杂，往往涉及以下属性：
| 属性 | 说明 |
|---|---|
| background-image | 定义背景图片地址 |
| background-repeat | 定义背景图片重复（纵向、横向等） |
| background-position | 定义背景图片位置 |
| background-attachment | 定义背景图片固定 |
背景颜色
在CSS中，我们可以使用background-color属性来定义元素的背景颜色。
语法
background-color:颜色值;
举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 60px;
}
#div1{
background-color: hotpink;
}
#div2{
background-color: #87cefa;
}
</style>
</head>
<body>
<div id="div1">背景颜色：hotpink</div>
<div id="div2">背景颜色：#87CEFA </div>
</body>
</html>
color属性用于定义“文本颜色”，而background-color属性用于定义“背景颜色”
背景图片样式
我们可以使用background-image属性来为元素定义背景图片。
语法
background-image:url(图片路径);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:250px;
height: 170px;
background-image: url(img/ironman.png);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
我们需要为div元素添加width和height，不然div元素的宽度和高度都为0。
背景图片重复
在CSS中，我们可以使用background-repeat属性来定义背景图片的重复方式。
语法
background-repeat:取值;
background-repeat属性取值有4个，如下表：
| 属性值 | 说明 |
|---|---|
| repeat | 在水平和垂直方向同时平铺(默认值) |
| repeat-x | 只在水平方向(x轴)平铺 |
| repeat-y | 只在垂直方向(y轴)平铺 |
| no-repeat | 不平铺 |
以一朵小花
为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:200px;height: 100px;
border:1px solid silver;
background-image: url(img/flower.png);
}
#div2{
background-repeat: repeat-y;
}
#div3{
background-repeat: repeat-x;
}
#div4{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
在这个例子中，第1个div元素由于没有定义background-repeat属性值，因此会采用默认值repeat。另外，元素的宽度和高度必须大于背景图片的宽度和高度，这样才会有重复效果。
背景图片位置
在CSS中，我们可以使用background-position属性来定义背景图片的位置。
语法
background-position:像素值/关键字;
1.像素值
当background-position属性取值为“像素值”时，要同时设置水平方向和垂直方向的数值。水平距离和垂直距离这两个数值之间要用空格隔开，两者取值都是像素值。
语法
background-position:水平距离 垂直距离;
2.关键字
当background-position属性取值为“关键字”时，也要同时设置水平方向和垂直方向的值，只不过这两个值使用关键字来代替而已。
语法
background-position: 水平距离 垂直距离;
| top left | top center | top right |
|---|---|---|
| left center | center center | right center |
| bottom left | bottom center | bottom right |
背景图片固定
在CSS中，我们可以使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动。
语法
background-attachment:取值;
background-attachment属性取值只有2个，一个是scroll(默认值)、一个是fixed。
我们在本地浏览器中拖动右边的滚动条，可以发现，背景图片在页面固定不动了。如果把“background-attachment:fixed；”这一行代码去掉，背景图片就会随着元素一起滚动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:500px;
height:1200px;
border:1px solid silver;
background-image: url(img/ironman.png);
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
g" alt=“image-20210219214332769” style=“zoom:50%;” />
2.关键字
当background-position属性取值为“关键字”时，也要同时设置水平方向和垂直方向的值，只不过这两个值使用关键字来代替而已。
语法
background-position: 水平距离 垂直距离;
| top left | top center | top right |
|---|---|---|
| left center | center center | right center |
| bottom left | bottom center | bottom right |
背景图片固定
在CSS中，我们可以使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动。
语法
background-attachment:取值;
background-attachment属性取值只有2个，一个是scroll(默认值)、一个是fixed。
我们在本地浏览器中拖动右边的滚动条，可以发现，背景图片在页面固定不动了。如果把“background-attachment:fixed；”这一行代码去掉，背景图片就会随着元素一起滚动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:500px;
height:1200px;
border:1px solid silver;
background-image: url(img/ironman.png);
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
