CSS基本属性

一、文本属性

color 为字体指定颜色：

    有rgb(0~255，0~255，0~255） 颜色十六进制：#0000，颜色名字：red/black/white  rgba(0~255,0~255,0~255,0~1):a为透明度，取值是0~1；

div {
  height: 100px;
  width: 100px;
  background: #000;
  /* 十六进制 */
  color: #1a1a1a;
  /* rgb */
  color: rgb(90, 80, 100);
  /* rgba */
  color: rgba(90, 80, 100, 0.5);
  /* 颜色名字 */
  color: black;
}

font-style 用于打开和关闭斜体文本：

    默认值为normal，斜体：italic

font-weight 为字体设置粗细程度:

		取值为数字：例：100~900 或者是bold（700）加粗或normal（400）

font-size 为文字指定大小

		取值为像数值：15px；一定要带单位

font-family 为文字指定特殊的字体，

	浏览器只会使用浏览器可以访问到的字体，即用户已经安装的字体
	取值为："字体名称"，"备用字体名称"
	注意：
	1.如果是中文，要带引号。逗号分割开备用字体
	2.如果希望中文字体与英文字体分别处理字体类型，那么英文字体引用要在中文字体前面

缩写形式 font: style weight size family

		font：style weight size family;
		  例如:
			 font:italic bold 10px "楷体";
		sytle可以省略 weight可以省略，且位置可互换，其他不可省且位置排序固定

​

webFont 网络字体

	https://www.ziti163.com/webfont/   链接
	当用户电脑中没有安装对应字体的时候，webFont可以加载网络字体进行显示。
	@font-face {            
font-family: 'myfont';          
src: url(“/fonts/test.woff”), url("/fonts/test.ttf");       
}       
div {           
font-family: myfont;        
}
<div>        
  test  
</div>

字体图标

 目前比较流行的开源字体图标库有
  iconfont               http://www.iconfont.cn/
  	 font-awesome    http://fontawesome.dashgame.com/
	例：iconfont
	##### -iconfont使用步骤
	1.打开iconfont网站https://www.iconfont.cn/
	2.搜索要使用的图标
	3.将喜欢的图标加入到购物车，前提是需要登录iconfont
	4.打开购物车，下载代码到本地
	5.下载后解压，将对应的文件夹放到项目目录下
	6.在对应的页面中，通过link标签引入刚刚下载文件里的iconfont.css，直接根据对应的类名使用即可-	
	##### iconfont多色图标使用步骤
	1.搜索或选择多色图标
	2.选择合适的图标加入购物车
	3.将图标添加至项目，没有项目创建即可
	4.在项目中选择symbol，生成线上链接或下载到本地
	5.引用线上js地址，直接使用script标签引入即可；下载到本地，引入iconfont.js到项目中即可
	多色与单色图标的区别：
	单色图标引入：
	引入的时css文件
	`<!-- class="iconfont icon-xxx" 使用对应的图标即可-->

	  <i class="iconfont icon-Flowerbud"></i>`

多色图标的引入
引入的时js文件

<!-- 挑选相应图标并获取类名，应用于页面 #icon-xxxx -->
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xianxingbingbao"></use>
  </svg>

​

text-decoration 设置或者取消文本修饰

underline：下划线
line-through:删除线
none:无样式
overline：上划线

text-align 文字排列方式

		center：中间对齐
		左对齐：left 右对齐:right

text-indent 文本缩进属性

取值：2em:缩进两个文字，单位就是em

text-transform 设置或者取消字体改变

uppercase/lowercase:将字体转换成大写/小写
​capitalize	将所有单词第一个字母转换为大写
full-width	转换为类似于一个等宽字体

text-shadow 设置或者取消文本阴影

水平方向(h-shadow) 垂直方向(v-shadow) 模糊距离(可选,blur) 阴影颜色(可选，默认为黑色color)：5px 5px 5px red,取值为none即没有字体阴影

二、列表样式

- 有默认样式的元素

​ ul,ol 元素的margin-top，margin-bottom均为16px(1em) ， padding-left为40px(2.5em)
​ li 元素没有设置默认的空白（行间距）
​ dl 元素的margin-top，margin-bottom均为16px(1em),但是没有内边距
​ dd 元素的margin-left为40px(2.5em)
​ p 元素的margin-top，margin-bottom为16px(1em)
a 元素

- list-style-type 设置列表项标志类型

​ 取值:

​ none : No item marker is shown.
​ disc : A filled circle (default value)
​ circle : A hollow circle
​ square : 小方块
​ decimal : Decimal numbers，Beginning with 1
​ lower-roman : Lowercase roman numerals，E.g. i, ii, iii, iv, v…
​ upper-roman : Uppercase roman numerals，E.g. I, II, III, IV, V…
​ decimal-leading-zero : Decimal numbers，Padded by initial zeros，E.g. 01, 02, 03, … 98, 99
​ …

- list-style-position 设置列表项标志出现的位置

取值:
	outside : 列表项标志出现在主块框的外部，即标志向与li标签是两个独立的(默认取值)
	inside  : 列表项标志出现在主块框的内部，即将标志项与li成为一个整体

- list-style-image 自定义设置列表项标志

取值:
	url() : 指定图标位置

- list-style 速写 type image position

列表样式的速记写法           
取值:          

list-style：type image position

我们最常用的就是list-style:none;设置没有任何样式，通过CSS去自定义样式。

三、其他样式

line-height:文字垂直居中：

取值：
	line-height：30px；
	注意：只针对文字，不针对模块居中，与text-align一样
	当文字多行时，不适宜使用该文字垂直居中

dispaly：可以改变标签的属性

取值：
	inline：行内元素，给元素设置宽高是无效的
	inline-block：行内块级元素，拥有行内元素属性也拥有块级元素的属性，可以设置宽高，且不独占一行
	block：块级元素，独占一行，设置宽高有效
	​none ： 不显示，不占据屏幕空间
	flex 伸缩盒布局，

visibility：隐藏与显示

	取值：
		hidden：隐藏元素，但会占据屏幕空间
		visible：显示元素

=========================================================

元素的隐藏与显示的4种方式:
-visibility：hidden 占据屏幕空间
-display：none 不占据屏幕空间
-opacity：0 透明度为0占据屏幕空间
-overflow:hidden 当子元素内容超出我们的父元素时会隐藏。

=========================================================

overflow:超出父元素时

取值：
	scroll:子元素内容超出时会显示纵横向滚动条
	auto：超出时会显示纵向滚动条
	hidden:超出内容隐藏

cursor:指定光标的样式

default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

四、盒子模型

1.盒子的基本属性

盒子一般指的是块元素，盒子是我们布局的重要机制。一个盒子应该由外边距、边框、内边距、内容组成。如div等

margin 外边距

外边距 代表盒子外面四周的区域。相邻元素的边距会合并（margin collapsing）
设置方式：
	margin：10px 为上下左右的外边距为10px
	margin：10px 20px 为上下为10px，左右为20px
	margin：10px 20px 30px 为上  左右 下
	**margin： 上 右 下 左 顺时针的形式**

padding 内边距

内间距 在任何定义的边界内的元素内容周围生成空间
设置方式与margin一样

border 边框

设定介于padding的外边缘与margin的内边缘之间，默认值为0，是一个盒子边框
圆角边框：border-radius:5px;

width & height

用于设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度。
max-width:元素的最大宽度，用来限制当前元素的最大宽度
min-width:元素的最小宽度
min-height：元素的最小高度
max-height：元素的最大高度

============================================================================

盒子的种类：

1.w3c盒子，也称标准盒子或内容盒子

即普通的盒子。如div等
设置宽高属性：
	width/height 属性仅表示盒子内容所占的宽高
盒子所占据的页面宽高：
	width+padding+border +margin
盒子的宽高：
	width/height+padding+border

2.边框盒子，也称IE盒子或怪异盒子

设置成边框盒子/盒模型：box-sizing:border-box;(该属性的默认值为content-box，时w3c盒子)
盒子所占页面的宽高：width/height+margin
盒子的宽/高：width/height

二者区别：(面试)

标准盒子不管怎么设置内外边框，内容区域的宽高都不会改变，它的宽高是设置给内容区的，IE盒子设置的内外边距时，会不断挤压内容区域，它的宽高设置是设置给盒子的

盒子的背景图片

background-image:url(‘背景图片地址’)

background-repeat 背景图片设置平铺

取值：
	repeat:当背景图片不够大时，会重复该图片，直至铺满盒子为止（默认）
	no-repeat:不设置平铺
	repeat-x/repeat-y:在x方向/y方向进行平铺

background-position 背景图片位置

取值：
center/left/right:在中心/左边/右边位置
background-position:10px 10px 图片原点在x轴与y轴的位置

速写法 background：图片颜色 图片地址 平铺方式 关联方式attachment 图片位置 图片位置

取值：
	背景颜色 背景图片地址 平铺方式 位置 位置：background:red url('') no-repeat 10px 10px

background-attachment 背景图片不随着滚动条的滚动而滚动

取值：flex

五、浮动

float 浮动设置

取值：
right/left/top/bottom :

浮动元素对兄弟元素的影响

当设置元素浮动时，会脱离文档流，飘在不设置浮动兄弟元素的上面，不占据底下的屏幕位置。注意文字是不会被浮动元素覆盖掉。

清除浮动的方式

两个元素同时设置浮动
clear:both; 清除浮动
overfow:hidden; 使用overflow与clear的效果一样，使用的使BFC原理

浮动对子父元素的影响

但子元素设置浮动时，父元素会产生高度塌陷，即父元素失去高度支撑。

解决高度塌陷的方法：

1.在设置了浮动得子元素得下方即父元素的里面设置一个空的div，给该div设置clear：both

2.使用伪元素方式，给父元素设置 类名::after{ content:"";display:block;clear:both; }

3.给父元素设置overflow:hidden；

字围现象

浮动的元素不可以遮挡文字，文字会从浮动元素的周围找到位置自动排列，这是因为文字具有自维现象

边距合并

兄弟外边距合并：
	当两个兄弟元素挨在一起时，外边距的合并，如果两个取值为正时，取最大的，当一正一负时，外边距相加，两个为负时，取绝对值较大的一个。 
	解决：
		1.BFC属性：给上边的兄弟元素，设置一个父元素的div，给该div设置overflow:hidden;
		2.只给其中一个兄弟元素设置外边距
父子级外边距合并：
	当父子元素都设置同一边的外边距时，会产生外边距合并的现象，取值一个比较大的值
	解决：
		1.使用padding解决，给父元素设置padding。
		2.给父元素设置边框border
		3.给父元素设置一个overflow:hidden;

BFC 块级格式化上下文，(面试)

概念：可以理解一个元素的属性，当元素拥有这个属性，就可以拥有一个独立的渲染空间，它的布局不会影响容器外的布局
如何触发:
	1.是html根元素
	2.浮动元素(元素的float值不是none)
	3.绝对定位(元素的position为absolute或fixed)
	4.display为inline-block、table-cell、table-caption、table、table-row、table-row-group、
	table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid
	5.overflow值不为visible的元素
作用
	1.避免外边距重叠
	2.清除浮动
	3.避免元素被浮动元素覆盖
	4.多列布局

六、定位布局

静态定位

​	是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。	
	position: static;

相对定位

特点：相对定位就是相对于自己在浏览器中的默认位置来定位的，不脱离文档流
position: relative;
使用top,right,bottom,left来控制

绝对定位

注意点：
1.绝对定位的元素是脱离标准流的
2.绝对定位的元素是不区分块级元素/行内元素/行内块级元素
3.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 			   	   而不是以整个网页的宽度和高度作为参考点
4.一个绝对定位的元素会忽略祖先元素的padding

固定定位

取值：position:fixed 不管滚动条如何滚动，都不会随着滚动条的滚动而不见。
特性：
1.会脱离文档流，相对于浏览器的视口区域，不保留原先位置

粘滞定位

取值：position:sticky
特性:
1.relative+fixed，当达到阈值之后，就变成了固定定位，否则为相对定位，例如position:sticky;top:50px;当滑到相对的50px后，元素不再向上移动，将变成flex定位，但是，只在父元素内生效
2.不脱离文档流，原先位置保留
3.父元素不能overflow:hidden或者overflow:auto属性。 

z-index 元素堆叠顺序的属性

类似于置于顶层或置于底层的操作，默认值为0

水平垂直居中

1.通过margin
2.通过父元素设置box-sizing：border-box ，再通过padding挤压
3.通过父元素相对定位：给父元素设置相对定位，子元素设置绝对定位，并且配合属性全部为0，margin:auto
4.通过父元素相对定位：给父元素设置相对定位，子元素设置绝对定位，top:50%;left:50%,margin-left:-width/2;margin-top:-height/2;
5.利用伸缩盒布局：父元素设置dispaly:flex，justify-content:center; align-items:center;
6.利用宫格布局:父元素设置 display:grid,justify-conten:center;align-items:center;
7.给父元素设置display:flex;子元素设置margin:auto;

七、flex伸缩盒/弹性盒

flex布局可以简便、完整、响应式地实现各种页面布局。

取值与说明

display：flex；
默认沿着子元素主轴的方向进行排列

flex的属性

flex-direction 更改主轴方向

取值：
1.row：默认,主轴为水平方向
2.column：主轴沿着列排列，为竖直方向
3.row-reverse:主轴为水平方向的反转，默认主轴的起点为左上角，反转后起点为右上角，终点为右下角
4.column-reverse，主轴为列反转，起点为左下角，终点为左上角

flex-wrap 设置弹性元素是否换行

如果弹性元素超出父元素宽度，默认是不换行的，会进行等比例压缩。
取值：
1.nowrap:默认取值，不换行
2.wrap：换行
3.wrap-reverse：反向换行，即排不下的换到上面

flex-flow 更改主轴方向与设置换行的集合

取值：
主轴方向 是否换行：例flex-flow: row wrap

justify-content 设置主轴的对齐方式

取值：
1.flex-start: 主轴左对齐
2.center：主轴做一个居中对齐，子元素会变成居中对齐
3. flex-end：主轴做一个右对齐，子元素会变成右对齐
4. space-around:弹性元素间距为左右两侧项目到容器间距的2倍，

6. space-between:项目之间间距与项目与容器间距相等

7. space-evenly:弹性元素之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin

align-items 设置交叉轴对齐方式

取值：
1.flex-start ：项目在交叉轴紧贴容器顶部，flex-end与之相反：
2.flex-end
3.	center：使用最多，自然不会陌生，在交叉轴中心位置排列
4.	baseline：比较特殊，它让项目以第一行文字的基线为参照进行排列，即文字对齐，还会优先选择文字进行一个对齐
5.	stretch：即如果弹性元素没设置高度，或高度为auto，则高度占满整个容器

align-content 设置弹性元素多行对齐方式

如果要出现align-content必须要使用换行
取值：
1.flex-start:开始位置从起点紧靠排列
2.flex-end：在终点开始的位置紧靠排列
3.center：在垂直方向中间的的位置开始紧靠排列
4.space-between: 上下两侧项目紧贴容器
5.space-evenly同理，项目之间间距与项目到容器之间间距相等
6.space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍。

弹性元素属性

order 控制元素的排列顺序

控制元素的排列顺序，取值是数字，值越小越靠前，默认order是0

flex-grow 用于决定弹性元素是否放大

用于当弹性盒有剩余空间时，flex-grow可以用于决定当前元素是否被放大占据剩余的空间，默认值是0；
取值：
1.flex-grow：1；将剩余的一份空间给到该弹性元素
2.要将剩余空间均匀分配给全部弹性元素时，只要给每个弹性元素都设置flex-grow:1;即可

flex-shrink 用于决定弹性元素是否缩小

当弹性盒的剩余空间不足时，flex-shrink可以用于决定哪个弹性元素不缩小，默认是缩小的
取值：
1.flex-shrink：0，该元素不等比压缩
2.1；默认值，等比例压缩

flex-basis 用于设置弹性元素宽度取值

默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖widtn属性。

flex 是grow shrink basis属性的简写

grow shrink basis:默认值是：0 1 auto
取值：flex：1;代表占满剩余空间 

align-self 设置弹性元素自己的交叉轴的对齐方式

用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。
取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。

八、css动画

过渡-Transition

其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。

过度三要素

1.1必须要有属性发生变化
1.2必须告诉系统哪个属性需要执行过渡效果
1.3必须告诉系统过渡效果持续时长

-过渡触发

1、:hover 鼠标悬停触发

2、:active 用户单击元素并按住鼠标时触发

3、:focus 获得焦点时触发

4、@media触发 符合媒体查询条件时触发

5、点击事件 用户点击元素时触发

过度的属性

transition-property 规定过渡的名称

取值：
	1.none：不给属性值
	2.取值为属性名，如width/backgorund-color等
	3.可一次性定义多个过渡的属性，用逗号隔开即可，如 transition-property：width,backgorund-color;
	4.all：   所有属性都将获得过渡效果。

transition-duration 规定的过渡的时间

取值：transition-duration:5s;	默认是0

transition-timing-function 规定过渡效果的时间曲线。

linear  规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease    规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out    规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)   在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay 设置过渡的等待时长

