新增UI方案
一、自定义字体
1.谷歌版本不一样的问题：第10节
2.Vscode没有新建目录，无法复制粘贴字体：第11节
解决方法：用Hbuilder，但是粘贴时自动关闭Hbuilder。
3. 字体效果不显示
#test{
font:200px “微软雅黑”；
}
4.控制台无法完全显示
5.@font-face:允许网页开发者为其网页指定在线字体。通过这种自备字体的方式，可消除用户对电脑字体的依赖。
Font-family:所指定的字体名字将被用于font或font-family属性
Src：字体资源
注意：不能在一个css选择器中定义@font-face!
6.字体图标
需要的软件：AI（画矢量图）
FontLabStudio(字体工具)
自定义字体网站：/tools/webfont-generator
Icomoon字体图标：https://icomoon.io/#home
7透明度opacity：0~1.
rgba(0255,0255,0255,01)
文本新增样式
文本阴影：
文字阴影text-shadow
浮雕文字：color:white;
text-shadow:black 10px 100px 100px;
文字模糊：transition
h1:hover{
color:rgba(0,0,0,0);
text-shadow:black 0 0 100px;
}
怎么溢出显示省略号：
White-space=no-wrap
overflow=hidden
text-overflow=ellipsis
包裹区域必须不能让子元素撑开
盒模型
阴影：box-shadow
关键字（内外阴影）
length(x方向, y方向,模糊程度，阴影面积，阴影颜色)
color：阴影颜色
默认阴影在边框外，使用inset后在边框内。
同文字阴影可以多层。
不能为负值。
text-shadow：
length(x方向, y方向,模糊程度)
倒影：（webkit内核 文字描边 背景镂空）
-webkit-box-reflect:right;
渐变倒影
调整大小：resize
配合 overflow: auto使用！！！
可选值：none,both，horizontal,vertical
box-sizing：用于更改和计算元素宽度和高度的默认css盒子模型。
border-box
content-box
12.圆角：
border-radius：10px 10px 10px 10px;
13.层级：浮动提升级别半层
14.滚动条在文档上。
初始包含块是一个视窗大小的矩形，和视窗无关。
滚动系统滚动条会影响初始包含块位置。
禁止系统滚动条
html,body{
height:100%;
overflow:hidden;
}
怎么解决ie6下固定定位失败的问题？
用绝对定位来模拟固定定位
（1） 禁止系统滚动条
（2） 将滚动条作用在最外层的包裹器或body身上的滚动条并不会影响初始包含块的位置，所以一个按照初始包含块定位的元素就不会产生移动。
15.边框图片：
border-image-source
border-image-slice：按比例切割图片。
border-image-repeat:定义图片如何填充边框（stretch拉伸.repeat,round平铺）。
border-image-width：边框宽度。
border-image-outset：定义边框图像可超出边框盒的大小，正值。
16.css2背景：
background-color
background-image:z轴堆叠，先指定的图像在后指定的额图像上进行绘制。
background-repeat
background-position：在规定范围里移动图片。
background-attachment：决定背景在视口中固定的还是包含它的区块滚动的。
（1） fixed：此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
（2） scroll:此关键字表示背景相对于元素本身固定，而不是随着它的内容滚动。
css3背景：
！默认情况下，背景图片从padding box开始绘制。
background-origin设置背景渲染的起始位置
background-clip
background-size
17．线性渐变是指图片：
background-image: linear-gradient(to结束的方向，green 30%,pink);
linear-gradient(45deg，green,pink);
径向渐变：radial-gradient（）函数创建一个,用来展示由原点（渐变中心）辐射开的颜色渐变。
默认均匀分布，椭圆。
18.如何实现一张图片的垂直水平居中：
body:after{
content:””;
display:inline-block;
height:100%;
vertical-align:middle;
}
Img{
Vertical-align:middle;
}
