笔记来源：拉勾教育 - 大前端就业集训营
文章内容：学习过程中的笔记、感悟、经验
一、CSS常用样式
1、文字属性
（1）粗细 font-weight
加粗显示，属性值两种类型：单词类型、数字类型
单词类型：
| 属性值 | 说明 |
|---|---|
| normal | 默认值，定义标准的字体 ，常用 |
| bold | 定义粗体字符，b、strong标签的默认值，常用 |
| bolder | 定义更粗的字体，浏览器中效果与bold没太大区别 |
| lighter | 定义更细的字体 |
数字类型：100-900 之间的整百数字。数字越大，文字显示越粗。400 等价于 normal，700 等价于 bold。
（2）字体风格 font-style
斜体显示
| 属性值 | 说明 |
|---|---|
| normal | 设置正规的字体，大多数标签的默认值 |
| italic | 设置斜体的文字，主要针对英文，要求英文以字体中的斜体样式显示 |
| oblique | 设置倾斜的文字，只是将文字倾斜显示，与字体无关 |
实际应用中，更多的斜体效果习惯使用italic属性值
（3）行高 line-height
一行文字实际占有的高度，文字字号在行高中是垂直居中的，属性值可用像素值px表示或用百分比表示（本身字号像素值百分比）
fireworks软件量取行高
①确定文字字号和字体。使用文字工具，书写两个与内容相同的文字，调整字号和字体，直到两个文字都完全重合，就是我们需要的字号和字体。制作时，设置一个与内容文字颜色差异较大的字体颜色。
②根据已知的字号和字体，再书写上下对齐的两行文字，调整属性面板的行高值单位为像素，更改数值大小，直到两行文字都对齐，得到的就是我们需要的行高值。
（4）字体综合 font
字体、字号、行高、加粗、斜体都是font综合属性的单一属性。
注： font进行综合书写时，必须有字号和字体参与，字号和行高之间必须用/进行分隔，设置加粗和斜体，两个属性值只能写在最前面且可以互换位置，后面的字号、行高、字体不能更改位置。
font: italic bold 14px/28px "consolas","arial","SimSun","Microsoft Yahei";
2、文本属性
（1）水平对齐 text-align
在盒子中，不论文本是单行还是多行，都会对应方向对齐。
| 属性值 | 作用 |
|---|---|
| left | 居左对齐,大部分标签的默认值 |
| center | 居中对齐 |
| right | 居右对齐 |
（2）文本修饰 text-decoration
| 属性值 | 说明 |
|---|---|
| none | 没有修饰，大部分标签的默认值 |
| overline | 上划线 |
| line-through | 中划线，删除线，<del> 标签的默认值 |
| underline | 下划线，<a> 标签的默认值 |
（3）文本缩进 text-indent
段落首行缩进，属性值区分正负，正数表示向右缩进，负数表示向左缩进。左上顶点是原点，水平向右是x轴正方向，垂直向下为y轴正向
| 属性值 | 说明 |
|---|---|
| px 单位 | 表示首行缩进多少像素 |
| em 单位 | 首行缩进几个中文字符的位置，实际工作中常用 |
| 百分比 | 表示缩进文字所在标签的父级标签的 width 属性值的百分比 |
3、盒模型属性
（1）常见盒模型区域
书写元素内容区域：width+height
盒子可以实体化的区域：width+height+padding+border
盒子实际占位的位置：width+height+padding+border+margin
（2）宽度 width
| 属性值 | 说明 |
|---|---|
| auto | 默认值。浏览器可计算出实际的宽度。 |
| px | 像素值定义的宽度。 |
| % | 定义参考父元素宽度 width 的百分比宽度。 |
属性值为auto时， <div> 元素等独占一行的，其 width 属性的值会自动撑满父元素的 width 区域，如果是 <span> 元素等不需要独占一行的，其 width 属性的值是内部元素内容自动撑开的宽度。<body> 元素不需要设置 width 属性，宽度会自动适应浏览器窗口的宽度。
（3）高度 height
| 属性值 | 说明 |
|---|---|
| auto | 默认值。浏览器会计算出实际的高度。内部元素内容自动撑开的高度 |
| px | 像素值定义的高度。 |
| % | 定义参考父元素高度 height 的百分比高度。 |
（4）内边距 padding
元素的边框内部到宽高区域之间的距离，可以加载背景
单一属性：
p {
padding‐top: 10px;
padding‐right: 20px;
padding‐bottom: 30px;
padding‐left: 40px;
}
合写：
①四值法：设置四个属性值，分配方向上、右、下、左。
padding: 10px 20px 30px 40px;
②三值法：三个值分配给上、左右、下。
③二值法：两个值分配给上下、左右。
④单值法：属性值只有一个，分配方向上右下左，四边的值相同。
注： 利用综合属性和单一属性之间的层叠，单一属性必须书写在后，才能层叠掉综合属性中重复的部分（推荐使用）
（5）边框 border
内边距外面的边界区域，作为盒子的实体化的最外层
/* 线宽 线型 颜色 */
border: 10px solid #f00;
①按照属性值的类型划分：
线宽：border-width，设置边框线的宽度，属性值类似于padding
线型：border-style，设置边框的线条形状，类似于padding综合属性值写法，除了none、solid、dashed，其余有兼容问题
| 属性值 | 说明 |
|---|---|
| none | 定义无边框。 |
| solid | 定义实线。 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
| double | 定义双线。双线的宽度等于 border-width 的值。双线间会露出背景颜色 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
| inset | 定义 3D 内容凹陷效果。其效果取决于 border-color 的值。 |
| outset | 定义 3D 内容凸出效果。其效果取决于 border-color 的值。 |
边框颜色： border-color,设置边框的颜色，类似于padding综合属性值写法
②根据边框的方向划分：
上边框：border-top
右边框：border-right
下边框：border-bottom
左边框：border-left
③综合属性值方向和类型，进一步细分border属性：
单一属性写法：border-方向-类型
（6）外边距 margin
盒子与盒子之间的距离，不能渲染背景，外边距的设置方式与内边距 padding 一模一样
（7）清除默认样式
大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。
①盒模型属性中内外边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除。
② <ul> 和 <ol> 两种列表有默认的列表前缀：清除 list-style 属性。
③<a> 标签的默认样式：设置 color 和 text-decoration。
④清除默认加粗效果：设置font-weight。
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,td,th {
margin: 0;
padding: 0;
}
ul,ol {
list‐style: none;
}
a {
color: #666;
text‐decoration: none;
}
h1,h2,h3,h4,h5,h6,b,strong {
font‐weight: normal;
}
还可以给 <body> 标签设置整体文字样式，让大部分后代标签全部去继承。
/*设置初始公共样式*/
body {
color: #666;
font‐size: 14px;
font‐family: "Arial","consolas","Microsoft Yahei","SimSun";
}
（8）高度 height 应用
设置高度：盒子占有的高度位置确定，后面的同级元素会紧挨着加载。
不设置高度：会根据标签内部内容高度自动撑开。
①必须设置高度：盒子高度占位是固定的，后面同级元素在高度下面加载。如果内部元素的加载高度超过父级，会出现溢出效果。
通过一个溢出的属性 overflow，进行溢出部分内容的显示效果设置。
| 属性值 | 说明 |
|---|---|
| visible | 默认值，溢出部分显示。 |
| hidden | 溢出部分直接隐藏，隐藏超过边框范围的内容 |
| scroll | 溢出的部分出现滚动条，可以拖动滚动条看到隐藏部分，多出盒子高度的部分不显示，不论有没有溢出，水平和垂直方向都会出现滚动条。 |
| auto | 自动的，如果没有溢出就正常显示，如果有溢出，溢出的方向自动出现滚动条。 |
②必须不设置高度： 要求盒子高度必须自适应内部内容的高度或者设置height的属性值为auto。
（9）居中
文本居中
水平居中：text-align属性值为center。
单行文本垂直居中：让文字行高 line-height 等于盒子高度 height。
多行文本垂直居中：让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同。
元素居中
一个元素内部嵌套的子元素，在父元素中居中。
垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下内边距。
水平居中：针对类似 <div> 样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的 margin 值，水平方向的值都设置为 auto。
margin: 0 auto;
原因： auto 只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是 auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。
（10）父子盒模型
多个子元素要排成一行显示，必须保证父元素的宽度一定要足够（不考虑溢出情况）：父元素的width ≥ 所有子元素width + padding + border + margin
注： 父子盒模型中，一个子元素是类似 <div> 标签必须占一行的，如果要求子元素所有的水平方向的位置属性加和等于父元素的 width ，可以通过不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width，如果同时设置了子元素水平方向的 padding 和 border 、margin，不需要手动去进行内减，子元素的 width 会自动收缩尺寸。
（11）margin 塌陷现象
在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。
同级元素塌陷： 上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值。
父子元素塌陷： 父元素和子元素都设置了同方向的 margintop 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生 margin 塌陷。
注： 本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来。
解决margin塌陷问题的方法：
①同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
②父子元素：让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用儿子的 margin 去踹出来，而是父级的 padding 挤出来。
注： 水平方向的 margin 没有塌陷现象。
4、标准文档流
元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。 HTML就是一种标准文档流文件。
（1）微观现象
①空白折叠现象。
②文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。
③自动换行，元素内一行内容写满元素的 width 时会自动进行换行。
（2）元素等级
块级元素： 大部分容器级标签包括p标签都是块级元素，比如 <div> 、<h1> 等。
a、块级元素可以设置宽高，在浏览器中正常加载。
b、块级元素必须独占一行，不能与其他任何标签并排一行。
c、块级元素如果不设置宽度，会自动撑满父级的 width 区域；高度不设置，会被内容自动撑开高度。
行内元素： 大部分的文本级标签，比如 <span>、<a>、<b> 等。
a、行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题。
b、行内元素可以与其他的行内或行内块元素并排一行显示。
c、行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开。
行内块元素： 比如 <img>、<input> 等。
a、行内块元素可以设置宽度和高度。
b、行内块元素可以与其他的行内或行内块并排一行显示。
c、行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开。
d、行内块依旧具有标准流的微观性质，例如空白折叠现象。
5、显示模式 display
| 属性值 | 作用 |
|---|---|
| block | 表示元素要以块级元素模式加载，具备块级特点（常用） |
| inline | 表示元素要以行内元素模式加载，具备行内特点 |
| inline-block | 表示标签要以行内块模式加载，具备行内块特点（常用） |
| none | 表示标签及内部内容直接隐藏，让出原有标准流的位置 |
隐藏的元素要想再次显示，可以将 display 的属性值设置为 block。
注： display 属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。
标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位。
6、浮动 float
让元素脱离标准流，同一级的浮动的元素可以并排在一排显示，值为left左浮动，right右浮动
（1）性质
a、浮动的元素脱离标准流，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开
b、浮动的元素依次贴边， 浮动方向设置不同，进行布局时，加载位置方向不同。
①父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边，父元素左边←子元素1←子元素2← 子元素3←子元素4。
②父元素宽度如果不够
例如不能放下一个子元素4，那么子元素4在贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，如果子元素2后面位置不够，继续跳过子元素2向前面的子元素1进行贴边。
如果子元素4在跳过子元素3向更前面的子元素2贴边时，子元素2的高度不高于子元素3，子元素2没有延伸出一个高度的边让子元素4贴边，那么子元素4就会跳过子元素2向子元素1进行贴边。
如果贴边的这个子元素4宽度小于子元素2，子元素2的高度低于子元素1和子元素3，形成一个凹陷，子元素4会受前面子元素3高度影响，不会出现钻空现象。
如果子元素1后面的距离也放不下子元素4，子元素4最终会贴到父元素左边，如果子元素4的宽度超过了父元素，只会出现溢出现象。
利用浮动的这个依次贴边性质，可以完成多种网页布局效果。例如：
①表格效果。
②导航栏效果。
③常见的电商或企业网站布局。
c、浮动的元素没有 margin 塌陷
d、浮动的元素让出标准流位置，可制作压盖效果，但IE6、7有兼容问题，压盖效果一般用定位，不用该性质
注： 如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动。
（2）字围现象
同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住粉盒子的一部分，但是文字内容不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它进行加载。
（3）问题
a、标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。
b、父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。
（4）解决问题-清除浮动
a、给标准流的父元素强制给一个合适的高度
缺点： 父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现
b、给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置。（clear值left清左浮动，right清右浮动，both都清）
缺点： 父元素不能高度自适应，两个父元素之间如果有 margin 效果不正确。
c、外墙法： 在两个大的父盒子之间，添加一个空的 <div> 标签，标签上带有 clear：both 属性。
缺点： 父元素没有高度自适应。
d、内墙法： 在父元素内部，所有的浮动子元素后面添加一个空的 <div> 元素，标签高度为 0，添加 clear 属性。
缺点： 内墙法使用 HTML 结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成 HTML 结构的冗余。
e、将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。
/* 本质是使用伪类方法利用css代码书写一堵内墙。 */
/* :after这个伪类表示选中的是某个标签内部的最后的位置
前面必须加普通的选择器 */
.clearfix:after {
content: "1"; /*添加一个文字内容*/
display: block; /*将文字转为块级元素*/
height: 0; /*将盒子高度固定为0，避免影响父盒子高度*/
clear: both; /*清除前面浮动影响*/
visibility: hidden; /*将创建的元素占位置隐藏*/
}
f、给内部有浮动子元素的父元素添加溢出隐藏属性，可以解决浮动的所有问题。
overflow: hidden;
元素高度设置后，overflow：hidden；效果是将超过高度的部分直接隐藏。元素高度没有设置时，元素会自适应内容的高度。
高度自适应原因： 一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。
浮动影响后面的元素： 父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。
注： 如果父元素高度是固定的，建议使用 height 属性解决（a方法）。如果父元素高度需要自适应，建议使用 overflow 属性解决浮动问题（f方法）。好的方法是内墙法，父元素设置高度，:after伪类选择器，overflow
二、CSS伪类选择器
1、区别
普通的类： 必须给标签设置对应的 class 属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上。
伪类： 不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载。
伪类选择器写法： 前面是普通的选择器，后面紧跟 :伪类名。
注： 伪类选择器的权重与普通的类选择器相同。
2、a标签伪类
a:link { /*访问前状态*/
color: gray;
}
a:visited { /*访问后状态*/
color: cyan;
}
a:hover { /*鼠标悬浮状态*/
color: red;
}
a:active { /*鼠标点击状态*/
color: yellow;
}
（1）书写顺序
书写顺序必须是：访问前link、访问后visited、鼠标移上hover、鼠标点击active。
注： 伪类的权重是相同的，后写的层叠先写的
（2）实际应用
一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态。
a:link,a:visited {
color: #666;
}
a:hover {
color: #f00;
}
注： 其他标签也可以设置 :hover 伪类状态。
三、其他样式
1、背景属性
（1）背景颜色 background-color
加载区域：在 border 及以内加载背景颜色。
属性值：颜色名、颜色值。
颜色值：rgb 模式、十六进制模式、rgba 模式。
rgba 模式：在 rgb 基础上增加了一个不透明度的设置，不透明度 alpha 取值范围在 0-1 之间，0 表示完全透明，1 表示完全不透明，0.5 表示半透明。
书写方式：rgba(红色，绿色，蓝色，不透明度)
（2）背景图片 background-image
加载范围：默认的加载到边框及以内部分。如果图片不重复，从 border 以内开始加载。
background‐image: url(images/meng.jpg);
背景图和背景颜色可以同时设置，背景图会压盖背景颜色，没有背景图的区域会显示背景颜色。
（3）背景重复 background-repeat
| 属性值 | 作用 |
|---|---|
| repeat | 重复，默认属性值，表示会使用背景图片重复加载填满整个盒子背景区域 |
| norepeat | 不重复，不论背景图是否大于盒子范围，都只加载一次图片 |
| repeat-x | 水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复 |
| repeat-y | 垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复 |
（4）背景定位 background-position
主要用于设置不重复的图片在背景区域的加载开始位置。
第一个属性值：表示背景图片在水平方向的位置。
第二个属性值：表示背景图片在垂直方向的位置。
单词表示法
水平方向可选单词：left、center、right
垂直方向可选单词：top、center、bottom
单词表示图片与盒子背景区域进行对应方向的对齐。
像素表示法
第一个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离。
第二个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离。
注： 像素值区分正负，正数表示图片针对盒子的原点向右、向下移动。
负数表示图片针对盒子的原点向左、向上移动。
可以利用属性值为负数，制作在小盒子中显示大的背景图的一部分。 使用 fireworks软件量取尺寸，读取数据。可用于精灵图。
第一步：在设计图中，使用切片工具制作一个想要显示区域大小的切片，让切片左上顶点位于想要加载的背景部分。
第二步：读取属性栏的切片数据，其中宽、高就是要加载的盒子的宽高，x 和 y 的数值表示移动的距离的绝对值，直接将数值加负号赋值给背景定位属性。
百分比表示法
100%代表的数值：
水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。
垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。
（5）背景附着 background-attachment
背景图片是否要随着页面或者盒子的滚动而滚动，属性值如下。
scroll，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走。
fixed，背景图的定位的参考点就从盒子 border 以内的左上顶点变为了浏览器窗口的左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着页面滚动而滚走。
（6）综合写法
background: url(images/bg4.jpg) no‐repeat center top fixed #fff;
注： 背景定位的两个属性值算一个属性值，不能被分开也不能颠倒顺序，五个属性值之间可以互换位置。
2、背景应用
（1）替换插入图
解决 SEO 问题： 可以将 HTML 结构中，插入图换成搜索关键字，然后使用 css 添加背景图给 <a> 标签或 <h1> 标签。
<h1>
<a href="#">淘宝网|购物|六一</a>
</h1>
<style>
.header h1 a {
display: block;
width: 146px;
height: 58px;
background: url(images/logo.png) no‐repeat;
}
</style>
然后将文字进行隐藏设置：
①将字号设置为 0。IE8 及以上或高版本浏览器可以隐藏文字，但是 IE7 及以下有兼容问题。
②可以设置给 <a> 标签一个 text-indent 属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性，将溢出文字隐藏。
（2）padding 区域背景图
在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，背景区域应该使用 padding 挤出位置。
.news li {
padding‐left: 25px;
background: url(images/s2.png) no‐repeat left center;
}
（3）精灵图技术
将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。否则，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。
技术依据：
①将网页中需要用到的小尺寸背景图制作成一张背景透明的 png 图片。
②利用背景定位技术，将精灵图的每个小图片加载到对应的标签上。
注：
a. 精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放。
b. 精灵图的宽度取决于最宽的那个背景图片的标签宽度。
c. 精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白，保证背景图片加载时不能出现多余内容。
d. 在精灵图的最底端，尽量留一点空白，方便以后添加其他精灵图。
可以通过在线工具生成精灵图
3、CSS3新增背景属性
（1）背景半透明
background: rgba(0,0,0,0.3);
/* 给文字和边框透明 */
color: rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
注： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。
（2）背景缩放 background-size
| 属性值 | 作用 |
|---|---|
| px值 | 1-2个像素值，1个值，垂直方向等比例拉伸；2个值，正常加载 |
| 百分比 | 数值参照盒子的宽高属性 |
| cover | 会自动调整缩放比例，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。如有溢出部分则会被隐藏。 |
| contain | 会自动调整缩放比例，把图像图像扩展至最大尺寸，保证图片始终完整显示在背景区域。 |
（3）多背景
background-image: url(images/in_1.png),url(images/meng.jpg);
4、定位属性 position
（1）相对定位 relative
参考元素：标签加载的原始位置。
/* 盒子相对于自身原始位置向右向下分别移动100px */
/* 正数：表示偏移方向与属性名方向相反。
负数：表示偏移方向与属性名方向相同。 */
position: relative;
left: 100px;
top: 100px;
性质： 相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置。
注： 同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了 left 和 right 属性，只会加载 left 属性。垂直方向只加载 top 属性。 由于相对定位的参考元素是自身，left 的正值等价于 right 的负值，top 的正值等价于 bottom 的负值。
实际应用：
①由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相情况。
②相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调。
（2）绝对定位 absolute
参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考 <body>。
性质： 绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开。
<body> 为参考元素的参考点，参考点的确定与偏移量方向有关
第一，如果有 top 参与的定位，参考点就是 <body> 页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。
第二，如果有 bottom 参与的绝对定位，参考点是 <body> 页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。
注： 在绝对定位中，由于参考点不同，left 正值不再等价于 right 的负值。
实际应用中： 如果以 <body> 为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用 <body> 作为参考元素。
祖先级为参考元素
参考元素：参考的是祖先元素中有任意定位的，在 HTML 结构中距离目标最近的祖先。
<div class="box1"> <!--有相对定位-->
<div class="box2"> <!--有绝对定位-->
<div class="box3"> <!--没有定位-->
<p></p> <!--绝对定位的p的参考元素是距离更近的有定位的box2-->
</div>
</div>
</div>
三种定位组合方式：子绝父相、子绝父绝、子绝父固，由于相对定位的祖先级位置更稳定，大多使用子绝父相的情况。
祖先元素参考点
如果绝对定位的参考元素是某个祖先级，参考点是盒子 border 以内的四个顶点，组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的 padding 区域。
例如：left、top：参考点是祖先的 border 以内的左上顶点，对比点是盒子自身的左上角。
（3）固定定位 fixed
参考元素：浏览器窗口。
/* 一键回到顶部 */
.backtop {
position: fixed;
width: 100px;
height: 50px;
right: 50px;
bottom: 50px;
background‐color: #ccc;
font: bold 20px/50px "Arial";
text‐align: center;
color: #333;
text‐decoration: none;
}
性质： 固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上。
（4）定位应用
压盖效果： 由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，实际工作中，常见的是绝对定位制作的压盖。
<div class="box"> <!--相对定位-->
<img src="images/1.jpg" alt="" /> <!--标准流子级-->
<p></p> <!--绝对定位压盖上面的图片-->
</div>
居中:
第一步：在居中的方向使用一个偏移量属性，例如 left，设置属性值为 50%。导致图片的左顶点移动到参考元素的中心位置。百分比参考border以内宽度。
第二步：给绝对定位的子盒子设置一个同方向的 margin，例如 margin-left，属性值为负的自身宽度的一半。
注： 不论子盒子的宽度是否比参考元素更宽，都能使用以上方法进行居中设置。
扩展应用：
①解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中。
②浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法。
（5）压盖顺序
a、默认压盖顺序： 定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。 如果都是定位的元素，在HTML中后写的定位压盖先写的定位。
b、自定义压盖顺序： 设置一个 z-index 属性，
①属性值大的会压盖属性值小的，设置zindex属性的会压盖没有设置的。
②如果属性值相同，比较HTML书写顺序，后写的压盖先写的。
③zindex属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。
④父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分：
父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的。
子级盒子：如果父级没设置z-index属性，子级z-index大的会压盖小的；如果父级设置了z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应”。
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
