CSS 精华一页纸

2017-04-11 本文已影响23人轩居晨风

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;则不需要逗号分隔