取值：默认是0s，等待两秒之后才过渡

transition 过渡简写

取值：transition: 过渡属性 过渡时长 运动速度(过渡曲线) 延迟时间;
/*transition: width 5s linear 0s,background-color 5s linear 0s;*/ 
/*transition: background-color 5s linear 0s;*/ 
/*transition: width 5s,background-color 5s,height 5s;*/

动画animation

-animation-name 指定要绑定到选择器的关键帧的名称，

即告诉系统需要执行哪个动画，自己取名字。
	通过@keyframes来设置动画序列，序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间，也可以通过from关键字表示。100%表示动画的结束时间，也可以通过to关键字表示。
  关键帧：
 @keyframes animiationName{
		keyframes-selector{
		css-style;
}
}

-animation-duration 动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长

​ time 指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。

-animation-timing-function 设置动画将如何完成一个周期，告诉系统动画执行的速度

​ linear 动画从头到尾的速度是相同的。
​ ease 默认。动画以低速开始，然后加快，在结束前变慢。
​ ease-in 动画以低速开始。
​ ease-out 动画以低速结束。
​ ease-in-out 动画以低速开始和结束。
​ cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

-animation-delay 设置动画在启动前的延迟间隔。

​ time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0

-animation-iteration-count 定义动画的播放次数。告诉系统动画需要执行几次

