如何引入字体图标库以及了解各种样式，如文本样式，字体样式等

网络字体
奇葩字体，（字 -> icon）的引用

			@font-face {
				font-family: "iconfont";
			  src: url('iconfont.eot?t=1564624596715'); /* IE9 */
			  src: url('iconfont.eot?t=1564624596715#iefix') format('embedded-opentype'), /* IE6-IE8 */
			  url('data:application/x-font-woff2;charset=utf-8;base64,=') format('woff2'),
			  url('iconfont.woff?t=1564624596715') format('woff'),
			  url('iconfont.ttf?t=1564624596715') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
			  url('iconfont.svg?t=1564624596715#iconfont') format('svg'); /* iOS 4.1- */
			}

			.lishiziti {
				font-family:'iconfont'
			}
			.weixin:before {
				content:'\e123'
			}

图标：
1. 将图标从设计图中切割下来，当做图片使用(小程序)
缺点：放大与缩小比较麻烦，失真；无法更换颜色
2. 字体图标库（网页）

				 <div>hello</div>

字体图标库(第三方库)
iconfont / fontawesome(拓展)
使用方法：
1) 在iconfont官网中选择要使用的图标，放入到购物车中
2) 下载源码到本地
3) 本地引用iconfont.css文件
4) 应用样式即可

				  <i class="iconfont icon-xxx"></i>

文本样式 (可以被继承)

		text-align 	文本在容器中的排列方式
			left
			right
			center
		text-indent 文本在容器中的缩进
			2em
		text-decoration-line 	文本装饰线的位置
			none
			underline
			overline
			line-through
		text-decoration-style 文本装饰线的类型
			solid
			double
			dotted
			dashed
			wavy
		text-decoration-color 文本装饰线的颜色
		text-decoration 	以上速写形式
		text-shadow 	文本的阴影
			left top c color;

	列表样式
		list-style-type
			circle/quare/...
		list-style-image
			url()
		list-style-position
			inside/outside

		list-style:none	【*】

盒子样式（块元素）

		width
		height
		margin

盒子上下外边距不会合并，比如，第一个元素margin-bottom:20px;第二个元素margin-top:10px;他们的外边距为20px
margin

			margin-top
			margin-right
			margin-bottom
			margin-left

			margin:10px; 			上右下左都为10px
			margin:0 10px;		上下为0，左右为10px
			margin:0 5px 10px;上0，下10px 	左右5px
			margin:5px 10px 15px 20px 	上右下左

padding

			padding-top
			padding-right
			padding-bottom
			padding-left

			padding:10px; 			上右下左都为10px
			padding:0 10px;		上下为0，左右为10px
			padding:0 5px 10px;上0，下10px 	左右5px
			padding:5px 10px 15px 20px 	上右下左

border

			border-top-width
			border-right-width
			border-bottom-width
			border-left-width
			border-width

			border-top-style
			border-right-style
			border-bottom-style
			border-left-style
			border-style

			border-top-color
			border-right-color
			border-bottom-color
			border-left-color
			border-color

			border:1px solid #ededed;

border-radius

box-shadow

			box-shadow:5px 5px 10px #ccc;
			box-shadow:inset 0px 0 3px lightblue;

background-origin 背景起点

			border-box
			padding-box
			content-box

background-clip 对已经铺好的背景裁切

			border-box
			padding-box
			content-box

background-image

			url()

background-color
颜色

background-position

			位置
				center
				left top 
				100px 50px

background-repeat

			repeat-x
			repeat-y
			no-repeat

background

			background:url('') no-repeat center;
			background:center/cover padding-box url('./image/lianjia_08.png') no-repeat ;

1. 盒子模型
   内容盒子 （width = 内容宽）【传统盒子/w3c盒子】
   是绝大多数浏览器的默认盒子模型
   width : 100px
   表示内容区域的宽为100px
   边框盒子 （width = 边框以内所有元素宽）【怪异盒子/IE盒子】
   width : 100px;
   表示边框以内所有的宽的综合
   width = border + padding + 内容区域