CSS 精华一页纸

CSS核心语法 ：选择器{属性:值;...}

---

选择器
I、元素选择 | ID 选择器| Class选择器
II、伪类选择器 （除连接和表单外）| 属性选择器

选择器可以组合（多个选择器共同指定一类属性），可以有 子孙选择器， 可以有父子选择器
div p
div>p
div+p
div~p
结合了伪类，还可以指定某些状态/选择特定子孙/ 选择特定属性

属性和样式
所有元素都共有的属性
背景属性（颜色、图片）
文本属性（段落、颜色、对齐、修饰等）
字体属性（字体、样式、大小）
边框/OutLine(样式、宽度、颜色）
尺寸（width、height）
可见性(display 内联、块、none/visibility)

特殊元素的样式
列表（样式、图片）
表格（边框折叠？） - 好像没有特别的样式
链表（点击、悬停等 ？） - 悬停等样式也适合其他元素

盒子模型
margin - border - padding - content - padding - border - margin

定位和布局
定位有四种方式
1、static - 静态定位（默认流式布局）
2、relative - 相对定位
3、absolute - 绝对定位
4、fixed - 固定定位
// 绝对和相对都有一个比较固定的位置，不同的是 固定定位不随浏览器的滚动而滚动

结合定位有几种布局方式
1、普通流式布局（块元素纵向扩展、内联元素横向扩展）依次摆放
2、绝对定位布局 - 适用于 下来菜单等等
3、固定定位布局 - 使用于导航 菜单，表头等等

4、使用 浮动元素布局 + clear 属性，可以把某个 快元素布局在页面的某一个位置。
5、使用 可见性 display的样式，实现 table方式布局
6、使用 盒子模型的 marging/padding 实现凝胶布局

普通流式布局+浮动元素布局（左右分栏，可以使用浮动把整个块放到一边） 是页面整体布局的方式；
结合绝对定位布局+固定定位布局 做一些菜单导航的 细微控制
是布局的主要思路。

PS：样式里面，如果是同一个 属性的 不同值需要逗号分隔；如果是 多个属性合并在一起的比如 margin:10px 15px;则不需要逗号分隔