【记录】 CSS

CSS

Cascading Style Sheets
层叠样式表

---

【样式】

（1）内联样式

写在元素的style属性里。
不方便复用。

（2）内部样式

写在head的style标签里。

（3）外部样式

写在外部的css文件里。

【元素之间的关系】

父元素：直接包含子元素的元素。
子元素：直接被父元素包含的元素。
祖先元素：直接或间接包含后代元素的元素。
后代元素：直接或间接被祖先元素包含的元素。

【继承】

祖先元素的样式会被其后代元素继承。

• 一般，把基本样式设置给祖先元素。
• 背景相关、边框相关、定位相关的样式不会被继承。

【选择器】

（1）元素选择器

标签名{}
例：span{}

（2）id选择器

#id{}
例：#p1{}

（3）类选择器

.class{}
例：.class1{}
可以为同一元素设置多个class，多个值用空格隔开。
例：< p class=“a b c” >< /p >

（4）并集选择器（选择器分组）

选择器1, 选择器2, 选择器3{}

（5）交集选择器（复合选择器）

选择器1选择器2选择器3{}
元素选择器类选择器{}

（6）后代元素选择器

祖先元素 后代元素{}

（7）子元素选择器

父元素>子元素{}

• 不推荐使用，兼容性不佳。

（8）兄弟元素选择器

兄元素+相邻的第一个弟元素{}
兄元素~后边所有的弟元素{}

（9）伪类选择器

元素:first-child

• 既是元素，又是父元素的第一个子元素。

元素:last-child
元素:nth-child()

• 括号里填某个数/even/odd。
• ie6不支持。

元素:first-of-type
元素:last-of-type
元素:nth-of-type()
元素:not()

• 否定伪类。

---

元素:link

• 普通的链接（没访问过的链接）。

元素:visited

• 访问过的链接。
• 只能修改链接的颜色。

元素:hover

• 鼠标移入。

元素:active

• 被点击。

元素:focus

• 获取焦点。

（10）伪元素选择器

元素::first-letter
元素::first-line
元素::selection

• 选中的内容。

元素::before

• p::before{ content:“我会出现在段落的最前面，且不能被选中”; }

元素::after

• p::after{ content:“我会出现在段落的最后面，且不能被选中”; }

（11）属性选择器

元素[属性名]

• 选取指定属性的元素。
• p[title]

元素[属性名=""]

• 选取指定属性值的元素。
• p[title=“a”]

元素[属性名^=""]

• 选取以指定内容开头的属性值的元素。

元素[属性名$=""]

• 选取以指定内容结尾的属性值的元素。

元素[属性名*=""]

• 选取属性值包含指定内容的元素。

（12）通配选择器

*{}

【选择器的优先级（权重）】

【从上往下，优先级依次降低】
!important

• 尽量避免使用。

内联样式(1000)
id选择器(100)
类和伪类选择器(10)
元素选择器(1)
通配(0)
继承的样式(没有优先级)

---

• 当选择器包含多种选择器时，需要将多种选择器的优先级相加再比较。（并集选择器的优先级是单独计算的）
• 选择器优先级计算不会超过它的最大数量级（即上一级优先级的大小）。
• 当选择器的优先级一样时，选择靠后的样式。

【大小单位】

像素px

• 不同显示器一个像素的大小也不相同；显示效果越好越清晰，像素越小，反之像素越大。

百分比%

• 相对于父元素的百分比。

em

• 相对于当前元素的字体大小
• 1em = 1font-size

rem

• 相对于根元素(html)的字体大小

vw

• 视口宽度。
• 100vw=一个视口宽度。

【颜色单位】

（1）颜色单词

（2）十六进制

#红色绿色蓝色

• 三组的两位十六进制
• 两位两位重复的可以简写（三组都是两位两位重复的才可以简写），如#ffff00=#ff0

（3）RGB

rgb(red, green, blue)

• 0-255
• 0%-100%

（4）RGBA

rgba(red, green, blue, alpha)

• alpha透明度：0-1

（5）HSL

hsl(hue, saturation, lightness)

• hue色相：0-360
• saturation饱和度：0%-100%
• lightness亮度：0%-100%

（6）HSLA

【字体】

（1）color

（2）font-size

默认16px。
最小12px。如果设置小于12px，自动设置为12px。
设置的不是字体本身的大小，是文字框的高度。
px
em
rem

