提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
CSS用于控制网页的样式和布局, 修饰页面效果，可以配合脚本语言动态的对网页各元素进行格式化，提升用户体验性，接下来让我们详细看看CSS是如何将网页美容的。
一、CSS样式规则
CSS规则主要由两个主要部分构成：选择器，以及一条或多条声明。
- 选择器用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式。
- 属性和属性值之间以“键值对”的形式出现。
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
- 属性和属性值之间用英文“：”连接。
- 多个键值对之间使用英文“；”区分。
p { /*选择器*/
color: red; /*声明*/
font-size: 14px; /*声明*/
}
二、CSS引入方式
1.行内样式表 (不建议使用)
直接在标签的属性中使用style声明，在style属性中添加css声明即可。
<!--在标签内部再嵌套一个内嵌标签来设置样式-->
<p>这是一个<span style="color: red;">行内样式表</span>的css</p>
2.内部样式表（内联样式）
定义在head或body标签中,使用style标签
<style type="text/css">
p {
background-color: blue;
color: red;
}
</style>
3.外部样式表
定义在外部的css文件中，需要在head中引入相应的css文件
(1）html文件中：使用link来导入css文件
<html>
<head>
<title>CSS外部样式引入</title>
/*关联外部的css样式文件*/
<link type="text/css" rel="stylesheet" href="../css/text.css" />
</head>
<body>
</body>
</html>
/*type:定义链接文档的类型，在这里需要指定为"text/css",表示链接的外部文件为css样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
href：定义所链接外部样式表文件的url，可以是相对路径，也可以是绝对路径。*/
(2）css文件中：定义CSS样式
p {
background-color: blue;
color: red;
}
4.三种样式表总结
3种样式表的优先级：
1、行内样式表 > 内部样式表 = 外部样式表
2、当内部样式表和外部样式表同时存在时，采用 就近原则 来使用样式
三、CSS字体属性
| 字体属性 | 描述 |
|---|---|
| font-size：字号大小 | 用于设置字号 |
| font-family：字体 | 用于设置字体 |
| font-weight：字体粗细 | 用于设置字体粗细 |
| font-style：字体风格 | 用于定义字体风格如设置斜体、倾斜或正常字体 |
| font-variant | 规定字体异体 |
font-style 可用属性值如下：
- normal：默认值，浏览器会显示标准的字体样式。
- italic：浏览器会显示斜体的字体样式。
- oblique：浏览器会显示倾斜的字体样式。
font-variant 可用属性值如下：
- normal：默认值。浏览器会显示一个标准的字体。
- small-caps： 浏览器会显示小型大写字母的字体。
- inherit： 规定应该从父元素继承 font-variant 属性的值。
四、CSS文本属性
| 文本属性 | 描述 |
|---|---|
| color | 用于指定文本的颜色 |
| text-align | 指定元素文本的水平对齐方式 |
| text-decoration | 用于对文本添加修饰，如下划线、删除线等 |
| text-transform | 用于转换文本的大小写 |
| text-indent | 规定文本块(块级中的文本)中首行文本的缩进 |
| text-shadow | 用于设置文本的阴影效果 |
| direction | 用于指定文本的方向 |
| letter-spacing | 用于增加或减少字符间的空白（字符间距）主要用于汉字 |
| word-spacing | 用于增加或减少单词与单词之间的空白 主要用于英文段落 |
| line-height | 用于设置文字行与文字行之间的距离 |
| word-break | 规定自动换行的处理方法 |
4.1 color 文本颜色
color属性有3种表现形式：
- color-name：使用颜色名称，如：red, transparent
- hex-number：使用十六进制数表示，取值是0~f，每个颜色使用两位表示，如：#ff0000表示红色 0-9 a:10 b:11 c:12 d:13 e:14 f:15
- rgb-number：使用rgb颜色值表示，取值0~255，如rgb(255,0,0)，rgba(100%, 0%, 0%, .5)
- rgba：在rgb上多了一给a，表示透明度，取值0~1完全透明完全不透明
<style type="text/css">
h1 {
color: red;
}
h2 {
color: #00ff00;
}
h3 {
color: rgb(0, 0, 255);
}
h4 {
color: ; rgba(100%, 0%, 0%, .5)
}
</style>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题3</h4>
4.2 text-align 文本对齐方式
text-align用于指定元素文本的水平对齐方式，取值有left、right、center、justify（两端对齐文本）
<head>
<style type="text/css">
h1 {
text-align: left; /*左对齐*/
}
h2 {
text-align: center; /*居中对齐*/
}
h3 {
text-align: right; /*右对齐*/
}
p {
text-align: justify; /*分散对齐，主要针对英文段落中出现空格时，由于两边对齐，空格的大小会有变化*/
}
</style>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
</body>
4.3 text-decoration 文本修饰
text-decoration用于对文本添加修饰，如下划线、删除线等。有如下取值：
- none：默认，定义标准的文本，没有任何修饰。
- underline：定义在文本下方的一条线
- overline：定义在文本上方的一条线
- line-through：定义穿过文本的一条线
<style type="text/css">
h1 {
text-decoration: none;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
h4 {
text-decoration: underline;
}
h5 {
/* 文字闪烁，只在火狐中支持 */
text-decoration: blink;
}
</style>
4.4 text-transform 文本转换
text-transform用于转换文本的大小写（主要用于英文），其取值有：
- none：默认
- capitalize：文本中每个单词以大写字母开头
- uppercase：所有单词字母都大写
- lowercase：所有单词字母都小写
4.5 text-indent 文本缩进
text-indent 属性规定文本块(块级中的文本)中首行文本的缩进。取值有：
- 数值：表示像素值
- 百分比：基于父元素宽度的百分比的缩进。
注意： 负值是允许的。如果值是负数，将第一行左缩进。
小技巧： 首行缩进2字符使用 2em
4.6 text-shadow 文本阴影
text-shadow用于设置文本的阴影效果。语法格式是
text-shadow: h-shadow v-shadow blur color;
text-shadow: h-shadow v-shadow blur color;
h-shadow：必需。水平阴影的位置。允许负值。horizontal， X轴往右是正值
v-shadow：必需。垂直阴影的位置。允许负值。 vertical，Y轴向下是正值
blur：可选。模糊的距离。
color：可选。阴影的颜色。
4.7 direction 文本方向
CSS中direction属性决定了HTML文字渲染方向
direction 用于指定文本的方向。取值如下：
-
ltr：默认的，文本方向从左到右 left to right
-
rtl：文本方向从右到左。right to left
4.8 letter-spacing 字符间距
letter-spacing 属性增加或减少字符间的空白（字符间距），使用数值表示，可以是负数。主要用于汉字
如果用于英文段落 增加/减少字母之间的空白
4.9 word-spacing 字间距
word-spacing属性增加或减少单词与单词之间的空白，允许使用负值。主要用于英文段落
如果作用于中文，挨在一起的中文会被识别为一个单词
4.10 line-height 行高
line-height 用于设置文字行与文字行之间的距离。取值如下：
-
number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
-
length：设置固定的行间距 px em 。
-
%：基于当前字体尺寸的百分比行间距。
使用技巧：在一行的盒子内，我们设定行高等于盒子的高度，就可以是文字垂直居中。只适用于单行文本
4.11 word-break
规定自动换行的处理方法。通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。
| 属性值 | 描述 |
|---|---|
| normal | 使用浏览器默认的换行规则。 |
| break-all | 允许在单词内换行(主要用于英语) |
| keep-all | 保持同行显示，不是中文日语韩语(CJK)其实和normal一样(主要用于CJK) |
keep-all: 所有“单词”一律不拆分换行可以理解为只有空格等可以触发自动换行
break-all：所有单词碰到边界一律拆分换行
4.12 white-space
设置元素对内容中的空格的处理方式
| 值 | 描述 |
|---|---|
| normal | 默认。文本空白 换行会被浏览器忽略。 |
| pre | 保留文本原样式 比如空格或换行 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到br标签为止。 |
| pre-wrap | 保留空白符序列，保留换行符。如果文本超出容器宽度处没有换行符自动换行 |
| pre-line | 合并空白符序列，保留换行符。如果文本超出容器宽度处没有换行符自动换行 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
4.12 overflow
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
如果父元素宽高能够包含子元素 auto就不会出现滚动条 scroll 就会出现滚动条
4.13 text-overflow
用来控制超长溢出的文字内容的显示方式
| 值 | 描述 |
|---|---|
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
单行文本溢出
div{
width: 100px;
height: 100px;
border: 1px solid black;
/* 强制一行显示*/
white-space: nowrap;
/* 超出部分隐藏 */
overflow: hidden;
/* 超出部分省略号 */
text-overflow: ellipsis;
}
多行文本溢出显示省略号，有较大的兼容性，适合用于webkit浏览器或移动端（移动端内核大部分是webkit内核）
- -webkit-line-clamp：限制在一个块元素显示的文本的行数。为实现效果，它需要组合其他的WebKit属性。常见结合属性以下两点：
- display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
div{
width: 100px;
/* 不要设置高度 */
overflow: hidden;
text-overflow: ellipsis;
/* 1.必须结合的属性，将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 2.是一个 不规范的属性，它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性 */
-webkit-line-clamp: 2;
/* 3.必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
五、CSS注释
css规则是使用 /*需要注释的内容*/ 进行注释的。
快捷键 ctrl + / 或者ctrl + shift + /
六、基础选择器
6.1 标签选择器（元素选择器）
标签选择器是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
基本语法格式:
标签名{属性1：属性值1; 属性2：属性值2; ...}
优点：能快速为页面中同类型的标签统一样式
缺点：不能设计差异化样式。
span {
color: red;
}
div {
background-color: red;
}
6.2 id选择器
id选择器使用“#”进行标识，后面紧跟id名。
#id名{属性1：属性值1; 属性2：属性值2; ...}
<标签名 id="id值"></标签名>
注意：元素的id值是唯一的，只能对应于文档中某一个具体的元素。
6.3 类选择器
类选择器使用“.”（英文点）进行标识，后面紧跟类名。
.类名{属性1：属性值1; 属性2：属性值2; ...}
<标签名 class="类名"></标签名>
相对于ID选择器，类选择器的类名可以是多个，并且一个类名可以对应多个元素，可以为元素对象定义单独或相同的样式。
6.4 多类名选择器
可以给标签指定多个类名，类名之间用空格隔开。
<style>
.red {
color: red;
}
.weight {
font-weight: bold;
}
</style>
<div class="red">红色</div>
<div class="red weigth">红色加粗</div>
6.5 通配符选择器
通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
基本语法格式:
* {属性1：属性值1; 属性2：属性值2; ...}
通常使用它来清楚HTML元素的默认边距。
* {
margin: 0; /*定义外边距*/
padding: 0; /*定义内边距*/
}
6.6 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。
伪类选择器使用“:”冒号来表示
(1) 链接伪类选择器
链接伪类选择器主要针对于a标签
a:link /*未访问的链接*/
a:visited /*已访问的链接*/
a:hover /*鼠标移动到链接上*/
a:active /*选定的链接*/
注意：
- a:hover 必须在 a:link 和 a:visited 之后。
- a:active 必须在 a:hover 之后，需要严格按顺序才能看到效果。
- visited只能修改颜色，在未访问状态下设置了背景颜色的条件下 可以设置背景颜色 其他不能做改变
记忆方法：l o v e h a t e
(2) 结构伪类选择器（CSS3）
-
:first-child 获取第一个子元素
在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。
-
:last-child 获取最后一个子元素。注意：IE8不支持X:last-child。
-
:nth-child(n) 选取某个元素的一个或者多个特定的子元素。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式<2n-1>（n从0开始，当表达式的值小于等于0时，将不选择任何子元素）。
-
:nth-last-child(n) 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始获取。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式（n从0开始）。
-
:first-of-type 选择特定元素的第一个子元素
-
:last-of-type 选择特定元素的最后一个子元素
-
:nth-of-type(n) 只计算父元素中指定的某种类型的子元素
-
:nth-last-of-type(n) 只计算父元素中指定的某种类型的子元素，从这个元素的最后一个元素开始获取
-
:only-child 匹配没有任何兄弟元素的元素
-
:only-of-type 匹配所有元素 这个元素没有其他相同类型的兄弟元素
-
:empty 选择的元素里面没有任何的内容或子节点
-
:root 匹配文档的根节点 html
(3) 目标伪类选择器
:target选择器用于选取页面中的某个target元素。该元素的id被当做页面的超链接来使用。
七、CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。
7.1 交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或者id选择器，两个选择器之间不能有空格。
<p class="blue">这是一个段落</p>
p.blue {
color: blue;
}
7.2 并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器，都可以作为并集选择器的一部分，其中用并集选择器设置的样式是所有选择器会执行的样式
<p class="p1">这是一个段落</p>
<p class="p2>这是一个段落</p>
<p class="p3">这是一个段落</p>
.p1,.p2,.p3{
color: blue;
}
7.3 兄弟选择器
兄弟选择器是CSS3.0新增的一个选择器，语法格式： **A~B **或者 A+B
- ‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。
- ‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。
<div>
<p>这是一个段落</p>
</div>
<p>我是相邻的兄弟元素</p>
<p>这是一个段落</p>
<style>
div+p {
color: red;
}
div~p {
background-color: blue;
}
</style>
7.4 后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代。其写法就是把外层标签写在前面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
<div class="red">
<p>red</p>
</div>
<p>这是一个段落</p>
<p>这是一个段落</p>
<style>
.red p {
color: red;
}
</style>
7.5 子元素选择器
子元素选择器只能选择作为其元素子元素的元素。其写法就是父亲标签写在前面，子级标签写在后面，中间跟一个“>”进行连接。
注意：这里的子元素表示亲儿子，不包含孙子、重孙子之类。
<ul class="header">
<li>一级菜单
<ul>
<li>
<ul>
<li>三级菜单</li>
</ul>
</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
<style>
.header li { /*后代选择器*/
color: red;
}
.header > li { /*子元素选择器*/
color: blue;
}
</style>
7.6 属性选择器
| 选择器 | 含义 |
|---|---|
| [attr] | 存在attr属性即可 |
| [attr=val] | 属性值完全等于val |
| [attr*=val] | 属性值里包含val字符并且在“任意”位置 |
| [attr^=val] | 属性值里包含val字符并且在“开始”位置 |
| [attr$=val] | 属性值里包含val字符并且在“结束”位置 |
7.7 伪元素选择器（CSS3）
- E::first-letter 块级文本的第一个单词或字
- E::first-line 块级文本的第一行
- E::selection 可改变选中文本的样式
- E::before和E::after 在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须结合content属性使用。
注意：before与after表示在盒子内部的前端和后端插入内容。
::-webkit-input-placeholder表示选择到input中的placeholder，为其设置样式
八、CSS三大特性
（1）CSS层叠性
是浏览器处理冲突的一个能力。如果一个css属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
（2）CSS继承性
含义：指我们设置上级(父级)的CSS样式，上级（父级）及以下的子级（下级）都具有此属性。
特殊性：
-
并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。
-
在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 。
-
a标签的颜色和下划线的设置不能继承，必须对a标签本身进行设置。
-
h标签的字体大小/加粗效果不能修改，必须对h标签本身进行修改。(字体放大两倍)
（3）CSS优先级
含义：优先级表示当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
优先级权重
1.同类型选择器：就近原则
2.不同类型选择器：按照：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
3.多个选择器混合时：通过计算权重判断
权重计算规则
（1）内联样式，如: style=””，权值为1，0，0，0。
（2）ID选择器，如：#content，权值为0，1，0，0。
（3）类，伪类和属性选择器，如.content E:link E[attr]，权值为0，0，1，0。
（4）元素选择器和伪元素选择器，如div p ::before，权值为0，0，0，1。
（5）通配符、子选择器、兄弟选择器等的。如*、>、+,权值为0，0，0，0。
（6）继承的样式没有权值。!important的权重最高
注意：单独使用一个选择器的时候，不能跨等级使css规则生效，也就是权重是在双方处于同一等级的情况下，才开始对比。
九、标签显示模式
HTML标签一般分为块标签和行内标签两种类型
（1）块级元素（block-level）
每个块元素通常都会独自占据一整行或多整行，可以对其设置高度、宽度、对齐等属性。常见块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<form <li>等。
特点：
-
总是从新行开始 — 换行
-
宽度、高度、外边距以及内边距都可以控制
-
宽度默认是容器的100%
-
可以容纳—嵌套 内联元素和其他块元素
（2）行内元素（inline-level）
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性。
常见的行内元素有：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等。
特点：
- 和相邻行内元素在一行上。
- 宽、高无效，但水平方向的padding和margin可以设置 ，垂直方向padding有效 但是margin不可以。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素（a特殊）。
注意：
- 只有文字才能组成段落，因此p标签中不能放块级元素。
- 链接里面不能在放链接。
（3）行内块元素（inline-block）
在行内元素中有几个特殊的标签<img />、<input />，可以对它们设置宽高和对齐属性，称为行内块元素。
特点：
（1）和相邻行内元素（行内块）在一行上，但是之间会有空白间隙。
（2）默认宽度就是它本身内容的宽度。
（3）宽高、内外边距都可以控制。
（4）标签显示模式转换 display
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块：display:inline-block;
十、CSS背景（background）
| background-color | 背景颜色 |
|---|---|
| background-image | 背景图片地址 |
| background-repeat | 是否平铺 |
| background-position | 背景位置 |
| background-attachment | 背景固定还是滚动 |
| 背景的合写（复合属性） | background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
10.1 背景颜色（background-color）
background-color属性设置一个元素的背景颜色。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。
指定背景颜色透明时可使用transparent作为属性值。
background-color: blue;
background-color: transparent; /* 透明 */
10.2 背景图片（background-image）
background-image属性设置一个元素的背景图像。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。
语法格式：
background-image: url('图片路径'); /*设置图片显示*/
10.3 背景平铺（background-repeat）
设置如何平铺对象的 background-image 属性。默认情况下，重复background-image的垂直和水平方向。
语法格式：
background-repeat: repeat-x; //表示向水平方向平铺
| 值 | 描述 |
|---|---|
| repeat | 背景图像将向垂直和水平方向重复 | 默认值 |
| repeat-x | 只有在水平方向会重复背景图像 |
| repeat-y | 只有在垂直方向会重复背景图像 |
| no-repeat | 不会重复 |
10.4 背景位置（background-position）
background-position属性设置背景图像的起始位置
第一个值表示水平方向，值增大时，意味着背景图片向右移动 减小 往左
第二个值垂直方向，值增大时，背景图片向下移动，减小往上移动
语法：
/*取值有left、right、top、bottom、center，如果仅指定一个关键字，其他值将会是"center"*/
/* 水平有left center right, 出垂直有top center bottom */
background-position: center; 关键词
background-position: 30% 20%; 百分比
background-position: 50px 100px; 固定值
(容器的宽度-图片的宽度)*百分比 = 图片最左边到容器左边的距离
(容器的高度-图片的高度)*百分比 = 图片最上边到容器上边的距离
10.5 背景附着（background-attachment）
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
语法：
background-attachment:fixed; //表示视口固定，不会随着元素的内容滚动。
| 值 | 说明 |
|---|---|
| scroll | 背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）| 默认值 |
| fixed | 背景相对于视口固定，不会随着元素的内容滚动。 |
10.6 背景简写
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
10.7 背景颜色透明（CSS3）
CSS3支持背景半透明的语法格式：
background: rgba(0, 0, 0, 0.5);
alpha的取值范围在0~1之间
同样可以给文字和边框透明，都是使用rgba的格式来写
color: rgba(255, 0, 0, 0.5);
border: 1px solid rgba(255, 0, 0, 0.5);
10.8 背景缩放（CSS3）
通过background-size设置背景图片的尺寸
1.可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）。
当设置一个值时，第二个值为auto，横向展示为设置的值 ， 或者设置的百分比 * 盒子的宽度，纵向会按照原图宽高度等比缩放。
2.设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
特点：会充满整个盒子，但是图片不一定能够显示完整
3.设置为contain时，会自动调整缩放比例，保证图片始终完整显示在背景区域。
特点：图片一定能显示完整，但是可能就不能充满盒子
10.9 多背景（CSS3）
以逗号分隔可以设置多背景，可用于自适应布局。
不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。前面的会堆叠在后面的上面
10.10 背景颜色渐变（CSS3）
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
从上到下的线性渐变
background: linear-gradient(red, yellow);
从左到右的线性渐变
background: linear-gradient(to right, blue, green);
// 或者
background: linear-gradient(to left, blue, green);
对角方向的线性渐变
background: linear-gradient(to bottom right, blue, green);
颜色结点均匀分布的径向渐变
background: radial-gradient(red, green, yellow);
颜色结点不均匀分布的径向渐变
background: radial-gradient(red 20%, green 30%, yellow 50%);
形状为圆形的径向渐变
background: radial-gradient(circle, red, green, yellow);
10.11 凹凸文字
<div class="tu">我是凸起的文字</div>
<div class="ao">我是凹下的文字</div>
<style>
body {
background-color: white;
/* 背景色和文字颜色一样，并且这种颜色需要和阴影的颜色形成色差 看得出视差效果 */
font: bold 5em "micro"
}
div {
margin: 30px;
color:white;
/* color: blue; */
/* color: red; */
/* color: green; */
}
/* 左上阴影为白色，右下阴影为黑色 */
.tu {
text-shadow: -1px -1px 1px white, 1px 1px 1px #000;
}
/* 左上阴影为黑色，右下阴影为白色 */
.ao {
text-shadow: -1px -1px 1px #000, 1px 1px 1px white;
}
</style>
10.12 空心文字
<style>
p {
font-size: 50px;
/* 伪空心元素，与背景色有关*/
-webkit-text-fill-color: white;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 1px;
}
</style>
</head>
<body>
<p>我是空心的文字</p>
</body>
10.13 精灵图（雪碧图）
为了节省网络资源，通常网页上小图标和图片都合成在一张图片上，到使用的时候再切图
查到目标图标大小，设置宽高，通过position调整位置，找到目标图标
十一 盒子模型（CSS重点）
11.1 盒子模型简介
盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成
11.2 盒子模型（Box Model）
盒子模型分为两种：、
(1) 标准盒模型
(2) IE盒模型
(3) 总结
W3C的盒模型方式被称为“content-box”，IE的被称为“border-box”，使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。
(4) 盒子边框（border）
边框就是元素最外层的包装。CSS边框属性允许你指定一个元素边框的样式和颜色。
语法：
border： border-width border-style border-color
- border-width：用于指定边框的粗细。
- border-style：用于定义边框的样式。
属性值：none无（默认）、solid（单实线）、dashed（虚线）、dotted（点线）、double（双实线） - border-color：用于设置边框的颜色。
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
圆角边框（CSS3）
使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。radius 半径（距离）
(5) 内边距（padding）
padding属性用于设置内边距。是指边框与内容之间的距离。
padding : 上右下左内边距
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding: 四周内边距 |
| 2个值 | padding: 上下、左右内边距 |
| 3个值 | padding: 上、左右、下内边距 |
| 4个值 | padding: 上、下、左、右内边距 |
(6) 外边距（margin）
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。
margin : 上右下左
注意：行内元素可以设置水平方向的内外边距，但不能设置垂直方向的内外边距。
外边距实现盒子居中方法：
margin: 0 auto
(7) 外边距合并
相邻块元素垂直外边距的合并
就是说垂直距离不是margin-bottom与margin-top之和，而是取两者中的较大者
解决方案：
- 想办法只给一个盒子加外边距
- BFC规范
嵌套块元素垂直外边距的合并
当两个块级元素嵌套时，如果内部的块设置有margin-top属性，而且父元素没有下边解决方法所述的特征，那么内部块的margin-top属性会绑架父元素，使其作用给父元素。
解决方案：
- 设置父元素或者自身的display:inline-block; （BFC规范）
- 设置父元素的border:1px solid #fff;(>0) ；或者border-top(一定要包含border-top方向) 此方法如果不想影响元素高度 加上box-sizing:border-box;
- 设置父元素的padding:1px;(>0); 或者padding-top(一定要包含padding-top方向) 此方法如果不想影响元素高度 加上box-sizeing:border-box;
- 给父元素设置overflow:hidden; （BFC规范）
- 给父元素或者自身设置position:absolute;（BFC规范）
- 设置父元素非空，填充一定的内容。（在父元素与当前子元素之间 加点具有高度的元素或内容分开父元素与当前子元素）
(8) 盒子阴影
语法格式：
box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸扩大/缩小阴影 阴影颜色 内/外阴影;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置，允许负值 |
| v-shadow | 必需。垂直阴影的位置，允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的尺寸 |
| color | 可选。阴影的颜色 |
| inset | 可选。将外部阴影（outset）改为内部阴影 |
十二 浮动（Float）
12.1 什么是文档流？
文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中
12.2 什么是浮动？
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，浮动的框可以向左或向右移动，但是会影响到正常文档流中的文字排版。
本语法如下
选择器 {
float: 属性值;
}
| 属性值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 元素不浮动（默认值） |
12.3 清除浮动
清除浮动clear属性
这个属性主要有三个值:
-
left清除前面的左浮动元素带给我的影响 -
right清除前面的右浮动元素带给我的影响 -
both同时清除前面的左右浮动元素带给我的影响. 一般情况下选择这个值比较方便.
给父元素设置after伪类清除：设置父元素中的最后一个子元素 （推荐）.clear:after{ display: block; content: ""; clear: both; }
十三 定位
13.1 元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分
边偏移
| 边偏移属性 | 描述 |
|---|---|
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| top | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
定位模式
position属性的常用值
| 属性值 | 描述 |
|---|---|
| static | 默认值，自动定位。 |
| relative | 相对位置，相对于其原文档流的位置进行定位 |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 |
| fixed | 固定定位，相对于浏览器窗口是固定位置 |
13.2 叠放次序（z-index）
当多个元素同时设置定位时，定位元素之间有可能发生重叠。
要想调整重叠定位元素的堆叠顺序，可以对定位元素使用z-index层叠等级属性，其取值可为正整数、负整数、0.。
同级:
1 不加z-index 后来者居上
2 加z-index 值越大越在上面 如果值相等 还是后来者居上
嵌套:
1 不加z-index 默认子元素在上
2 只给子元素加z-index值<0 可实现父元素为上
3 如果给父元素也添加z-index 父元素无论怎样 子元素都将在父元素上
嵌套+同层级：
1 如果父元素有其他兄弟元素 如果两者都没加z-index 后来者居上
2 两者父元素都没加z-index 若某一子元素z-index值大 那么该子元素将显示在上方 如果值相同 则后来者居上
3 如果父级都加了z-index 那么在进行比较时 只比较父元素z-index值 值越大则父元素连同里面的子元素越靠上 如果值相等 后来者居上
注意：
数字后面不能加单位。
只有相对定位、绝对定位、固定定位有此属性，其余标准流、浮动、静态定位都无此属性。
flex盒子的子元素也可以设置z-index属性
十四 布局中的对齐方式
vatical-align
| 值 | 描述 |
|---|---|
| baseline | 默认。同行元素基线对齐。 |
| sub | 元素的基线向下移。移动的距离未明确规定，具体由不同浏览器自行决定 |
| super | 元素的基线向上移。移动的距离未明确规定，具体由不同浏览器自行决定 |
| top | 元素的顶部(包含该元素的外边距margin-top padding-top)与父元素顶部对齐 (元素顶部与父元素中最高元素的顶部对齐) 元素顶部与父元素内容区域顶部对齐 |
| text-top | 把元素的顶端包含该元素的外边距margin-top)与父元素字体的顶端对齐 |
| middle | 行内元素的中线与行框的中线对齐 |
| bottom | 元素的底部与父元素底部对齐 (元素底部与父元素中最低元素的底部对齐) |
| text-bottom | 把元素的底端(margin-bottom, padding-bottom)与父元素字体的底端对齐。 |
| length | 是正值基线就向上移动，如果是负值基线向下移动。 |
| % | 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
十五 CSS3转换 transform
CSS3 转换是使元素改变形状、尺寸和位置的一种效果。 转换可以对元素进行移动transform: translateX(200px)、缩放transform: scaleY(0.5)、旋转transform: rotate(-90deg)、拉长或拉伸transform: skewX(-10deg)。
- transfrom不会影响其他元素的位置
- transfrom对内联元素（inline）没有效果
2D转换
translate( ) 平移，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
translate中的百分比单位是相对于自身元素的transform: translate(50%,50%);
rotate() 旋转，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。 需要带单位deg
scale() 放大缩小，该元素放大或缩小的大小，取决于宽度（X轴）和高度（Y轴）的参数 ，正数表示放大，小数表示缩小。以中心点进行缩放
skew() 倾斜，包含两个参数值，分别表示X轴Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
- skewX();表示只在X轴(水平方向)倾斜。
- skewY();表示只在Y轴(垂直方向)倾斜。
3D转换
想要看到立体效果就需要加上透视
透视perspective ：透视也称为视距，视距就是眼睛到屏幕的距离
距离视觉点较近的在电脑平面成像越大，越远成像越小
透视的单位是像素px
透视写在被观察元素的父元素上
rotateX(80deg)：正值向上翻转
rotateY(180deg)：正值向右翻转
translateZ(100px)：正值向前，负值向后 透视原理： 近大远小 。
<div class="box1">
<div class="box2">1111</div>
</div>
<style>
.box1 {
width: 300px;
height: 300px;
border: 1px solid blue;
margin: 0 auto;
perspective: 100px;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
margin-top: 100px;
}
.box1:hover .box2 {
transition: 3s;
/* transform: rotateX(80deg); */
transform: rotatex(80deg);
}
</style>
十六 CSS3过渡 transition
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。使用transition来实现。
格式：
transition:要过渡的属性 花费时间 运动曲线 何时开始
- 属性（必须）： 想要变化的css属性，宽度高度，背景颜色，转换，内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以
- 花费时间（必须）： 单位是秒（必须写单位） 比如0.5s
- 运动曲线： 单位是ease（可以省略）
- 何时开始： 单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）
多项改变方法：
要添加多个样式的变换效果，添加的属性由逗号分隔
过渡属性：
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
transition-timing-function属性值：
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果 |
| ease-in | 规定以慢速开始的过渡效果 |
| ease-out | 规定以慢速结束的过渡效果 |
| ease-in-out | 规定以慢速开始和结束的过渡效果 |
十七 CSS3动画 animation
动画是使元素从一种样式逐渐变化为另一种样式的效果， 可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。
语法格式：
设置在作用元素上 animation: 动画名字 动画时间 运动曲线 何时开始 循环次数 反向运动
17.1 使用方法
(1) 语法from to
语法格式：
@keyframes mymove{
from{}
to{}
}
(2) 百分比
语法格式：
@keyframes mymove{
%0{ // transform语句 }
50%{ // transform语句 }
100%{ // transform语句 }
}
17.2 动画运动(animation-timing-function)
- linear：线性过渡
- ease：平滑过渡
- ease-in：由慢到快
- ease-out：由快到慢
- ease-in-out：由慢到快再到慢
17.3 动画延时(animation-delay)
animation-delay 属性定义动画什么时候开始。
17.4 循环次数animation-iteration-count
animation-iteration-count 属性定义动画循环的次数。
无限循环设置值为:infinite
17.5 反向运动animation-direction
-
normal每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性，每次都是开始执行
-
reverse反向运行动画，每周期结束动画由尾到头运行。动画每次都是从尾部开始运行
-
alternate动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代，也就是第一次是正向的，第二次是反向的
-
alternate-reverse反向交替， 反向开始交替
动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。第一次是反向，后面是第二次是正向。
17.6 animation-play-state暂停或停止
animation-play-state css属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停(paused)和恢复(running)的动画的重放。 \
十八 CSS3多列显示
（1）column-count（CSS3）
column-count用于指定某个元素应分为的列数。给多列容器指定列数后，在窗口尺寸发生变化时，浏览器会根据列数和容器宽度，自动计算出每列的宽度，以保证按照 3 列进行布局。
取值如下：
- 数值：将元素的内容以指定的列数显示
- auto：列数将取决于其他属性，例如：“column-width”
（2）column-width（CSS3）
column-width指定列的宽度。取值如下：
- length：指定列宽的长度
- auto：浏览器将决定列的宽度
根据W3C标准，column-width属性值实际上是给浏览器建议的最佳宽度，实际的列宽可以根据容器空间的大小进行调整。调整规则如下：
- 当容器可用空间足够大时，实际的列宽可能大于所设置的列宽。
- 当容器的宽度小于设置的列宽时，将以容器的宽度作为列宽
（3）column-span(CSS3)
column-span属性指定某个元素应该跨越多少列(只有1和all)。column-span: 只能对块级（block）标签有效取值如下：
- none：不跨列 默认，如果元素超过当前列宽度，文字将会向下列延伸
- all：该元素应该跨越所有列
（4）column-gap（CSS3）
column-gap的属性指定的列之间的间隙。取值如下：
- length：一个指定的长度，将设置列之间的差距
- normal：指定一个列之间的普通差距。 W3C建议1EM值
（5）column-rule（CSS3）
column-rule用于指定列之间的规则：宽度，样式和颜色。
column-rule-width：设置列中之间的宽度
column-rule-style：设置列中之间的样式
column-rule-color：设置列中之间的颜色
（6）columns（CSS3）
columns是一个简写属性，用来设置列的宽度和列数，语法格式如下：
columns: column-width column-count;
（7）多列实现div布局
<style>
.column {
width: 470px;
/* 设置列数 */
-moz-column-count: 4;
/* Firefox */
-webkit-column-count: 4;
/* Safari and Chrome */
column-count: 4;
/* 设置列之间的间距 */
-moz-column-gap: 20px;
/* Firefox */
-webkit-column-gap: 20px;
/* Safari and Chrome */
column-gap: 20px;
/* 设置列之间的规则 */
-moz-column-rule: 5px solid blue;
/* Firefox */
-webkit-column-rule: 5px solid blue;
/* Safari and Chrome */
column-rule: 5px solid blue;
}
.column div{
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="column">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
十九 CSS3 弹性盒子(Flex Box)
CSS3弹性盒子相对于普通盒子更为灵活性
容器项目
容器： 设置了弹性盒子的这个盒子就叫容器
项目： 容器的子元素就称为项目
怎么设置弹性盒子呢？ display: flex;
主轴与交叉轴
主轴： 我们规定水平或者垂直方向是主轴方向 默认是水平方向 — 元素默认在主轴方向上排列
交叉轴： 与主轴垂直的方向 默认垂直反向
容器属性：
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）：
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap属性
容器没有剩余空间时 项目是否换行
- nowrap（默认）：不换行。
- wrap：换行
- wrap-reverse：换行，第一行在下方。
justify-content
项目在主轴方向上的排列方式
- flex-start 默认值 项目靠着起始位置
- flex-end 项目靠着结束位置
- center 项目居中
- space-between 两端对齐 中间有空隙
- space-around 项目左右两侧之间的间隙相等
- space-evenly 项目左右两侧之间的间隙相等 也等于项目之间的间隙
align-items
项目在交叉轴方向上的排列方式
- flex-start 默认值 项目靠着上沿位置
- flex-end 项目靠着下沿位置
- center 项目居中
- baseline 项目中第一行文字基线对齐
- stretch
如果项目有高度 效果与flex-start一样
如果项目没有高度/auto 项目的高度将会拉甚至容器的高度
align-content
定义多根轴线（比如换行）项目在交叉轴的排列方式
- flex-start 靠着交叉轴的上沿位置
- flex-end 靠着交叉轴的下沿位置
- center 居中
- space-between 两端对齐 中间有空隙
- space-around 项目上下两侧之间的间隙相等
- stretch 默认值
项目没有高度/auto 拉甚至交叉轴垂直方向的高度 容器的高度一半
项目有高度 容器折半的高度 上一行 靠着上边的高度上沿 下一行靠着下边的高度上
项目属性：
flex-grow
容器还有剩余空间 项目是否变大填充容器
>=0
比例
0 默认值 不放大
1 放大比例为1
所有项目都为1 所有项目一起平分容器剩余空间
某个项目为1 其余不设置默认为0 为1的项目分走容器剩余空间
某两个项目分为1.5 0.5 比例为3：1 所以设置为1.5项目分走容器3/4剩余空间
flex-shrink
容器剩余空间不足 项目是否缩小
>=0
比例
0 不缩小
所有项目为1 默认值 所有项目一起缩小 缩小一样的值
例子：假设所有项目宽之和为900 容器宽500 900-500 = 400
三个项目设置flex-shrink 分别为：1.5 0.5 1
1.5：0.5：1
3:1:2
那么三个项目实际宽分别为 ： 3/6*400 1/6*400 2/6*400
align-self
项目自身在交叉轴上的排列方式 覆盖容器的属性
- flex-start 项目靠着上沿位置
- flex-end 项目靠着下沿位置
- auto 默认值 按照容器的align-items属性值排列
- baseline 文字基线
- center 居中
- stretch
如果项目有高度 效果与flex-start一样
如果项目没有高度/auto 项目的高度将会拉甚至容器的高度
完美的居中
使用弹性盒子，居中变的很简单，只需要给子元素设置 margin: auto; (设置margin为auto，自动获取弹性容器中剩余空间)可以使得弹性子元素在两轴方向上完全居中。
二十 CSS3多媒体查询 Media Queries
@media可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则，实现适应显示。媒体查询可用于检测很多事情，例如：
- viewport(视窗) 的宽度与高度
- 设备的宽度与高度
- 朝向 (智能手机横屏，竖屏) 。
- 分辨率
目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。
（1）多媒体查询语法
多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。
@media not|only mediatype and (expressions) {
CSS 代码...;
}
@media only speech and (min-width: 500px){
CSS 代码...;
}
-
not: 用来排除掉特定的设备，比如 @media not print（非打印设备）。
-
only: 用 来规定某种特别的媒体类型。 表示只有 仅仅，表示某一种的媒体类型设备。
-
and: 表示并且，要求必须满足所有的表达式要求时，才能使用media定义样式
（2）CSS3多媒体类型
| 值 | 描述 |
|---|---|
| all | 用于所有多媒体类型设备 |
| 用于打印机 | |
| screen | 用于电脑屏幕，平板，智能手机等。 |
| speech | 用于屏幕阅读器 |
（3）常用的条件
max-width： 输出设备中页面最大可视区域宽度，小于这个width时，其中的css生效
min-width： 输出设备中页面最小可视区域宽度，大于这个width时，其中的css生效
max-height： 输出设备中页面最大可视区域高度
min-height： 输出设备中页面最小可视区域高度
（4）媒体查询两种方式
第一种：link的方式：
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="./css/green.css">
第二种：css的方式：
/*使用关键词"and"将多个媒体特性结合在一起*/
@media screen and (min-width:600px) and (max-width:900px){
body {
background-color:blue;
}
}
二十一 移动端布局
（1）布局概念
1. 静态布局
直接使用px作为单位 不推荐 不会适应屏幕
2. 流式布局
宽度使用%百分比，高度使用px作为单位
通常还会加上最大值和最小值
3. 自适应布局
创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。使用 @media媒体查询来切换多个布局
4. 响应式布局
通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用
5. 弹性布局
rem或em布局。rem是相对于html元素的font-size大小而言的，
em是相对于自身的font-size大小 1em = font-size的值
如果自己没有则相对自己最近的祖先font-size大小(其实也是相对于自己的font-size，因为font-size可以被继承)
如果所有的祖先都没有设置font-size属性，那么就会相对浏览器font-size的默认值大小，大部分浏览器默认都是16px
（2）基本概念
1、物理像素
-
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的，这是厂商出厂时就设置好了，比如iPhone 678是750*1334，其实也就是我们通常所说的屏幕分辨率。
也就是说在iPhone 678 一行可以放750个像素点，一列可以放1334个像素点
-
开发时1px不一定等于一个物理像素
-
PC端，1px等于一个物理像素，因为PC端屏幕宽度和分辨率一样，但移动端就不尽相同，比如iPhone8，分辨率为750，但屏宽却是375px
-
1px能显示的物理像素点的个数成为物理像素比或屏幕像素比
比如iPhone8中 375px屏宽 意味着375px占满整屏，而横向分辨率却是750 所以1px = 2物理像素
2、设备像素比(device pixel ratio)
物理像素比 = 物理像素(屏幕分辨率) / 设备独立像素(屏幕尺寸或者开发尺寸)
3、视网膜屏幕Retina
Retina为高清设备屏幕，是一种显示技术，可以将更多的物理像素点压缩到一块屏幕里，从而提高屏幕设备屏幕分辨率，并提高屏幕显示的细腻程度。
原理：原本图片1px = 1物理像素，但现在，我们只有1px这么宽却要显示2物理像素这么长，没有办法，只好把原像素撑大，相当于是图片放大，可以想象成我们的背景缩放
这种对盒子或者是文字来说影响并不大
一般的解决方案是提供2倍图，先准备一张宽100 高100 的图片 然后手动将图片的宽高设置为50*50，再放到手机里，会对当前图片放到50的2倍就是100，那么图片本身就是100宽高，这样的话图片就不会再模糊了。
4、视口 viewport
视口就是浏览器显示页面内容的屏幕区域，视口可分为布局视口，视觉视口和理想视口。
（1）布局视口layout viewport
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题
在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，980px远大于320px等移动设备屏幕，所以导致元素很小，如果想要看清只能缩放，但这样就会出现横线滚动条。
（2）布局视口layout viewport
用户正在看到的网站区域
视觉视口用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。
（3）理想视口ideal viewport
在手机屏幕能显示完整的网页，并且不需要用户手动缩放调整页面大小，文字和网页元素宽高合适。
布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。
（4）meta视口标签
在开发移动端页面，我们需要手动设置meta视口标签通知浏览器操作以达到使用理想视口的目的：
布局视口的宽度应该与理想视口宽度一致，简单理解就是设备有多宽，布局视口就多宽
1、完整标准视口标签写法 width=device-width: 表示视口与设备宽度一致 就是理想视口-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">
2、简单写法
<meta name="viewport" content="width=device-width, initial-scale=1.0">
| 属性 | 解释说明 | 标准viewport设置 |
|---|---|---|
| initial-scale | 初始缩放比，大于0的数字 0-1视口缩小 >1视口放大 | 视口缩放比例 |
| width | 宽度设置的是viewport宽度，可以设置device-width特殊值 | 视口宽度和设备保持一致 |
| maximum-scale | 最大缩放比，大于0的数字 | 最大允许的缩放比例1.0 |
| minimum-scale | 最小缩放比，大于0的数字 | 最小允许的缩放比例1.0 |
| user-scalable | 用户是否可以缩放，yes或no(1或0) | 不允许用户自行缩放 |
5、rem单位
-
em：以父元素的font-size来计算，如父元素的font-size: 16px ; 1em = 16px
-
rem：相对于根元素html标签的font-size来做计算，如html的font-size: 16px; 1rem = 16px
rem如何实现自适应设备
实际的元素 / 设计的元素 == 实际的页面 / 设计的页面
所谓"设计"就是我们写代码期望网页呈现出来的样子，所有元素的大小和位置都和我们预想的一摸一样。通常在电脑端呈现出来的就是和设计的是一样的，但是移动端由于屏幕比电脑端小，呈现出来的样子就会不太一样，错位时有发生，所以才需要适配。
如果上面的等式恒成立，则说明适配成功。实际的元素 == 设计的元素 * （ 实际的页面 / 设计的页面），也就是是说需要知道（ 实际的页面 / 设计的页面）,设为k。试想，如果css中有一个属性能知道这个比例k,那么适配问题就已经完美解决了。可惜，并没有这个属性。但是,幸运的是，rem可以充当我们和这个比例之间的桥梁，rem可以看作一个单位，它可以和根元素的文字大小关联，也就是说把html的font-size设为k，比如设备屏幕尺寸是300px,设计稿宽度是600px,则html的字体大小就是320/640 = 0.5px，没错，这个值一般都很小，但是font-size的值一般在10px以上，虽然html里的font-size肯定会被下面设置的font-size所覆盖，但是出于习惯，还是会将这个k值乘上一个系数，一般是100。
这样，我们就找到了页面上不变的东西，就可以以不变应万变。至此，页面上所有元素的大小都可以用rem，或者说比例k来表示。
实际大小（rem） = 测量的大小（px）/ html的font-size大小（px）
视窗单位
- vw : 1vw 等于视窗宽度的1%
- vh : 1vh 等于视窗高度的1%
- vmin : 选取 vw 和 vh 中最小的那个 700 * 900 100vmin
- vmax : 选取 vw 和 vh 中最大的那个 1700 * 900 100vmax
二十二 calc计算属性
（1）calc() 只作用于属性值
width: calc(100% - 20px);
（2）CSS很多长度都可以与calc()一起使用
- px
- %
- em
- rem
- vh
- vw
- vmin
- vmax 等
注意：不能在媒体查询中使用
（3）calc()的数学运算符
加法(+)和减法(-)要求这两个数都是长度
除法(/)要求第二个数字是无单位的。
乘法(*)要求其中一个数是无单位的。
注意：运算符两边留空白空间,否则不生效
1363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
