一、基础
语法：<style>selector {property: value}</style>
选择器：元素、id、类
注释：/* 内容 */
尺寸：width、height
背景：background-color、background-image:url(imagepath)；、url(background.jpg)、background-repeat、background-size: contain
字体：font、font-size、font-style、font-weight、font-family
鼠标样式：span{cursor:default、auto、crosshair、pointer、e-resize、ne-resize、nw-resize、n-resize、se-resize、sw-resize、w-resize、text、wait、help、not-allowed
表格：table-layout:automatic|fixed、border-collapse:separate|collapse
边框：border-style、border-color、border-width、border、border-top、border-top、border-left、div、span
内边距：padding-left、padding-right、padding-top、padding-bottom、padding
外边距：margin-left/right/top/bottom
边框模型：.box{ width:70px; padding:5px; margin: 10px;}
超链状态：link、visited、hover、active
隐藏元素：display:none、visivility:hidden
css文件：<link rel="stylesheet" type="text/css" href="/style.css" />
优先级：style标签与外部文件style.css样式重复：优先使用最后出现的一个。style标签上的与style属性冲突：优先使用style属性。如果样式上增加了!important，则优先级最高，甚至高于style属性
二、布局
绝对定位：属性：position、值： absolute
相对定位：属性：position、值：relative
浮动：属性：float、值： left,right
显示方式：display:none/block/inline/inline-block
水平居中:通过设置属性align="center" 居中的内容、通过样式style="text-align:center" 居中的内容。默认情况下div会占用100%的宽度,所以无法观察元素是否居中，设置本div的宽度，然后再使用样式 margin: 0 auto来使得元素居中，span 是内联元素，无法设置宽度，所以不能通过margin:0 auto居中，span的居中可以通过放置在div中，然后让div text-align实现居中
左侧固定，右边自动占满：<style> .left{width:200px;float:left;background-color:pink} .right{overflow:hidden;background-color:lightskyblue;}</style>
垂直居中：line-height、#d {padding: 30 0;}div{border:solid 1px lightskyblue;}、#d {display: table-cell;vertical-align: middle;height:200px;}div{border:solid 1px lightskyblue;}
左右固定，中间自适应：.left{width:200px;:left;background-color:pink.right{width:200px;float:right;background-color:pink}.center {margin:0 200px; background-color:lightblue}
贴在下方：#div1{: relative;: 300px;: 90%;-color: skyblue;}#div2 {position: absolute;: 0;: 30px; width: 100%;-color: lightgreen;</style>
块之间的空格：使用float。float使用完毕之后，记得在下面加上 <div style="clear:both"></div> 用于使得后续的元素，不会和这些span重复在一起