（3）font-family

• 可以同时指定多个字体，多个字体之间用逗号分开；当采用多个字体时，会优先使用前面的字体，如果前面的字体没有再尝试下一个。
• 字体名称有空格的加引号。
• 一般把分类作为最后一个字体，英文字体放在中文字体前面。
• 字体分类：serif衬线字体，sans-serif非衬线字体，monospace等宽字体，cursive草书字体，fantasy虚幻字体。

font-face可以将服务器中的字体直接提供给用户去使用。
问题：加载速度；版权问题；字体格式。

@font-face{
	/* 指定字体的名字 */
	font-family: 'myfont';
	/* 服务器中字体的路径 */
	src: url('');
}

图标字体

• 矢量图，不会失真。注意版权问题。

font awesome

• 下载解压
• 将css和webfonts移动到项目中
• 将all.css引入到网页中
• 使用图标字体

/* 通过类 */
<i class="fab(或者是fas) fa-bell"></i>

/* 
通过实体
&#x实体编码
*/
<span class="fas">&#xf0f3;</span>

/* 
通过伪元素
1、设置编码
2、设置字体样式
fab
font-family: 'Font Awesome 5 Brands';

fas
font-family: 'Font Awesome 5 Free';
font-weight: 900;
*/
li::before{
	content: '\f1b0';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: blue;
	margin-right: 10px;
}

阿里字体库

• 下载解压
• 将除了html和demo.css外都移动到项目中
• 将iconfont.css引入到网页中
• 使用图标字体（类似上面）

（4）font-style

• normal
• italic斜体
• oblique倾斜
• inherit

（5）font-weight

• normal：400
• bold：700
• bolder
• lighter
• 数值（100-900）：一般用户的计算机往往没有那么多级别的字体，无法达到想要的效果。

（6）font-variant

• normal
• small-caps：小型大写字母（所有字母都以大写形式显示，但是小写字母的大写比大写字母的大小小）。

（7）font

浓缩上面的。
font-size和font-family必须写，且在最后。
【！！！】
在font中也可以指定行高，不指定则使用默认值（会存在先后解析导致覆盖问题）。

• font-size/line-height font-family
• 30px/30px “微软雅黑”
• 性能较好

【行高line-height】

取值：

• px
• 百分比：相对于当前元素字体大小。
• 整数值：相对于当前元素字体大小的倍数。
  在行高中，文字是垂直居中的。

【行间距】

根据上面可以计算：行间距=行高-字体大小。

【文本样式】

（1）text-align

• left
• right
• center
• justify：两端对齐（通过调整文本之间的空格大小）

（2）vertical-align

设置文本垂直对齐的方式。

• baseline：默认。父子元素基线对齐。
• top：顶部对齐。父子元素顶部对齐。
• bottom
• middle：子元素的中线和x的中线对齐。不是实际意义上的居中。

---

图片的基线并非图片下边边缘，还有一段距离。如果给图片设置border的话，图片和border之间还有一段空白。可以通过image{ vertical-align: top; }解决。

---

table相关：
元素在td中默认是垂直居中的，可以通过vertical-align、text-align来调整。

（3）text-decoration

• none
• underline：a标签默认。
• overline
• line-through

---

text-decoration: underline red dotted;
chrome和firefox都支持以上写法，ie不支持。

（4）white-space

设置网页如何处理空白。

• normal：默认。文本溢出，换行。
• nowrap：不换行，加滚动条。
• pre：保留预处理格式（代码里写成什么样显示什么样）。

实现网页里标题内容显示不下，用…显示。