​ n 一个数字，定义应该播放多少次动画
​ infinite 无限次执行

-animation-direction 指定是否应该轮流反向播放动画。

​ normal 默认的取值, 执行完一次之后回到起点继续执行下一次
​ alternate 往返动画, 执行完一次之后往回执行下一次
​ reverse 反向执行

-animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

​ none: 不做任何改变
​ forwards: 让元素结束状态保持动画最后一帧的样式
​ backwards: 让元素等待状态的时候显示动画第一帧的样式
​ both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

-animation-play-state 告诉系统当前动画是否需要暂停

直接设置的话是没有效果的，要有触发条件才能实现效果，如鼠标悬浮的时候才给它暂停。
​ running: 执行动画
​ paused: 暂停动画

animation的简写

transform 转换

rotate 旋转

格式：transform:rotate(45deg);旋转45度，以对角线为圆心进行旋转，默认为顺时针旋转
transform:rotateX(45deg);围绕X轴旋转45度，是一个3D的效果

translate 平移

格式：
transform:translate(100px,100px)；在水平方向平移100px，垂直方向平移100px，相对于本身自己的位置来平移

scale 缩放

transform:scale(0.5，2); 在水平方向上缩小0.5倍，在垂直方向上放大2倍。  默认都是1，如果括号里的值大于1即是放大，小于1就是缩小。

