一、CSS进阶
1. CSS单位
（1）绝对单位
在CSS中，绝对单位定义的大小是固定的，使用的是物理度量单位，显示效果不会受到外界因素影响。绝对单位一般多用于传统平面印刷，而极少用于前端开发。在前端开发中，我们都不会用到绝对单位。
（2）相对单位
在CSS中，相对单位定义的大小是不固定的，一般是相对其他长度而言。
①px。全称pixel，指的是一张图片中最小的点，或者是计算机屏幕中最小的点。
②%
1.width、height、font-size的百分比是相当于父元素“相同属性”的值来计算的。
2.line-height的百分比是相对于父元素的font-size值来计算的。
3.vertical-align的百分比是相对于当前元素的line-height值来计算的。
③em。在CSS中，em是相当于“当前元素”的字体大小而言的。其中，1em等于“当前元素”字体大小。这里的字体大小指的是以px为单位的font-size值。
1.首行缩进使用text-indent:2em实现
2.使用em作为统一单位（略）
3.使用em作为字体大小单位。使用em作为单位，当需要改变页面整体的文字大小时，我们只需要改变根元素字体大小即可，工作量变得非常少。em这个特点在跨平台网站开发中有着明显的优势。
④rem。指的是相当于根元素（即HTML元素）的字体大小。是CSS3新引入的单位。
注：在国外大部分主流网站都是用em作为单位，而且W3C也建议我们使用em作为单位。但是我们发现国内大多数网站，包括三大门户“新浪、搜狐、网易”等，都是采用px作为单位。这是为什么呢？原来在国外，特别是美国，有一些法律规定网站要具有是适应性。对于IE以前的版本无法调整那些使用px作为单位的字体大小，但现在的IE版本几乎都支持。我们有推荐读者使用px作为单位，因为用px作为单位非常方便计算长度。
2. CSS特性
（1）继承性
CSS的继承性，指的是子元素继承了父元素的某些样式属性。但并不是所有的属性都具有继承性。具有继承性的属性有三大类。
①文本相关属性：font-family、font-size、font-style、font-weight、font、line-height、text-align、text-indent、word-spacing。
②列表相关属性：list-style-image、list-style-position、list-style-type、list-style。
③颜色相关属性：color。
（2）层叠性
CSS的层叠性，指的就是样式的覆盖。对于同一个元素来说，如果我们重复定义多个相同的属性，并且这些样式具有相同的权重，CSS会以最后定义的值为准；也就是“后来居上”原则。
3. CSS优先级
CSS（层叠样式表），层叠，其实指的是样式的覆盖。当样式的覆盖发生冲突时，以优先级高的为准。当“同一个元素”的“同一个样式属性”被运用上多个属性值时，我们就需要遵循一定的优先级规则来选择属性值了。
（1）引用方式冲突。行内样式>（内部样式=外部样式）
（2）继承方式冲突。最近的祖先元素优先
（3）指定样式冲突。所谓的指定样式，指的是“当前元素”的样式。当直接指定的样式发生冲突时，样式权值高者优先。
|
选择器
|
权值
|
|
通配符
|
0
|
|
伪元素
|
1
|
|
元素选择器
|
1
|
|
class选择器
|
10
|
|
伪类
|
10
|
|
属性选择器
|
10
|
|
id选择器
|
100
|
|
行内样式
|
1000
|
（4）继承样式和指定样式冲突。指定样式优先。
（5）！important。这个样式会覆盖CSS中任何的其他样式声明。
4. CSS引入方式
在实际开发中，我们应该灵活地配合使用外部样式表、内部样式表以及行内样式表，并不是一味地只用外部样式表。事实上，外部样式表多用于共有样式，内部样式表多用于私有样式，而行内样式更多用于小修改或者优先级方面。
5. CSS层次选择器
|
选择器
|
说明
|
|
M N
|
后代选择器，选择M元素内部后代N元素（所有N元素）
|
|
M>N
|
子代选择器，选择M元素内部子代N元素（所有第一级N元素）
|
|
M~N
|
兄弟选择器，选择M元素后所有的同级N元素
|
|
M+N
|
相邻选择器，选择M元素相邻的下一个元素（M、N是同级元素）
|
二、CSS规范
1. 命名规范
一个良好的命名规范，不仅可以提高代码的阅读体验，而且这对搜索引擎优化也是非常重要的。
（1）CSS文件命名
（2）id和class命名
比较常见的三种方法
①骆驼峰命名法，例如topMain。
②中划线命名法，例如top-main。
③下划线命名法，例如top_main。
命名的建议
①使用英文命名而非中文命名（包括拼音）。
②尽量不缩写，除非是一看就明白的单词，例如nav。
③命名统一规范，尽量不要出现一个用中划线命名，而另一个用下划线命名的情况。
④为了避免class命名的重复，命名时一般取父元素的class名作为前缀。
2. 书写规范
在CSS中，属性的书写顺序也是很有讲究的。良好的书写顺序习惯，既方便阅读，同时也方便后期维护。
CSS属性书写顺序如下：
|
属性类别
| 举例 |
|
影响文档流属性（布局属性）
|
display、position、float、clear等
|
|
自身盒模型属性
|
width、height、padding、margin、border、overflow等
|
|
文本性属性
|
font、line-height、text-align、text-indent、vertical-align等
|
|
装饰性属性
|
color、background-color、cursor等
|
|
其他属性
|
content、list-style、quotes等
|
3. 注释规范
（1）顶部注释
顶部注释是文件的基本信息，一般包括文件说明、文件版本（更新）、作者以及版权声明等。
举例：
/*
*@description:说明
*@author:作者
*@update:更新时间，如2016-4-19 18:30
*/
（2）模块注释
模块注释是各个模块（如导航、底部信息栏等）的注释说明，模块注释建议要说明“开始”和“结束”，以便一目了然。
举例：
/*导航部分，开始*/
......
/*导航部分，结束*/
（3）简单注释
简单注释一般用于注释某些关键代码，如功能代码。可分为当行注释和多行注释两种。
当行注释如下：
/*当行注释内容*/
多行注释如下：
/*
*多行注释内容
*多行注释内容
*/
（4）因为发布的时候，压缩工具会删除所有的注释，有些时候为了保留一些版权声明的注释说明，可以采用如下方式：
/*! 注释内容 */
4. CSS reset
reset就是“重置”的意思，CSS reset指的就是重置样式。所谓的重置样式，最简单的说法就是：去除元素在浏览器的默认样式。如果在实际开发过程中，推荐CSS专家Eric Meyer的重置样式表，这是国内外流行的重置样式表。
浏览器之所以要存在默认样式，目的在于保证没有样式表的页面也能够正常显示。此外HTML元素的默认样式往往跟它的语义挂钩。
三、盒子模型
1. 深入border
对于border属性，只有一个方面值得介绍，那就是“border：0”和“border：none”的区别，主要体现在两点上：性能差异和兼容差异
（1）性能差异
“border：0”表示把border定义为0px。虽然0px在页面上看不见，但是浏览器依然会对border进行渲染，渲染之后，实际上是一个像素为“0”的border。也就是说，
“border：0”需要占用内存。
“border：none”表示把border定义为“none（无）”，浏览器解析“border：none”时并不会作出渲染。也就是说，
“border：none”不需要占用内存。
（2）兼容差异
兼容性差异只存在与IE6和IE7的<input type="button"/>标签以及<button>标签中，其他浏览器不存在兼容问题
“border：0”在所有浏览器中的效果都一样，都是把边框隐藏（不是去掉）。
“border：none”对IE6和IE7按钮的边框无效，在其他浏览器则会去掉按钮的边框。
由于IE6和IE7已经逐渐被抛弃了，因此我们不需要纠结“border：0”与“border：none”的兼容问题。
（3）在实际开发中，对于“border：0”与“border：none”我们不需要纠结那么多，用哪个都差不多。兼容方面就不说了，经过测试，两者在性能方面对页面渲染速度的差别并不大。
2. 深入padding（没什么可以探讨）
3.外边距叠加
外边距叠加，又称“margin叠加”，指的是当两个垂直外边距相遇时，这两个外边距将会合并为一个外边距，即“二变一”。其中，叠加之后的外边距高度等于叠加之前的两个外边距中的最大值。水平外边距永远不会有叠加。而且外边距叠加针对的是block以及inline-块元素，不包括inline元素。因为inline元素的margin-top和margin-bottom设置无效。
对于外边距叠加，只分为三种情况：同级元素、父子元素和空元素（空元素注意一下）。
4. 负margin技术
（1）负margin对普通文档流元素的影响，分为两种情况
①当元素的margin-top或者margin-left为负数时，“当前元素”会被拉向指定方向。
②当元素的margin-bottom或者margin-right为负数时，“后续元素”会被拉向指定方向。
margin-left和margin-left将“当前元素”拉出，然后覆盖“其他元素”。margin-bottom和margin-right是将“后续元素”拉进，然后覆盖“当前元素”。
（2）负margin技巧
①图片与文字对齐
②自适应两列布局
③元素垂直居中
④tab选项卡
5. overflow
|
属性值
|
说明
|
|
visible
|
默认值，若内容溢出，则溢出内容可见
|
|
hidden
|
若内容溢出，则溢出内容隐藏
|
|
scroll
|
若内容溢出，则显示滚动条
|
|
auto
|
在盒子需要的时候给它一个滚动条
|
对于overflow属性，最常见的三个用途如下：
（1）使用“overflow：scroll”显示滚动条；
（2）使用“overflow：hidden”来隐藏内容，以免影响布局。
（3）使用“overflow：hidden”来清除浮动。
四、display属性
1. display简介
语法：display：属性值；
|
属性值
| 说明 |
|
inline
|
行内元素
|
|
block
|
块元素
|
|
inline-block
|
行内块元素
|
|
table
|
以表格形式显示，类似于table元素
|
| table-row |
以表格行形式显示，类似于tr元素
|
| table-cell |
以表格单元格形式显示，类似于td元素
|
|
none
|
隐藏元素
|
（1）块元素。特点如下：
①独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素。
②块元素内部可以容纳其他块元素或行元素。
③可以定义宽度（width），也可以定义高度（height）。
④可以定义四个方向的margin。
（2）inline元素，即行内元素。特点如下：
①可以与其他行内元素位于同一行。
②行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果。
③无法定义高度（height），也无法定义宽度（width）。
④可以定义margin-left和margin-right，无法定义margin-top和margin-bottom。
（3）inline-block元素，即行内块元素。特点如下：
①可以定义width和height。
②可以与其他行内元素位于同一行。
也就是说inline-block元素既具备块元素的特点，也具备行内元素的特点。在HTML中，常见的inline-block元素有两个：img元素和input元素。
2. display：none
（1）在CSS中，我们可以使用“display：none”来隐藏元素。一般情况下都是配合JavaScript来动态隐藏元素的。
对于“display：none”，需要注意两点：
①“display：none”一般用于JavaScript动态隐藏元素，被隐藏的元素不占据原来的位置空间。
②“display：none”不推荐用来隐藏一些对SEO关键的部分。因为对于搜索引擎来说，它会直接忽略“display：none”隐藏的内容，不把“display：none”隐藏的内容加入权重考虑。
（2）“display：none”和“visibility：hidden”的区别
①“display：none”的元素被隐藏之后，不占据原来的位置。也就是说彻底地消失了，看不见也摸不着。
②“visibility：hidden”的元素被隐藏之后，依然占据原来的位置。也就是说并没有彻底消失，看不见但摸得着。
3. display：table-cell
在CSS中，“display：table-cell”可以让元素以表格单元格的形式呈现。也就是说，table-cell类型的元素具备td元素的特点。
目前IE8+以及其他现代浏览器都支持此属性，不过在IE6/IE7中并不支持。考虑到IE6/IE7使用率越来越低得情况，我们还是果断使用“display：table-cell”这一布局神器。
“display：table-cell”非常强大，可以实现以下三种功能。
①图片垂直居中于元素。
②等高布局。
③自动平均划分元素，并且在一行显示。
4. 去除inline-block元素间距
inline-block元素之间是有间距的。在实际开发中，为了不影响布局，我们需要去除inline-block元素的间距。
在CSS中，我们可以使用“font-size”来去除inline-block元素的间距。
在CSS中，我们可以使用“font-size”来去除inline-block元素的间距。
语法：父元素{font-size：0；}
说明：“font-size：0”是在inline-block元素的父元素添加的。
五、文本效果
1. 深入text-indent
（1）在CSS中使用text-indent属性来定义段落的首行缩进。使用“text-indent：2em；”来实现。
（2）text-indent的另一个技巧。“text-indent：-9999px；”，这种方式一般用于LOGO部分。在搜索引擎优化中，h1是非常重要的标签。一般情况下，我们都是把网站的LOGO图片放到h1标签中。不过我们都知道，
搜索引擎无法识别图片，只能识别文字。为了更好地优化SEO，我们指定h1元素的长宽与LOGO图片的长宽一样，然后定义h1的背景图片（background-image）为LOGO图片。也就是说，我们使用LOGO图片作为h1标签的背景图片，然后用“text-indent：-9999px；”来隐藏h1的文字内容。
2. 深入text-align
（1）text-align起作用的元素
text-align对文字、inline元素（行内元素）以及inline-block元素（行内块元素）起作用，但对块元素不起作用。其中，img元素属于inline-block元素。
（2）“text-align：center；”与“margin：0 auto；”的区别
在页面水平居中实现中，这两种是最常见的方式。不过这两者也有着本质的区别。
①“text-align：center；”实现的是文字、inline元素以及inline-block元素的水平居中。
②“margin：0 auto；”实现的是块元素的水平居中。
③“text-align：center；”在父元素中定义，“margin：0 auto；”在当前元素中定义。
3. 深入line-height
（1）line-height的定义
line-height更加明确的定义：两行文字基线之间的距离。
①顶线、中线、基线、底线
②行高（即line-height）：两行基线之间的垂直距离
行距：指的是上一行的底线到下一行的顶线的垂直距离。也就是两行文字之间的空隙。
半行距：指的是行距的一半
③内容区：指的是行盒子顶线到底线之间的垂直距离。
行框：指的是两行文字“半行距分割线”之间的垂直距离。
（2）line-height取值
①height与line-height
一行文字的高度是由line-height决定，而不是由height决定的。height定义的是这个标签的高度。
可以定义height和line-height这两个属性值相等，从而实现单行文字的垂直居中。
②line-height取值为百分比值、em值
line-height=（父元素font-size）x（白分比）
line-height=（父元素font-size）x（em值）
③line-height取值为无单位数字
line-height=（当前元素font-size）x（无单位数字）
4. 深入vertical-align
vertical-align属性用于定义周围文字、inline元素以及inline-block元素的基线相对于该元素基线的垂直对齐方式。这里的“该元素”指的是被定义了vertical-align属性的元素。
（1）vertical-align属性取值
①负值：表示元素相对于基线向下偏移
②百分比：举例：vertical-align：50%，而当前元素所继承的line-height为20px，则等价于vertical-align：10px；表示元素相对于基线向上偏移10px。
③关键字：top（顶部对齐）、middle（中部对齐）、baseline（基线对齐）、bottom（底部对齐）
（2）vertical-align属性应用
①vertical-align属性对inline元素、inline-block元素和table-cell元素有效、对块元素无效。
②table-cell元素跟inline、inline-block元素使用vertical-align的区别
1.inline、inline-block元素的vertical-align是针对周围元素来说的，vertical-align定义的是周围元素相当于当前元素的对齐方式。
2.table-cell元素vertical-align属性时针对自身而言的。vertical-align定义的是内部子元素相对于自身的对齐方式
六、表单效果
1. 深入radio和checkbox
单选框和复选框与文字垂直居中对齐：
语法：vertical-align：像素值；
说明：①当文字大小为12px时，给单选框或复选框定义“vertical-align：-3px”即可解决对齐问题。
②当文字大小为14px时，给单选框或复选框定义“vertical-align：-2px”即可解决对齐问题。
③如果页面文字大小为15px、16px等，办法也是一样的。只需要微调下vertical-align的数值即可。
2. 深入textare
（1）固定大小，禁止拖动
①固定大小：可以使用min-width和min-height定义textarea的最小宽度和最小高度，也可以使用max-width和max-height来定义textarea的最大宽度和最大高度。
②禁止拖动：可以通过“resize:none;”来禁用textarea元素的拖动功能。也可以将max-width与width定义相同的值，并且将max-height与height定义相同的值。不过这种方式不推荐。
（2）在Chrome、Firefox和IE实现相同的外观
①使用CSS的width和height来定义textarea的大小。
②使用“overflow：auto”来定义滚动条自适应。
③使用“resize：none；”禁止拖动。
3. 表单对齐
（1） 每一行表单分为左栏加若干右栏。所有行的左栏长度相等，所有行的右栏所有盒子长度之和相等。左栏一般是一个label，右栏是若干个文本框。
（2）所有左栏盒子和右栏盒子都设置为左浮动。
（3）左栏text-align属性定义为right，使得文字右对齐。
（4）最重要一点，每一行中左栏长度和右栏所有盒子的总长度之和等于行宽。这里的盒子是包括width、padding、border和margin的。
七、浮动布局
1. 深入浮动
（1）对于浮动，具有以下两个最重要的特点。
①当一个元素定义了“float：left”或“float：right”时，不管这个元素之前是inline、inline-block或者其他类型，都会变成block类型。也就是说，浮动元素表现为块元素效果，可以定义width、height、padding和margin。这里特别要注意一下，我们可以使用margin-left或margin-right来定义浮动元素与其他元素之间的间距。
②当一个元素定义了“float：left”或“float：right”时，这个元素会脱离文档流，后面的元素会紧跟着填上空缺的位置。
2. 浮动的影响
（1）对自身的影响
如果一个元素设置了浮动，则不管这个元素是什么类型，都会转化为块元素，也就是display属性值为block。
（2）对父元素的影响
如果一个元素设置了浮动，它会脱离正常文档流。如果浮动元素的高度height大于父元素的高度height，或者父元素没有定义高度height，此时浮动元素会脱离父元素。这就是我们常见的“父元素高度塌陷”。
（3）对兄弟元素的影响
①兄弟元素是浮动元素
1.同一方向的兄弟元素：这些元素会从左到右、从上到下，一个接着一个紧挨着排列。
2.相反方向的兄弟元素：这两个元素会移向两边（如果父元素宽度足够的话）。
②兄弟元素不是浮动元素
影响很奇葩，对布局影响很大。
（4）对子元素的影响
如果一个元素是浮动元素（没有定义height），并且它的子元素也是浮动元素，则这个浮动元素会自适应地包含该子元素。
3. 浮动的负作用
（1）父元素高度塌陷，从而导致边框不能撑开，背景色无法显示。
（2）页面布局错乱。
4. 清除浮动
所谓的清除浮动，就是强制去除元素浮动之后带来的影响（这些影响在前面有过详细的介绍），然后使得其他元素都回归到正常文档流。
（1）clear：both
在CSS中，我们可以使用clear属性来清除浮动。注意一点，clear属性不是应用于浮动元素本身，而是应用于浮动元素后面的元素。所有为了清除元素的浮动，往往会添加一个div标签。很多时候这个div标签仅仅是为了清除浮动而添加的，没有任何其他意义。
（2）overflow：hidden
在CSS中，我们可以使用“overflow：hidden”来清除浮动。注意一点，“overflow：hidden”应用于浮动元素的父元素，而不是当前的浮动元素。“overflow：hidden”是个小炸弹，它会隐藏超出父元素的内容部分，有时候这并不是我们预期的效果。
（3）::after伪元素
在实际开发中，比较好的解决方案是使用“::after伪元素”结合“clear:both”来实现。
语法：
.clearfix{*zoom:1;}
.clearfix::after
{
clear:both;
content:"";
display:block;
height:0;
visibility:hidden;
}
说明：“::after伪元素”结合“clear:both”来清除浮动的方式，我们推荐用来定义成公共类（如类名为clearfix），然后进行全局引用，以便减少CSS代码。
八、定位布局
1.深入定位
“position：absolute”会将元素转换为块元素。
（1）子元素相对于父（祖先）元素定位
语法：
父（祖先）元素{position：relative；}
子元素
{
position：absolute；
/*定义top、bottom、left和right*/
}
（2）绝对定位元素是相对于外层第一个设置了“position：relative；”，“position：absolute；”，“position：fixed；”的祖先元素来进行定位的。
2. z-index属性
默认情况下，元素的z-index属性处于不激活状态。也就是说默认情况下，设置元素的z-index属性无效。z-index属性只有在元素定义“position：relative”“position：absolute”或“position：fixed”时才会被激活。当然，对于“position：fixed”的z-index也没什么值得去管，直接忽略即可。
语法：z-index：取值；
|
属性值
|
说明
|
|
auto
|
默认值，堆叠顺序与父元素相等
|
|
number
|
可以为负整数、0以及正整数
|
|
inherit
|
规定应该从父元素继承z-index属性的值
|
W3C标准中对CSS的z-index属性是这样定义的：“z-index属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数，则表示离用户更远。”
默认情况下，元素z-index属性值为auto。z-index值为正数的元素在z-index值为0的上面，z-index值为负数的元素在z-index值为0的下面。无论是正数还是负数，z-index值较大的元素会叠加在z-index值较小的元素之上。如果z-index值相同，则遵循“后来居上”规则来叠加。
九、CSS图形
1. CSS图形简介
在前端开发中，为了网站的性能速度，我们都是秉承着“少用图片”的原则。因为图片实现有两个很明显的缺点：一是图片大小比较大，数据传输量大；二是一张图片会引发一次HTTP请求。这两个方面都会影响页面加载速度，并且增加服务器负担。所以，对于一些图形效果，我们更倾向于使用CSS而非图片来实现。
2. 三角形
（1）原理：将一个元素的width和height定义为0，然后为它设置较粗的边框，并且将其中任意三条边框或者两条边的颜色定义为transparent。
（2）带边框的三角形
对于带边框的三角形，一般使用两个三角形来实现。一个作为背景色（内层三角形），一个作为边框色（外层三角形），然后通过定位布局重叠在一起。注意，两个三角形定位要相差1像素。一般情况下，都是将内层三角形相对于外层三角形进行定位，偏移1像素。
注：在CSS中，子元素的绝对定位是根据父元素的“内容边界（content）”进行定位的。
3. 圆
（1）CSS实现圆角，使用border-radius属性来实现
语法：border-radius：长度值； 长度值可以为px、百分比、em等。
border-radius：10px 20px 30px 40px；分别表示“左上角、右上角、右下角、左下角”
（2）CSS实现半圆和圆
上半圆原理：把高度height设为宽度width的一半，并且左上角和右上角的圆角半径定义与元素的高度一致，而右下角和左下角的圆角定义为0。其他半圆类似
圆原理：元素的宽度和高度定义为相同值，然后四个角的圆角半径定义为宽度（或高度）的一半。
（3）border-radius派生子属性
①border-top-right-radius：右上角。
②border-bottom-right-radius：右下角。
③border-bottom-left-radius：左下角。
④border-top-left-radius：左上角。
4. 椭圆
语法：border-radius：x/y;
说明：x表示圆角的水平半径，y表示圆角的垂直半径。
原理：元素的宽度和高度不相等，其中四个角的圆角水平半径定义为宽度的一半，垂直半径定义为高度的一半。
十、性能优化
1. CSS优化简介
一般情况下，我们都是在确保CSS可读性和可维护性的前提下，再去考虑它的性能速度。但是对于大型网站，如淘宝，改善性能是非常具有实际意义的。
2. 属性缩写
（1）盒模型缩写：border、margin和padding的缩写
（2）背景缩写
完整形式：
background-image:url("images/flower.jpg");
background-repeat:no-repeat;
background-position:80px 40px;
简写形式：
background:url("images/flower.jpg") no-repeat 80px 40px;
在实际开发中，我们推荐使用简写形式。
（3）字体缩写
完整形式：
font-family: "微软雅黑"；
font-size: 12px;
font-weight: bold;
font-height: 1.5em;
简写形式：
font: "微软雅黑" 12px/1.5em bold;
注意：
①如果使用字体简写形式，我们至少要指定font-family和font-size属性，其他属性如果没有指定则将自动使用默认值。
②在简写形式中，font-size值和font-height值之间是需要加入斜杠“/”的。初学者要特别注意一下这种写法，在实际开发中会经常见到。
（4）颜色值缩写
如果颜色每两位的值相同，可以缩写一般。例如“color：#336699”可以缩写为“color：#369”。
3. 语法缩写
（1）空白符：多个属性值之间的空格和换行是可以省略的（横向书写），但推荐使用纵向书写。
（2）结尾分号：最后一个属性之后的结尾分号是不必要的。省略之后，对代码没有任何影响。
（3）url的引号：像background-image、cursor等属性url()中的路径不需要添加引号。
（4）属性值为0：如果某一个属性取值为0，则这个属性值也不需要添加单位。
（5）属性值为以0开头的小数：当一个属性的属性值是以0开头的小数时，我们可以把开头的0去掉。
（6）合并相同的定义：在CSS中，很多时候定义的规则会有相同的部分，我们可以使用群组选择器来合并这些相同的样式，从而达到代码重用和精简代码的目的。
（7）利用继承进行合并：如果父元素的多个子元素都定义了相同的可继承属性，我们可以把这些相同的属性定义在父元素上，从而精简代码。
4. 压缩工具
我们都知道CSS文件分为“开发版”和“发布版”。发布版是将开发版进行合并和压缩之后，在网站运行时使用的。
我们可以使用CSS压缩工具来进行压缩，一般压缩工具会对CSS文件执行如下操作：
（1）删除所有注释。
（2）删除无用的空白符。
（3）删除结尾分号。
（4）删除属性值为0的单位。
（5）删除属性值以0开头的小数前的0.
（6）将相似属性合并，例如margin、padding、background等。
（7）将RGB颜色转换为十六进制颜色。
5. 图片压缩（使用图片压缩工具）
6. 高性能的选择器
（1）选择器在浏览器的解析原理
#column .content div{color：red；}
一般情况下，我们都是从左到右来阅读代码的，因此对于上面这行代码，我们也会习惯性地以为浏览器是从左到右进行解析的：首先找到id为column的元素，然后再查找该元素下面class为content的元素，最后在已经匹配的元素下查找所有的div元素。
但是事实上却恰恰相反，浏览器在对选择器规则是从右到左进行解析的：首先查找所有的div元素，然后再查找该div元素是否存在具有content类的父元素，最后在已经匹配的父元素中继续向上查找祖先元素是否含有id为column的元素。
（2）不同浏览器的解析速度
对CSS选择器的匹配效率从高到底做了一个排序：
①id选择器
②class选择器 ·
③元素选择器
④相邻选择器
⑤子选择器
⑥后代选择器
⑦通配符选择器
⑧属性选择器
⑨伪类选择器
为了更好地使用高性能的选择器，需要注意四个技巧：
①不要使用通配符
②不要在id选择器以及class选择器前添加元素名
③选择器最好不要超过三层，位置靠右的选择条件尽可能精确。
④避免使用后代选择器，尽量少使用子选择器
十一、CSS技巧
1. 水平居中
（1）文字的水平居中：text-align：center；
（2）元素的水平居中
①块元素（
块元素默认会占满允许的最大宽度）
对于块元素，如果给定了宽度，直接定义margin-left和margin-right都为auto就能实现水平居中。
②行内元素（inline）以及复合行内元素（inline-*）
可以使用text-align：center来实现水平居中
2. 垂直居中
（1）文字的垂直居中
①单行文字
定义line-height和height这两个属性的值相等就可以实现垂直居中。
②多行文字
语法：
父元素
{
displayp:table-cell;
vertical-align:middle;
}
span{display:inline-block;}
说明：用一个span标签把所有的文字包含起来，然后定义span为inline-block元素，之后使用inline-块元素垂直居中的方式来处理即可。
（2）元素的垂直居中
①块元素
使用position方法即可（略）
②行内元素（inline-block）
语法：
父元素
{
displayp:table-cell;
vertical-align:middle;
}
子元素{vertical-align:middle;}
3. CSS Sprite
CSS Sprite，又称为“CSS精灵”或者“CSS雪碧图”。它将零散的小背景图合并成一张大的背景图，然后利用background-position属性进行背景定位从而显示相应的小背景图。其中，合并之后的大背景图，我们又称为“雪碧图”。
CSS Sprite技术最大的优点就是减少HTTP请求数，从而提高页面的加载速度。除了减少HTTP请求数，CSS Sprite还减小了图片整体的大小。不过CSS Sprite也存在很明显的缺点，那就是“开发和维比较困难”。
4. Icon Font图标
（1）对于小图标效果，估计很多人能够想到的是使用CSS Sprite结合背景图片来实现。但是在实际开发中，我们都是秉着“少用图片”的原则。因为图片数据传输量大，并且会引发一次HTTP请求。而且对于这些小图标，也可能会有多个尺寸、多种颜色，如果要使用背景图片来实现非常麻烦。
想要实现小图标效果，比较好的解决方法就是使用icon font图标技术。所谓的“icon font图标技术”，指的就是使用字体文件取代图片文件，来实现小图标效果。
（2）icon font技术（略）
十二、重要概念
1. 包含块
（1）什么是包含块
包含块就是可以决定一个元素大小和定位的元素
包含块也可以理解为一个矩形盒子，这个矩形的作用是为这个矩形内部的后代元素（子元素、孙元素等）提供一个参考。一个元素的大小和定位往往是由该元素所在的包含块决定的。
通常情况下，一个元素的包含块是由离它最近的“块级祖先元素”的“内容边界”决定的。但当元素被设置为绝对定位时，此时该元素的包含块是由离它最近的“position：relative”或“position：absolute”的祖先元素决定。一个元素生成的盒子会扮演该元素的内部元素包含块的角色。也就是说，一个元素的CSS盒子为它的内部元素建造了包含块。
（2）包含块的判定
①根元素
根元素（HTML元素），是一个页面中最顶端的元素，它没有父元素。根元素存在的包含块，被称为“初始包含块（initial containing block）”。
②固定定位元素
如果元素的position书写为fixed，那么它的包含块是当前可视窗口，也就是当前浏览器窗口。
③静态定位元素和相对定位元素
如果元素的position属性为static或relative，那么它的包含块是它最近的块级祖先元素创建的。祖先元素必须是block、inline-block或者table-cell类型。
④绝对定位元素
如果元素的position属性为absolute，那么它的包含块是由最近的position属性不为static的祖先元素。这里的祖先元素可以是块元素，也可以是行内元素。
（3）包含块的范围
①如果祖先元素是块元素，则包含块的范围为祖先元素的padding edge形成。
②如果祖先是行内元素，则包含块取决于祖先元素的direction属性。
2. 层叠上下文（略）
3. BFC和IFC
（1）BFC即块级格式上下文（略）
（2）IFC即行级格式上下文（略）
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