.box{
	width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

（5）letter-spacing

（6）word-spacing

（7）text-transform

• none
• capitalize：单词首字母大写。
• uppercase：所有字母都大写。
• lowercase：所有字母都小写。

（8）text-indent

设置首行缩进。

• 2em

【opacity】

设置元素背景透明度（0-1）。

• ie8及以下浏览器不支持：filter:alpha(opacity=50)

【background】

background-color

background-image: url()

• 背景图片<元素：显示左上角。
• 背景图片>元素：平铺摆满。
• 背景颜色在背景图片后面。
• 渐变是图片！！！
  （1）线性渐变
  background-image: linear-gradient(to top, red, yellow);//从底部到顶部，红色开头，黄色结尾。
  第一个属性取值：
  ①to bottom（默认，可以省略不写）、to top、to left、to right。
  ②deg，度数。
  ③turn，1turn=1圈。
  第二三……个属性，颜色可以设置多个。
  background-image: linear-gradient(red 50px, yellow);//从50px开始渐变。
  background-image: repeating-linear-gradient(red 50px, yellow 100px);//重复渐变。
  （2）径向渐变
  background-image: radial-gradient(100px 100px, red, yellow);//100x100范围内为渐变，范围外为黄色。

background-repeat

• repeat：双方向平铺。
• no-repeat
• repeat-x
• repeat-y

background-position

• 水平位置 垂直位置：
• 使用top、right、left、bottom、center其中两个
• 百分比
• px

background-origin

• 背景图片偏移量的原点。
• padding-box：默认值。
• content-box
• border-box

background-size

• 设置背景图片的大小。
• 第一个值表示宽度，第二个值表示高度：只写一个，则第二个值默认是auto
• cover：图片的比例不变，将元素铺满（高度为元素高度，宽度等比例缩放）
• contain：图片的比例不变，将图片在元素中完整显示（宽度为元素宽度，高度等比例缩放）

background-attachment

• 设置背景图片是否随页面一起滚动。
• scroll
• fixed
  设置为fixed时，背景图片的定位永远相对于浏览器的窗口。

background-clip

• 设置背景的范围。
• border-box：默认。背景会出现在border和padding和content内。
• padding-box：只出现在padding和content内。
• content-box：只出现在content内。

background

• 整合。不写就使用默认值。
• 没有顺序要求，但是必须background-position/background-size

【雪碧图CSS-Sprite】

可以将多个小图片统一保存在一个大图片中，然后通过调整background-position来显示。

• 使用步骤：
  （1）确定要使用的图标
  （2）测量图标的大小
  （3）根据测量结果创建一个元素
  （4）将雪碧图设置为元素的背景图片
  （5）设置一个偏移量以显示正确的图片
• 优点：一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验。

【元素的层级】

如果元素的层级是一样的，下面的元素会盖住上面的。
z-index

• 没有开启定位的元素不能使用z-index。
• 父元素的层级再高，也不会盖住子元素。

【display】

inline

• 默认。
• 将元素变成内联元素。

block

• 将元素变成块元素。

inline-block

• 将元素变成行内块元素。

table-cell

• 将元素设置为单元格。可以使用td相关的属性。

none

• 不会被显示。
• 【不占位置。】
• 代码中有。

flex

• 设置块级弹性容器。

inline-flex

• 设置行内弹性容器。

【visibility】

visible

• 默认。

hidden

• 不会被显示。
• 【占位置。】
• 代码中有。

【overflow】

visible

• 默认。
• 淌出去，不做处理。

hidden
scroll

• 不论内容是否溢出，都会添加双方向滚动条。

auto

• 根据需求自动添加滚动条。

【盒子模型】

（1）margin（垂直外边距重叠）

【影响盒子的位置】
由于元素是靠左上摆放的，设置左上外边距时会改变盒子自身的位置。设置右下外边距时会改变其他盒子的位置。

---

垂直外边距重叠（margin collapse）：在网页中垂直方向的相邻外边距会发生外边距的重叠。

• 发生margin collapse的是兄弟元素
  相邻外边距中取最大值。
• 发生margin collapse的是父子元素
  （1）父元素设置padding=1px或者border=1px，再height-1px（因为子元素在父元素的content里，设置padding或border可以将父子元素的margin隔开）
  （2）父元素设置padding-top=100px，再height-100px
  （3）在子元素前面放一个空的table标签
  （4）给子元素添加一个类.clearfix::before{ content:""; display:table; }

---

许多浏览器都为元素设置了默认的margin和padding，解决方法：*{ margin: 0; padding: 0;}

【盒子可见框的大小由border、padding和content共同决定】

（2）border

border-width

• 四个值（上、右、下、左）
• 三个值（上、左/右、下）
• 两个值（上/下、左/右）
• border-xxx-width

border-color

• 和上面类似

border-style

• 和上面类似
• none（默认）
• solid
• dotted
• dashed（虚线）
• double（双线）

border-radius

• 四个值（左上、右上、右下、左下）
• 三个值（左上、右上/左下、右下）
• 两个值（左上/右下、右上/左下）
• border-xxx-xxx-radius

border

• 不能分别指定四条边

border-xxx

---

table相关：
border-spacing

• 设置table边框和td边框之间的距离。

border-collapse

• border-collapse: collapse;
• table边框和td边框合并。
• 如果设置了的话，border-spacing自动失效。

（3）padding

padding
padding-xxx

（4）content

width、height设置的是内容区。
background-color会延伸到内边距。

（5）outline

用法和border一样。
不会影响盒子可见框的大小。

（6）box-sizing

指定width和height的作用范围。

• content-box
  默认值。width和height指的是内容区的总大小。
• border-box
  width和height指的是内容区和内边距和边框的总大小。

（7）box-shadow

水平偏移量 垂直偏移量 模糊半径 阴影颜色（一般rgba(0,0,0,.3)）
不会影响盒子可见框大小。

【内联元素的盒模型】

（1）margin

支持水平外边距。水平方向的相邻外边距不会重叠。
不支持垂直外边距。

（2）border

支持水平内边距，会影响布局。
支持垂直内边距，不会影响布局。

（3）padding

同上。

（4）content

不能设置width和height。

【水平方向的布局等式】

子元素的margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素内容区的宽度
以上等式必须满足，如果左式相加结果使得等式不成立，发生过度约束，则等式会自动调整。

• 如果左式七个值中没有一个设置为auto，则自动调整margin-right值使得等式成立。
• 如果width、margin-left和margin-right中其中一个设置为auto，则自动调整设置为auto的值。
• 如果width设置为auto，margin-left和margin-right中其中一个设置为auto，则width自动调整为最大，另一个为0。
• 如果width固定，margin-left和margin-right都设置为auto，则margin-left=margin-right。

【定位position】

（1）static

默认。

【开启定位后，可以通过left、right、top、bottom设置元素的偏移量】

（2）相对定位relative

相对其原来位置。
使元素提高一个层级。

（3）绝对定位absolute

相对于其包含块（containing block）。

• 包含块正常情况下就是离当前元素最近的、开启了定位的祖先元素。
• 如果所有祖先元素都未开启定位，则包含块为根元素（html为根元素、初始包含块）。

脱离文档流。
使元素提高一个层级。
水平方向的布局等式增加两个值left、right。

• 子元素的left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 父元素内容区的宽度
• 如果左式9个值中没有一个设置为auto，则自动调整right值使得等式成立。
• 如果width、margin、left和right中有设置为auto，则自动调整设置为auto的值。
• 如果未设置left和right（left和right默认值为auto），则自动调整left和right。

垂直方向的布局等式必须满足。

• 元素的top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + bottom = 包含块的高度

（4）固定定位fixed

是一种绝对定位。
相对于浏览器的视口（viewport），浏览器窗口左上角。
脱离文档流。
使元素提高一个层级。
ie6不支持固定定位。

（5）粘滞定位sticky

和相对定位差不多，但是在到达某个位置时将其固定。
兼容性不佳。

【float】（高度塌陷）

• none
• left
• right

---

• 元素浮动后，会尽量向页面的左上或右上浮动，直到遇到父元素或者其他浮动元素。
• 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。
• 浮动元素不会超过他上边的兄弟元素。
• 浮动元素不会盖住文字，文字会自动环绕在浮动元素周围。

---

高度塌陷：如果父元素包含的元素全是浮动元素，则该元素高度变成0。

BFC(块级排版上下文Block Formatting Context)
（1）默认关闭。
（2）开启后的特性：

• 父元素的垂直外边距不会和子元素重叠。
• 不会被浮动元素所覆盖。
• 可以包含浮动的子元素。

（3）开启的方法：

• 根元素
• 设置元素浮动display: float：导致父元素宽度丢失，导致下边的元素上移。
• 设置元素绝对定位position: absolute。
• 设置元素为inline-block：导致宽度丢失。
• 设置元素为flex子项或grid子项。
• 设置display: flow-root。
• 设置overflow为非visible的值：设置为hidden是副作用最小的方法。

（4）ie6及以下的浏览器并不支持BFC，但有hasLayout属性类似于BFC。将元素的zoom设为1即可。（只在ie有效）
在高度塌陷的父元素内最后，添加一个空白div，设置clear: both

• 基本没有副作用，兼容性好，但会在页面中添加多余的结构。

利用after伪类.clearfix::after{ content: “”; display: block; clear: both; }和ie中.clearfix{ zoom: 1; }

终极修复margin collapse和高度塌陷万金油

.clearfix::before, .clearfix::after{
	content: "";
	display: table;
	clear: both;
}
.clearfix{
	zoom: 1;
}

【clear】

指定元素的哪一侧不允许浮动元素（清除浮动）。

• none
• left
• right
• both：清除对它影响最大的。

【文档流normal flow of the document】

块元素

• 默认宽度为父元素的100%。
• 默认高度被内容撑开。

内联元素

• 默认宽度和高度被内容撑开。

---

脱离文档流
当（1）设置了float（2）开启绝对定位（3）开启固定定位时会脱离文档流。
块元素

• 默认宽度和高度被内容撑开。
  内联元素
• 变成行内块元素。

【flex】

弹性容器
弹性元素（弹性项）
主轴
侧轴：和主轴垂直。

---

弹性容器
flex-direction

• 容器中弹性元素的排列方向。（等于主轴）
• row：默认值，水平从左到右。
• row-reverse：水平从右到左。
• column：垂直从上到下。
• column-reverse：垂直从下到上。

flex-wrap

• 设置弹性元素是否在弹性容器中自动换行。
• nowrap：默认值，元素不会自动换行。
• wrap：元素沿着侧轴方向自动换行。
• wrap-reverse：元素沿着侧轴反方向换行。

flex-flow

• flex-direction和flex-wrap的整合。
• flex-flow: row wrap;

justify-content

• flex-start：第一个元素贴着主轴起边，各个元素紧贴。
• flex-end：最后一个元素贴着主轴终边，各个元素紧贴。
• center：元素居中排列。
• space-around：空白分布到元素两侧。
• space-evenly：空白分布到元素单侧。
• space-between：空白均匀分配到元素之间。

align-items

• 元素在侧轴上如何对齐
• stretch：默认值，将元素的长度设为相同的值。
• flex-start：元素不会拉伸，沿着侧轴起边对齐。
• flex-end：沿着侧轴终边对齐。
• center：居中对齐。
• baseline：基线对齐。

align-content

• 和justify-content类似。

---

弹性元素
align-self

• 覆盖当前弹性元素上的align-items。

flex-grow

• 指定弹性元素的伸展系数。当父元素有多余空间时，子元素按照比例进行分配。
• flex-grow: 1;

flex-shrink

• 指定弹性元素的收缩系数。当父元素的空间不足容纳所有的子元素时，子元素按照比例进行收缩。
• flex-shrink: 0;

flex-basis

• 弹性元素在主轴上的基础长度。
• 默认值auto，参考自身元素的宽度或高度。

flex

• flex-grow、flex-shrink、flex-basis整合。
• flex: initial代表flex: 0 1 auto;
• flex: auto代表flex: 1 1 auto;
• flex: none代表felx: 0 0 auto;

order

• 指定元素的排列顺序。

移动端无脑使用flex。pc端ie8、9可能不支持，要用float。

flex布局教程

【Hack】

（1）条件Hack

只对ie浏览器有效，其他浏览器视为注释。（ie10及以上已经不支持）

• <!--[if IE]> ... <![endif]-->
• <!--[if IE 版本]> ... <![endif]-->
• <!--[if lt IE 版本]> ... <![endif]-->
• <!--[if lte IE 版本]> ... <![endif]-->
• <!--[if !IE 版本]> ... <![endif]-->

（2）属性Hack

在样式属性名前面加

• -（选择ie6及以下）
• *（选择ie7及以下）

在样式值后添加

• \9（选择ie6及以下）
• \0（选择ie8及以上）

（3）选择器Hack

在选择器前添加*html，则该选择器只有ie6可以识别。

【transition】

transition-property

• 规定要执行过渡的属性。（一般可以计算的属性就可以过渡；过渡必须是一个有效值向另一个有效值过渡）
• width
• height
• all

transition-duration

• 指定过渡效果的持续时间。
• 时间s和ms，要写出来。

transition-timing-function

• 指定过渡的执行方式。
• ease：默认。慢速开始，先加速再减速。
• linear：匀速。
• ease-in：加速运动。
• ease-out：减速运动。
• ease-in-out：先加速，后减速。
• cubic-bezier()：指定时序函数。贝塞尔曲线转换
• steps(n)：分n步执行过渡效果。闪现。
  可以设置第二个属性值：
  end：默认，在时间结束时执行过渡。
  start：在时间开始时执行过渡。
  transition-duration: 2s; steps(2, end);表示2s分成两步走，每一步是1s，在时间段1s的结束时执行过渡。

transition-delay

• 过渡效果的延迟。

transition

• 整合。
• 如果要写transition-delay，前面一个时间指的是transition-duration，第二个时间指的是transition-delay。

【animation】

动画和过渡类似，都是可以实现一些动态的效果。不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果。

.box{
	/* 要对当前元素生效的关键帧的名字 */
	animation-name: test;
	animation-duration: 2s;
	animation-delay: 2s;
	animation-timing-function: linear;
	/* 
		动画执行的次数；
		次数 or infinite 
	*/
	animation-iterator-count: 2;
	/* 
		动画执行的方向；
		normal（默认）
		reverse
		alternate（先正后反，交替执行）
		alternate-reverse 
	*/
	animation-direction: normal;
	/*
		设置动画的执行状态；
		running（默认）
		paused
	*/
	animation-play-state: running;
	/* 
		动画的填充模式；
		none（默认）：动画执行完毕，元素回到原来位置（是原始位置不是关键帧开始位置）。
		forwards：动画执行完毕，元素会停止在动画结束的位置。
		backwards：动画延时等待时，元素就处于动画开始的位置。
		both：结合了forwards和backwards。
	*/
	animation-fill-mode: none;
	
	/*
		整合。
	animation: ;
	*/
}

@keyframes test{
	from, 50%{
		margin-left: 0;
	}
	to{
		margin-left: 700px;
	}
}

【transform】

设置元素的变形效果，不会影响页面的布局。
transform: 函数

• 平移
  translateX()：沿着x轴方向（→）平移。
  translateY()：沿着y轴方向（↓）平移。
  translateX()：沿着z轴方向平移。
  数值可以是px，也可以是百分比（表示相对于自身宽度的百分比）。
• 旋转
  rotateX()：沿着x轴旋转。
  rotateY()：沿着y轴旋转。
  rotateZ()：沿着z轴旋转。
  数值可以是deg，也可以是turn。
• 缩放
  scaleX()：水平方向缩放。
  scaleY()：垂直方向缩放。
  scale()：双方向缩放。

---

backface-visiblity

• 是否显示元素的背面。
• hidden。

transform-style

• 设置3d变形效果。
• preserve-3d。

transform-origin

• 缩放源点。
• center：默认。
• x y。

【变量函数】

/*
	原生css也支持变量。
	语法：--变量名: 变量值;
	用法：var(--变量名);
	兼容性不好，ie不支持。
*/
html{
	--color: #bfa;
}
.item{
	color: var(--color);
}
/*
	calc()
	ie9以上支持。
*/
.item{
	width: calc(1000px/2);
}

【像素】

• 默认情况下，在PC端，1CSS像素=1物理像素。
  一个CSS像素最终由几个物理像素显示，由浏览器决定。
• 手机像素大小<<计算机像素大小。
• 像素比=CSS像素/物理像素。

【视口viewport】

• 视口是屏幕中用来显示网页的区域。
• 可以通过视口viewport来计算CSS像素和物理像素之间的比值。

移动端

• 默认情况下，移动端视口设为980px（CSS像素）。
• 完美视口是将像素比设置为最佳像素比的视口大小。
• device-width表示设备的宽度（完美视口）。
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

【响应式布局】

网页可以根据不同的设备或窗口大小呈现出不同的效果。

【媒体查询】

@media 媒体类型{}
媒体类型

• 使用逗号连接多个媒体类型。
• 在媒体类型前添加一个only，表示只有（为了兼容老版本浏览器）。
• all：所有设备
• print：打印设备
• screen：带屏幕的设备
• speech：屏幕阅读器

@media (媒体特性){}
媒体特性

• width：视口宽度
  @media (width: 500px){body{ }}

• min-width

• max-width

• height：视口高度

断点

• max-width: 768px超小屏幕（手机）
• min-width: 768px小屏幕
• min-width: 992px中型屏幕（ipad）
• min-width: 1200px大屏幕（电脑）
  @media (min-width: 500px), (max-width: 700px){}
@media only screen and (min-width: 500px) and (max-width: 700px){}