CSS相关

line-height: 48px 行高
text-align: center 文字居中
clear: both 清除产生浮动

filter: blur(10px) filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)
详解

font-size: 12px 文字大小
font-weight: 700 文字加粗
font-size:0 因此在实际开发中，为了更好的还原设计稿，在父元素很有必要设置font-size:0，避免莫名其妙的间距

color: #fff 颜色
background: rgb(240, 20, 20) 背景
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4) 阴影

position: absolute 绝对定位
position: relative 相对定位
position: fixed 生成绝对定位的元素，相对于浏览器窗口进行定位 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定

如果要相对父级定位，父级要加上position: relative 。 子级加上position: absolute

display: inline-block 同一行显示
display: block
display: flex 弹性布局 详解

display: none
visibility: hidden
visibility: hidden和display: none 有什么不同？

padding: 6px 内边距
vertical-align: top 设置元素的垂直排列 top就是垂直对齐文本的顶部
transform: translate3d(0, 0, 0) 旋转 div 元素，translate3d(x,y,z) 定义 3D 转换。
transform: rotate(0)
transition: all 0.4s linear 线性
float: right (浮动)元素向左浮动
max-height 属性设置元素的最大高度
overflow 属性规定当内容溢出元素框时发生的事情
box-sizing 通过指定容器的盒子模型类型，达到不同的展示效果
backdrop-filter 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
opacity: 1 属性设置元素的不透明级别。 默认值: 1

border-radius: 1px 圆角
border-radius: 50% 50%为圆,

white-space 属性设置如何处理元素内的空白
white-space: nowrap 规定段落中的文本不进行换行 与over

text-overflow：clip | ellipsis 默认值：clip
clip： 当对象内文本溢出时不显示省略标记（…），而是将溢出的部分裁切掉。
ellipsis： 当对象内文本溢出时显示省略标记（…）。

text-indent 属性规定文本块中首行文本的缩进

position: fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
border-radius: 16px 圆角
//让logo高亮（stylus 预处理器）要:class绑定才有效
.logo
&.highlight
background: rgb(0, 160, 220)

//按钮条件颜色判断（stylus 预处理器）要:class绑定才有效
.pay
&.not-enough
background: #2b333b
&.enough
background: #00b43c
color: #fff

ip5的规则

CSS: :last-child 与 :first-child的坑

last-child 理解为最后一个

.tab-item
				flex: 1
				text-align: center
				& > a  //&表示父元素.tab_item  > a 表示所有的a标签
					display: block
					font-size: 14px
					color: rgb(77, 85, 93)
					&.active  //这里的&表示父元素a标签,表示点击后字体变的颜色
						color: rgb(240, 20, 20) 
						

#指定背景图像的大小

三者配合使用

    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;

垂直居中对齐

.list
	  display: flex
	  flex-direction: column
	  justify-content: center //这个删除就不会垂直居中
	  text-align: center

#图片显示正方形

 .wrapper
		overflow: hidden
		height: 0
		width: 100%
		padding-bottom: 100%