CSS知识

1】浏览器组成部分：
1、shell：用户在浏览器上所能看到的外观
2、内核：浏览器能运行起来的技术：
渲染引擎rendering：网页语法解析和渲染打印
JS引擎：
3、主流浏览器及内核：
Google Chrome——webkit / blink
firefox——gecko
IE——trident
opera——presto，现属于360和昆仑万维
safari——webkit

2】CSS：cascading style sheet层叠样式表
选择器 {
属性名：属性值;
}

3】内联样式》内部样式表》外联样式表
优先级 = 权重(256进制)：
!important = 正无穷 >
内联样式 = 1000 >
id = 100 >
class | 属性 | 伪类 = 10 >
标签 | 伪元素 = 1 >
通配符 * = 0

派生选择器=父子选择器 ：标签与标签 、标签与class、class与标签、class与class、标签与id(意义不大)、id与标签、id与class、class与id(意义不大)、id与id(错误)；
浏览器对父子选择器的匹配规则：从下到上、从右到左 （越级）性能好

并列选择器：xx.xx 点

分组选择器：, 逗号

4】outline属性：轮廓

5】复合类名和复合id名：
复合类名用短线：.btn-success
复合id名用下划线：#btn_success

6】加载渲染资源

7】CSS参考手册

8】宽高属性：
width
height
min-width
min-height
max-width
max-height

浏览器字体高度只设置高度，宽度自动缩放

9】font-family属性
有空格和有中文的字体标识需要用双引号引起来

“Hiragino Sans GB”,“Microsoft Yahei”,arial,\5b8b\4f53,“Helvetica Neue”,Helvetica,STHeiTi,sans-serif;

10】容器内的多行文本居中的方法：
1、将容器的display设置成table
2、将容器内的文本的display设置成table-cell(表格单元格属性)
3、将容器内的文本的vertical-align设置成middle

11】浏览器默认margin是body的：大多是8px
ie 8 -> 上下16px、左右8px；ie 7 -> 上下16px、左右11px

12】绝对定位中的两栏设计

13】float：浮动流：块级元素无法识别浮动流元素的位置；内联、内联块、浮动、溢出隐藏、纯文本都可以识别浮动元素的位置，除了块级元素

14】box-shadow:水平位置(必写) 垂直位置(必写) 模糊距离 阴影颜色 阴影的种类(内/外阴影)

15】background-attachment: scroll | fixed; //背景图片滚动或不滚动

16】table标签
caption-side：top | bottom; //表格标题的位置
border-collapse：separation | collapse; //单元格边框是否合并
table-layout：fixed | autommatic; //单元格的宽度是否设置一致

17】CSS书写顺序
显示属性：display、position、float、clear
自身属性：width、height、margin、padding、border、background
文本属性：color、font、text-align、vertical-align、whitespace
其他

18】font属性
font-style、font-weight、font-size、line-height、font-family
font: italic bold 12px/20px "微软雅黑"

19】图标缩放一倍
1、取图标宽高与原宽高的百分比
2、背景图片按照百分比缩放宽度
3、所有定位值按照百分比更改