一、
HTML仅用于页面内容的显示
而CSS是修饰
可查阅CSS手册查看大量的CSS样式
CSS难点在于在什么情况应该用什么手段解决问题
参考书籍 Zen Garden
引入样式表<link rel="stylesheet" type="text/css" href="xxx.css">
px像素
标题和文章一般用12px/14px
ATT注意编码问题，win10纪事本默认ANSI编码 如果meta里设置UTF-8则txt文档在保存的时候应该储存为UTF-8编码！否则会出现乱码，中文字体读不出来等情况
background:url(“xxx.xxx”) no-repeat;
background-position:5px 10px;第一个值为左右 第二个值为上下
插入图片有三种方式：①img标签src属性②设置background
background更快，因为backgrond会把图片存入缓存中，故除非该图片会变化，则一律用background插入图片(可设置为一个div的样式）
max-width:100%; 宽度自适应屏幕，高度同理,max-height:;
二、选择器
p{} 标签选择器
#xx{} id选择器 id=”xx”
x.xx{} 类（class）选择器 class=”xx” 可以选择【一组】标签 p.xx{} 标签为p中的class为xx的标签，表示p标签的所有xx类，类不可单独拿出来选择 必须要【标签.类名】 格式
（W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class）
p.#xx{} 标签为p中id为xx的
* {} *表示所有的标签
div span{} 包含选择符 指p标签中的所有span标签都来设置这个信息(eg:<div>..<span></span>..</div>
div >h2{} 子对象选择符 (eg:<div>…….<h2>….</h2>….<h2>…..</h2>…<p>..</p>..<div>
注意区别：子对象选择符(>)仅仅只针对第一级子对象，而包含选择符(空格)则针对一切子对象
xx,xx,#xx,#xx{} 分组选择符，用逗号同时设定多个标签，使他们都遵循下面样式
三、盒子模型（代替HTML中的表格布局 但不能完全替代框架）
对于每一层盒其margin和padding属性
margin:对外（上一级）
padding:对内（下一级）
不加left right top button则是四个方向统一设置(若加则单独设置margin-left,padding-right,etc）
也可以 margin:12px,10px,20px,20px 表示从top开始顺时针转的各方向
千万不要使用padding来进行对齐操作。对于IE padding的值会算在width中，而对于其他浏览器，padding的值不算入width中！ 不兼容问题 但若没有设置width则可以，但最建议还是用position方式
(如主菜单 每一个都是一个span 共存一个div中；或者文章列表，每一个标题都是一个span 存于一块div中)
但主菜单，文章列表等等 一般用表格 ul dl等
那么如何方便居中呢 也一般使用表格ul dl
（补充：去掉ul的点 list-style-type:none;）
有些标签比如h3 body标签自身margin和padding属性不为0，若需要要自己改，可以直接*{margin:0; padding:0;} css文件第一句话要写这个！一般都不用自身的margin和padding
在html，有一些标签仅仅是用来设置文本，诸如a和span，对于这两个标签而言，在W3C标准中默认是不能进行width等样式进行修饰的，所以为这些标签设置width是没有作用的，需要display:block;（写入样式表）之后才有作用。但对于IE是有作用的（IE的标准与W3C不一样 微软强无敌= =）在开发中，一般对span加width是没有意义的，（一般不用为span加width），若果需要可能是设计有问题..
四、定位
position样式 然后就可以设置top/bottom/right/left的值(eg : left:40px)
1、position:absolute; 绝对定位 针对浏览器而言的（此话是有误的，但很多时候是这样，见下一段）。当设置之后，该容器就不会再占用相应的空间，原有的空间会被其它元素占用
（实际上，绝对定位会针对父级标签中进行了absolute定位的标签来进行left/right等设置，如果父级标签都没有这样的定位方式，则根据body来定位）
2、position:relative;相对定位 针对父级元素进行定位，而且空间会一直占用，哪怕这个元素已经移动到其它位置
默认的定位方式为static，这种定位不能设置top/bottom/right/left
使用经验：经常会使用relative来实现文本位置的移动。所以如果要为某个容器设置里面的文本位置，可以按照如下方式来处理
所以做居中对齐的时候，把内容放在span里，加position:relative;然后设置top/bottom/right/left
这是对齐的唯一方式！不能用padding,width！
居中一个div的方法（重要！），text-align:center;只有IE可以居中，margin:auto;只有IE之外的浏览器可以居中，所以推荐的居中方式就是position定位的方法！见下：eg
#container{
width:1100px; <!–宽度设为1100px–>
border:1px solid #229; <!–别给contain div（整块的主div设高度），不设高度就让元素把它撑下来 有多少高多少–>
position:absolute; <!—->
left:50%; <!–左边框对齐页面中央–>
margin-left:-550px; <!–向左回一半–>
}
当然也可两个居中方式都写..（orz这样IE和非IE都管用了，简单粗暴..）但推荐还是用以上的方式（因为如果设了margin：auto后其子类全部都继承这个属性）
3、position:fixed;
固定在页面上，不随滚动条滚动而改变位置
五、float
float:left;左飘，第一个放最左边
float:right;右飘，第一个放最右边
float可使得表格等横向浮动 （表格中在
兼容性：对于IE，设置float后该标签依然占用空间，而其他浏览器不占用，故必须要再添加一个属性 clear:both; 将两段的float清除！否则对于IE外的浏览器设置了float的元素不再占用空间，下面的元素会飘上来！
border-bottom:1px solid red; 只设置底部边框那条 ，etc 加线