transform 简写

transform：rotate() translate() scale(2);

transform-origin 形变中心点

用于更改形变的中心点，如果是旋转的话，可以改变旋转的中心点以右上角或左上角进行旋转。
格式：
transform-origin:center bottom;他的形变中心点在水平方向的中间，垂直方向的下边。取值也可以是像素值或者百分比

过渡transition与animation的区别

1.1不同点
过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画

1.2相同点
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果

九、媒体查询

即可以自动监测我们各个设备的屏幕的宽度，当设备的转换的话，尽量使用媒体查询。如果只是简单的宽高之间的转变，可以使用伸缩盒。每个媒体都要写一套媒体方案

使用方法

引入之后就会类似做一个if-else的作用

<!--第一种引入方式  link元素中的CSS媒体查询，当大于800px时，后面的example.css才生效 -->
<link rel="stylesheet" media="(min-width: 800px)" href="example.css" />

<!-- 第二种引入方式 样式表中的CSS媒体查询 ，当大于600px时，在media底下的样式才生效-->
<style>
@media (max-width: 600px) {
  .class {
    display: none;
  }
}
</style>

@media 媒体类型 and （媒体特性）{你的样式}

-媒体类型

all	所有媒体（默认值）
screen	彩色屏幕
print	打印预览

-媒体属性

width	（可加max min前缀）
height	（可加max min前缀）
device-width	（可加max min前缀）
orientation	portrait竖屏/landscape横屏

@media screen and (max-width:580px){
 body {
   background-color: red;
  }
}
/* 二者要and的条件满足时才能生效 */
@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:blue;}
}

and对应的还有逗号分割，就是或者的意思

面试题：px em rem的区别

px:像素单位，相对于屏幕宽高度而言
em:相对长度单位 相对于当前元素的字体大小，默认1em=16px(该当前元素没有设置字体大小时)
rem:相对的长度单位 相对于html元素的字体大小而言的，默认是1rem=16px(当没给html元素设置字体大小时)