规则取值：
关键字：
位置 left right center top bottom medium
取消 none
颜色：
十六进制 #ffffff #ededed,简写为#fff
rgb函数 rgb(0,0,0)
关键字
渐变色 linear-gradient
长度：
绝对单位 px
相对单位
em 当前元素上的字体大小
font-size:12px
1em = 12px
2em = 24px
rem 当前html元素中设定的字体大小
html {
font-size:10px;
}
ul {
font-size:20px;
}
li {
height:2rem; //20px
}
% 百分比
border-radius:50%
字体样式 (可以被继承)
color
font-family 族
'微软雅黑' ,'Microsoft YaHei','宋体'
字体栈
font-family:"微软雅黑","Microsoft YaHei",serif;
font-size 大小
网页默认字体为16px
12px 10px
font-weight 粗细
bold
thin
bolder
100~900
font-style 是否打开斜体
line-height
font:
速写，简写
font: font-style font-weight font-size/line-height font-family
font:normal bold 14px/1.5em "微软雅黑","Microsoft YaHei"
网络字体
奇葩字体，（字 -> 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-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 = 内容宽）【传统盒子】
是绝大多数浏览器的默认盒子模型
width : 100px
表示内容区域的宽为100px
边框盒子 （width = 边框以内所有元素宽）【怪异盒子】
width : 100px;
表示边框以内所有的宽的综合
width = border + padding + 内容区域