本文主要讲述页面布局样式方面涉及的知识点，更全面的对CSS相应的技术进行归类、整理、说明，没有特别详细的技术要点说明和案例代码，但对该分类涉猎的技术点进行了罗列，对学习和复习的方向进行引导。

一、CSS3概要

CSS（Cascading Style Sheet）是层叠样式表的意思，CSS3就是在CSS2.1的基础上升级的CSS新版本，属于HTML5的一部分。它可以有效地对页面的布局、字体、颜色、背景、动画和其它效果实现。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。

二、选择器

在使用CSS时我们首先要做的事情是找到元素，在写相应的样式，在CSS2.1中最常使用的是三种选择器：

ID选择器：以#开始，引用时使用id，如id="div1"
类选择器：以.开始，使用class属性引用，可以有多个，如class="cls1 cls2 cls3"
标签选择器：以标签名称开始，如p,span,div,*

在CSS3中新增了很多的选择器，如果大家会jQuery，jQuery中多数选择器在CSS3中都可以直接使用。

组合选择器
层级选择器
属性选择器
伪类
伪元素

三、特殊性（优先级）

!important >内联 > ID选择器 > 类选择器 > 标签选择器。

3.1常用对比

同类型，同级别的样式后者先于前者
ID > 类样式 > 标签 > *
内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)>继承的样式
具体 > 泛化的
近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)
内嵌样式：内嵌在元素中，<span style="color:red">span</span>
内部样式表：在页面中的样式，写在<style></style>中的样式
外联样式表：单独存在一个css文件中，通过link引入或import导入的样式
!important 权重最高，比 inline style 还要高

3.2、计算特殊性值

important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
权重、特殊性计算法：
CSS样式选择器分为4个等级，a、b、c、d

如果样式是行内样式（通过Style=“”定义），那么a=1，1,0,0,0
b为ID选择器的总数 0,1,0,0
c为属性选择器，伪类选择器和class类选择器的数量。0,0,1,0
d为标签、伪元素选择器的数量 0,0,0,1
!important 权重最高，比 inline style 还要高

比如结果为：1093比1100，按位比较，从左到右，只要一位高于则立即胜出，否则继续比较。

四、刻度

4.1、绝对长度单位

动态计算长度值

calc() = calc(四则运算)

用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

4.2、文本相对长度单位

em
相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)

rem
rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数
只相对于根元素的大小
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。（相对是的HTML元素的字体大，默认16px）

4.3、Web App与Rem

为了实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化

五、盒子模型（Box Model）

盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型，加上了doctype声明，让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子。

5.1、宽高

标准 w3c 盒子模型和IE 盒子模型的范围都包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的宽高包含了 border 和 pading。

5.2、溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过 overflow 属性来设置。
overflow的设置项：

visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承 overflow 属性的值。

5.3、box-sizing属性

设置或检索对象的盒模型组成模式
border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。
当box-sizing: border-box时的宽度设置会包含border与padding，但不包含margin，但margin也会占用位置。

5.4、margin-top 塌陷

在两个盒子嵌套时候，内部的盒子设置的 margin-top 会加到外边的盒子上，导致内部的盒子 margin-top 设置失败，解决方法如下：
1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：

.clearfix:before{
    content: '';
    display:table;
}

5.5、利用CSS画图

三角形

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型 - 三角形</title>
        <style type="text/css">
            #box{
                width: 0;
                height: 0;
                border: 100px solid blue;
                border-color: blue transparent transparent transparent;
                /*设置边线的颜色，transparent表示透明的颜色，按上右下左的顺时钟方向*/
            }
        </style>
    </head>
    <body>
        <div id="box">
        </div>
    </body>
</html>

梯形

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒子模型 - 梯形</title>
    <style type="text/css">
        #box {
            width: 100px;
            height: 0;
            border-top: 100px solid red;
            /*设置顶部边框的宽度和颜色*/
            border-right: 37px solid transparent;
            border-left: 37px solid transparent;
            /*设置左右边框线的宽度，并且为透明*/
        }
    </style>
</head>
<body>
    <div id="box">
    </div>
</body>

</html>

心形

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #heart {
            position: relative;
            width: 100px;
            height: 90px;
        }
        #heart:after,
        #heart:before {
            position: absolute;
            content: "";
            left: 50px;
            top: 0;
            width: 50px;
            height: 80px;
            background: red;
            border-radius: 50px 50px 0px 0px;
            transform: rotate(-45deg);
            transform-origin: 0 100%;
        }
        /* 设置after何before元素的一头为圆形，颜色为red，并且旋转 */
        #heart:after {
            left: 0;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
        }
        /* 控制after反向旋转 */
    </style>
</head>
<body>
    <div id="heart">
    </div>
</body>

</html>

六、边距折叠

6.1、概要

外边距折叠：相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin）
相邻：没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系

6.2、垂直方向外边距合并计算

参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。
参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。
参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

七、内联与块级标签

7.1、行内标签与块标签区别

html中的标签默认主要分为两大类型，一类为块级元素，另一类是行内元素，许多人也把行内称为内联，所以叫内联元素，其实就是一个意思。为了很好的布局，必须理解它们间的区别，区别如下：
常用的块级有：div,p,h1~h6,ul,li,dl,dt,dd... 常用的行内有：span,font,b,u,i,strong,em,a,img,input，其中img和input为行内块元素。

使用display设置元素的显示方式

默认值：inline
none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline：指定对象为内联元素。
block：指定对象为块元素。
list-item：指定对象为列表项目。
inline-block：指定对象为内联块元素。（CSS2）
table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row：指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column：指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）
box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

如果display设置为none，float及position属性定义将不生效；
如果position既不是static也不是relative或者float不是none或者元素是根元素，当display:inline-table时，display的计算值为table；当display:inline | inline-block | run-in | table-* 系时，display的计算值为block，其它情况为指定值；
IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在IE6,7下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果；你可以这样：
全兼容的inline-block：

div {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

7.2、隐藏

可以使用3种办法让元素隐藏：

使用CSS的display:none，不会占有原来的位置
使用CSS的visibility:hidden，会占有原来的位置
使用HTML5中的新增属性hidden="hidden"，不会占有原来的位置

7.3、行内块标签

当元素的样式display为inline-block属性时就被设置成了行内块标签，同时拥有行内标签与块标签的特性，不再占整行；可以设置宽度，高度；padding与margin都有效。

八、重置浏览器默认样式

下图是同一段HTML在3个不同内核的浏览器中打开的效果，你发现有不一样吗？很明显有区别，这就是浏览器的默认样式，每一个浏览器会设置user agent stylesheet，比如默认字体大小为16px。浏览器的默认样式会给我们带一定的麻烦，比如在计算元素的大小时默认样式会设置padding与margin值，不同的浏览器可能设置的不一样，就会出现误差，重置浏览器样式就是让您可以在一张白纸上写字。
虽然能全部重置，但由于性能较低，不推荐使用。因为需要遍历整个DOM树，当页面节点较多时，会影响页面的渲染性能。

8.1、CSSReset

每种浏览器都有一套默认的样式表，即user agent stylesheet，网页在没有指定的样式时，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。但这样会有很多兼容问题，CSSReset可以将所有浏览器默认样式设置成一样。

8.2、normalize

也许有些cssreset过于简单粗暴，有点伤及无辜，normalize是另一个选择。bootstrap已经引用该css来重置浏览器默认样式，比普通的cssreset要精细一些，保留浏览器有用的默认样式，支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。

Normalize.css和传统Reset的区别

Normalize.css 保护了有价值的默认值
Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
Normalize.css 修复了浏览器的bug
它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

8.3、base css

如果说css reset是为了重置浏览器的默认样式，则base css是准备一些通用的css提高开发效率，如.fl表示float left，左浮动，也有人移为common.css，也有把该部分内容与cssreset合并的，这样可以减少http请求，

九、BFC与IFC

9.1、BFC与IFC概要

BFC（Block Formatting Context）即“块级格式化上下文”， IFC（Inline Formatting Context）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用。

BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。

在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型可以是 block ，或者是 inline ，但不能同时属于这两者。并且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 Inline Formatting Context(行内格式化上下文) 里格式化。

9.2、如何产生BFC

当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context：
a)、float的值不为none

b)、overflow的值不为visible

c)、display的值为table-cell, table-caption, inline-block中的任何一个

d)、position的值不为relative和static

CSS3触发BFC方式则可以简单描述为：在元素定位非static,relative的情况下触发，float也是一种定位方式。

9.3、BFC的作用与特点

a)、不和浮动元素重叠，清除外部浮动，阻止浮动元素覆盖

如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个重叠的现象。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态，当float不为none时，position为absolute、fixed时元素将脱离标准流。

9.4、IE与Layout

Layout是 IE 浏览器渲染引擎的一个组成部分。在 IE 浏览器中，一个元素要么自己对自身的内容进行组织和计算大小，要么依赖于包含块来计算尺寸和组织内容，hasLayout 与 BFC 有很多相似之处。在IE中，元素使用“布局”概念来控制尺寸和定位，分为拥有布局和没有布局两种情况，拥有布局的元素由它控制本身及其子元素的尺寸和定位，而没有布局的元素则通过父元素（最近的拥有布局的祖先元素）来控制尺寸和定位，而一个元素是否拥有布局则由 hasLayout 属性告知浏览器，它是个布尔型变量，true 代表元素拥有布局，false 代表元素没有布局。简而言之，hasLayout 只是一个 IE 下专有的属性，hasLayout 为 true 的元素浏览器会赋予它一系列的效果。
特别注意的是，hasLayout 在 IE 8 及之后的 IE 版本中已经被抛弃，所以在实际开发中只需针对 IE 8 以下的浏览器为某些元素触发 hasLayout。

出发IE下的haslayout方法

display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)
min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，仅用于块级元素)
overflow-x: (除 visible 外任意值，仅用于块级元素)
overflow-y: (除 visible 外任意值，仅用于块级元素)
position: fixed

除了BFC还有IFC,GFC,FFC,是不同格式化上下文（Formatting Context）的简称，GFC是网格格式化上下文（Grid Formatting Context），FFC是弹性盒格式化上下文（Flex Formatting Context）

构成Block Formatting Context的方法有下面几种

float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。

很明显，float和position不合适我们的需求。那只能从overflow或者display中选取一个。
因为是应用了.clearfix和.menu的菜单极有可能是多级的，所以overflow: hidden或overflow: auto也不满足需求（会把下拉的菜单隐藏掉或者出滚动条），那么只能从display下手。

我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个,但是display: inline-block会产生多余空白，所以也排除掉。剩下的只有table-cell, table-caption，为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context。因为display: table会产生一些匿名盒子，这些匿名盒子的其中一个（display值为table-cell）会形成Block Formatting Context,这样我们新的.clearfix就会闭合内部元素的浮动。

十、定位

使用css布局position非常重要，他的语法如下：

position：static | relative | absolute | fixed | center | page | sticky

默认值：static，center、page、sticky是CSS3中新增加的值。

10.1、static

可以认为静态的，默认元素都是静态的定位，对象遵循常规流。此时4个定位偏移属性不会被应用，也就是使用left，right，bottom，top将不会生效。

10.2、relative

相对定位，对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

10.3、absolute

绝对定位，对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。

元素定位参考的是离自身最近的定位祖先元素，要满足两个条件，第一个是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果没有则选择body为对照对象。第二个条件是要求祖先元素必须定位，通俗说就是position的属性值为非static都行。

10.4、fixed

固定定位，与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
center：
与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）
page：
与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3）
sticky：
对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）

10.5、z-index属性

语法：z-index: auto | <integer>
默认值：auto
适用于：定位元素。即定义了position为非static的元素
取值：
auto：元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。
整数：用整数值来定义堆叠级别。可以为负值。说明：
检索或设置对象的层叠顺序。
z-index用于确定元素在当前层叠上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文。
当多个元素层叠在一起时，数字大者将显示在上面。

10.6、:target伪类

语法：
E:target { css }
说明：
匹配相关URL指向的E元素。
解释：URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。只有支持CSS3的浏览器可用。
通俗说就是url中的#选中的id元素将被css选择。在完成没有js的菜单，选项卡时如果不考虑ie8则可以使用这种新的办法。

10.8、center定位

center：与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）

10.9、page定位

page：与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3）

10.10、sticky定位

sticky：对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）

十一、浮动

浮动在CSS布局中饱受诟病，因为控制起来比较麻烦，但如果掌握了他的特性使用起来还是不难的，在CSS中使用float指定浮动属性值，该属性的值指出了对象是否及如何浮动，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的标准流中，所以文档的标准流中的块框表现得就像浮动框不存在一样。float的基本语法如下：

float：none | left | right

11.1、float取值

none：设置对象不浮动，默认值
left：设置对象浮在左边
right：设置对象浮在右边

11.2、float的特性

浮动元素会从标准流中脱离
浮动元素会触发BFC（块级元素格式化）、不影响外边距折叠
float元素会变成块标签

如果float不是none，当display:inline-table时，display的计算值为table；当display:inline | inline-block | run-in | table-* 系时，display的计算值为block，其它情况为指定值。

float在绝对定位和display为none时不生效
当display为node时元素会隐藏，所以float意义不大；当position为absolute绝对定位时元素也将从标准流中脱离，元素使用偏移量移动，float特性无效。
浮动元素间会堆叠
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，浮动元素间的堆叠示例：
浮动元素不能溢出包含块
浮动元素在包含块内，当包含块的宽度不足以容下浮动的子元素时，将自动折行；垂直方向当包含块认为浮动的子元素没有高度时，子元素会溢出，BFC能解决该问题。水平方向不会溢出，垂直方向有可能会溢出。
相邻的浮动元素，left属性最前面的元素，排在最左边
相邻的浮动元素，right属性最前面的元素，排在最右边
包含块不会计算浮动元素的高宽
浮动元素与非浮动元素会重叠，挤出块中的内容

11.3、清除浮动

该属性的值指出了不允许有浮动对象的边。

clear：none | left | right | both

适用于：块级元素
取值：
none：允许两边都可以有浮动对象
both：不允许有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象

清除外部浮动
需要注意的是clear是用于控制元素本身的，不能影响别的元素，

清除内部浮动
当一个包含块内部有浮动元素时，外部块不会计算浮动块的高度与宽度，为了让内部的浮动元素撑开包含块，需要还原高度，暂且称为清除内部浮动。

方法1：BFC
方法2：增加一个空的div，清除浮动

十二、居中

12.1、块标签自身水平居中

当一个有宽度的块标签设置margin:0 auto时将实现自身的水平居中

12.2、块标签内对齐

text-align：start | end | left | right | center | justify | match-parent | justify-all

默认值：start
适用于：块标签
left：内容左对齐。
center：内容居中对齐。
right：内容右对齐。
justify：内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。（CSS3）
start：内容对齐开始边界。（CSS3）
end：内容对齐结束边界。（CSS3）
match-parent：这个值和 inherit 表现一致，只是该值继承的 start 或 end 关键字是针对父母的 <' direction '> 值并计算的，计算值可以是 left 和 right 。（CSS3）
justify-all：效果等同于 justify，但还会让最后一行也两端对齐。（CSS3）

12.3、垂直居中方法一

当一个设置了定位的元素所有的偏移为0且margin为auto时将水平，垂直都居中，且父元素自身的高度可动态变化。

12.4、垂直居中方法二

如果是单行文本，行高如块的高度一样时将居中，只一行，行高和元素一样高，居中。

line-height: 600px;
height: 600px;

只可以是文字等一些行内标签，图片不行

12.5、垂直居中方法三

让元素相对父元素定位，偏移左50%，上50%，把自身向左移半个宽度，向上移半个高度，同时完成了水平与垂直方向的居中

12.6、垂直居中方法四

在CSS有一个属性应该欺骗过很多开发者，一直认为使用了他就可以垂直居中了，但不行，这个属性就是：

vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>

默认值：baseline

作用：设置或检索内联元素在行框内的垂直对其方式
适用于：内联级与 table-cell 元素
baseline：把当前盒的基线与父级盒的基线对齐。如果该盒没有基线，就将底部外边距的边界和父级的基线对齐
sub：把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小）
super：把当前盒的基线提升到合适的位置作为父级盒的上标（该值不影响该元素文本的字体大小）
text-top：把当前盒的top和父级的内容区的top对齐
text-bottom：把当前盒的bottom和父级的内容区的bottom对齐
middle：把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
top：把当前盒的top与行盒的top对齐
bottom：把当前盒的bottom与行盒的bottom对齐
<percentage>：把当前盒提升（正值）或者降低（负值）这个距离，百分比相对line-height计算。当值为0%时等同于baseline。
<length>：把当前盒提升（正值）或者降低（负值）这个距离。当值为0时等同于baseline。（CSS2）说明：
设置或检索内联元素在行框内的垂直对其方式。
对应的脚本特性为verticalAlign。

不能实现对齐的主要原因是：vertical-align这个属性的特点，它是相对兄弟级行高（line-height）来定位

12.7、垂直居中方法五

使用div构造一个表格
使用表格特性居中

12.8、垂直居中方法六

在某些时候需要将小图片与文字对齐，可以使用对齐的属性absmiddle（绝对居中）

12.9、垂直居中方法七

方法与4.5非常类似，但是4.5要求知道居中元素自身的高度与宽度，这样会有一定的局限，CSS3中可以使用transform移动元素自身的宽度与高度

十三、负边距

所谓的负边距就是margin取负值的情况，如margin:-100px，margin:-100%。当一个元素与另一个元素margin取负值时将拉近距离。常见的功能如下：

向上移动
当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移。
去除列表右边框
开发中常需要在页面中展示一些列表，如商品展示列表等
负边距+定位，实现水平垂直居中
去除列表最后一个li元素的border-bottom
使用CSS3中的新增加选择器，选择最后一个li，不使用类样式，好处是当li的个数不确定时更加方便。
如果li的border-bottom颜色与ul的border颜色是一样的时候，在视觉上是被隐藏了。如果其颜色不一致的时候还是有问题，给ul写个overflow：hidden；就可以解决这个问题。

十四、页面布局

14.1、双飞翼布局

经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：

三列布局，中间宽度自适应，两边定宽；
中间栏要在浏览器中优先展示渲染；
允许任意列的高度最高；
要求只用一个额外的DIV标签；
要求用最简单的CSS、最少的HACK语句；

在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多。在淘宝UED（User Experience Design）探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局，

14.2、多栏布局

栅格系统
栏栅格系统就是利用浮动实现的多栏布局，在bootstrap中用的非常多。

多列布局
栅格系统并没有真正实现分栏效果（如word中的分栏），CSS3为了满足这个要求增加了多列布局模块，如果需要实现多列布局模块先看看这几个CSS3属性：

column-count：<integer> | auto
功能：设置或检索对象的列数
适用于：除table外的非替换块级元素, table cells, inline-block元素
<integer>：用整数值来定义列数。不允许负值
auto：根据 <' column-width '> 自定分配宽度

column-gap：<length> | normal
功能：设置或检索对象的列与列之间的间隙
适用于：定义了多列的元素
计算值：绝对长度值或者normal

column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>
功能：设置或检索对象的列与列之间的边框。与border属性类似。
适用于：定义了多列的元素

columns：<' column-width '> || <' column-count '>
功能：设置或检索对象的列数和每列的宽度
适用于：除table外的非替换块级元素, table cells, inline-block元素
<' column-width '>：设置或检索对象每列的宽度
<' column-count '>：设置或检索对象的列数

14.3、弹性布局（Flexbox）

display属性值flex：将对象作为弹性伸缩盒显示

flex：none | <flex-grow> <flex-shrink > || <flex-basis>
功能：设置或检索弹性盒模型对象的子元素如何分配空间
适用于：flex子项
none： none关键字的计算值为: 0 0 auto
<flex-grow>：用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。
在「flex」属性中该值如果被省略则默认为「1」
<flex-shrink>：用来指定收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。
在收缩的时候收缩比率会以伸缩基准值加权
在「flex」属性中该值如果被省略则默认为「1」
<flex-basis>：用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。
在「flex」属性中该值如果被省略则默认为「0%」
在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的 <width> 设置，如果自身的宽度没有定义，则长度取决于内容。

Flex容器可以设置属性flex-flow，取值为row,row-reverse,column,column-reverse四种值
row：显示在一行中

row-reverse：显示在一行中，反转

column：显示在一列中

column-reverse：显示在一列中反转

14.4、流式布局（Fluid）

固定布局和流式布局在网页设计中最常用的两种布局方式。固定布局能呈现网页的原始设计效果，流式布局则不受窗口宽度影响，流式布局使用百分比宽度来限定布局元素，这样可以根据客户端分辨率的大小来进行合理的显示。

14.5、瀑布流布局

瀑布流布局是流式布局的一种。是当下比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。

优点

有效的降低了界面复杂度，节省了空间：我们不再需要臃肿复杂的页码导航链接或按钮了。
对触屏设备来说，交互方式更符合直觉：在移动应用的交互环境当中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮。
更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。

缺点

有限的用例
无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。
例如，在电商网站当中，用户时常需要在商品列表与详情页面之间切换，这种情况下，传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。
额外的复杂度
那些用来打造无限滚动的JS库虽然都自称很容易使用，但你总会需要在自己的产品中进行不同程度的定制化处理，以满足你们自己的需求;另外这些JS库在浏览器和设备兼容性等方面的表现也参差不齐，你必须做好充分的测试与调整工作。
再见了，页脚
如果使用了比较典型的无限滚动加载模式，这就意味着你可以和页脚说拜拜了。
最好考虑一下页脚对于你的网站，特别是用户的重要性;如果其中确实有比较重要的内容或链接，那么最好换一种更传统和稳妥的方式。
千万不要耍弄你的用户，当他们一次次的浏览到页面底部，看到页脚，却因为自动加载的内容突然出现而无论如何都无法点击页脚中的链接时，他们会变的越发愤怒。
SEO：
集中在一页当中动态加载数据，与一页一页的输出相比，究竟那种方式更利于SEO，这是你必须考虑的问题。对于某些以类型网站来说，在这方面进行冒险是很不划算的。
关于页面数量的印象：
其实站在用户的角度来看，这一点并非负面;不过，如果对于你的网站来说，通过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略，那么单页无限滚动的方式对你并不适用。

14.6、响应式布局（Responsive）

媒介类型
@media早在css2.1中就有了，用于判断媒介类型，如screen屏幕，print打印机，projection投影仪，all表示所有，当然还有许多不常用的。可以指定CSS在什么样的媒介中应用，如只在打印时应用某些样式

媒介查询的应用位置（Media Queries）

内部样式
@media screen and (width:800px){ … }
导入样式
@import url(example.css) screen and (width:800px);
链接样式
<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />
XML中应用样式
<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>

媒介查询语法
@media queries是CSS3中引入的，不仅可以实现媒介类型的查询可以实现设备特性的查询，可以简单认为是对CSS2.1中的media的增强，基本语法如下：

@media [not|only] media_type and feature

not：取反操作

only：让不支持media query的设备但读取media type类型的浏览器忽略这个样式

media_type：是媒介类型

响应式栅格系统（Responsive）
在前面的布局中我们学习栅格系统，这里通过媒介查询实现响应式栅格系统

14.7、移动优先（Mobile First）

桌面优先（优雅降级）

这是一种传统的做法，开发项目时优先PC端，然后再通过一些hack的方法让项目正常运行在移动端，所谓的降级可以简单认为就是将一些信息隐藏，因为移动端的可视范围有限，必须给用户提供简洁核心的内容。

移动优先（渐进增强）

对于产品设计师，一个新产品先设计移动版，然后才是桌面版。
对于工程师，一个新产品，先开发移动版，然后才是桌面版本。

这样的好处是能把握好最核心最关键内容，让界面简洁。

14.8、视区（viewport）

需要设置viewport的原因

viewport也称视口，PC上是指浏览器窗口的可视区域。先了解两个概念：

可见视口（visual viewport）：浏览器窗口的可视区域

布局视口（layout viewport）：CSS在应用时所设置的布局最大宽度。布局视口可以大于可见视口。

移动设备上的viewport都是要大于浏览器可视区域的、这样就会产生一个默认缩放的结果

设置viewport的方法

利用meta标签对viewport进行控制，如：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

小节
首先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度（布局视口）值为800px，980px，1024px等这些，总之是大于屏幕宽度（可见视口）的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。

每个移动设备浏览器中都有一个理想的宽度（ideal viewport），这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。

一般在head中加上如下的meta即可：

十五、REM实现响应式布局

rem是CSS3新引进来的一个度量单位，相对长度单位。相对于根元素(即html元素)font-size计算值的倍数，如：

height:2rem;，则高度的大小为32px（字体默认为16px，chrome最小为12px），如果根元素的字体为15px，则结果为30px。

页面中的尺寸都以html元素的font-size为相对单位，为默认设置为20px，如果需要一个200px的大小则使用10rem，然后当屏幕大小变化时通过javascript或media queries修改字体大小。

使用javascript设置相对尺寸
使用媒介查询设置字体尺寸

十六、web font

web font是应用在web中的一种字体技术，在CSS中使用font-face定义新的字体。先了解操作系统中的字体：

安装好操作系统后，会默认安装一些字体，这些字体文件描述了每一个文字的形态，一般中文文件大，英文文件小，因为中文字符数多；在控制面板中可以找到文字文件夹，在C:\Windows\Fonts下也可以直接找到。另外如果想让自己的电脑上有更加丰富的字体，可以下载新的字体文件后复制到改位置。
我们在文档中显示的字体应该在系统中能找到才会正常显示，比如你在word中使用了黑体字，但是将word文件发给另外一个人，他的电脑上并没有黑体字，此时就不能按黑体正常显示，网页也一样。为了让网页上能显示本地没有的字体我们可以使用font-face，这并不是CSS3创始的一种技术，早在IE5中就实现了。

16.1、什么是font-face

@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体，可以实现矢量图标。
微软的IE4已经是开始支持这个属性，但是只支持微软自有的.eot (Embedded Open Type) 格式，而其他浏览器直到现在都没有支持这一字体格式。然而，从Safari 3.1开始，网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。

16.2、font-face优点

可缩放性（Scalability）
基于字体的icon是与分辨率无关并能缩放到任何想要程度的技术。你的图标看起来毫不关心retina,HDPI,XHDPI等等屏幕，但渲染时会根据目标设备自动调整，你将有能力应对任何当下，未来，或大多数任意规格的设备

尺寸（Size）
裁剪到正确的比例，icon font的文件的大小要比起位图小到难以置信的程度，使用icon font时，你不需要根据不同设备准备不同的图片，你的APP只需要在启动时加载一次icon font文件即可。

可维护性（Maintainability）
自你的icon打包进一个字体文件，在项目自始至终你仅需要维护这个单一的字体文件。
通过管理字体文件你可以很自然的组织你的icon集合，任意的进行修改或扩展

可推广性（Adoption）
然而，应用这样的icon fonts可能会影响你和你同事之间的工作流程，但说服让他们采用这样的技术也非常简单，有数款免费或收费的工具帮你轻松达到目的并能看到很好的应用结果，在几乎任意（手机）移动平台、浏览器或操作系统

灵活性（Flexibility）
应用icon fonts技术中最有意义的一项能力是可以操纵icon fonts，改变颜色，大小，仅仅几行代码就可以在瞬间改变

可交互性(Interactivity)
由于灵活性以及能够通过代码方便的操纵，icon fonts 是独一无二的在运行时被操纵，通过应用icon fonts技术，你能轻松的在不同状态显示对应的不同效果，创建动画。

16.3、字体格式

TureType(.ttf)格式
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

Web Open Font Format(.woff)格式
.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

Embedded Open Type(.eot)格式
.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；

SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持

16.4、使用@font-face

@font-face {
font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>];
}

YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；
format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
weight和style:weight定义字体是否为粗体，style主要定义字体样式，如斜体。

字体格式转换
有时候我们手上只有一个字体文件，但是web font为了兼容经常需要多个种格式支持，一般至少2种，一种要考虑IE浏览器，一种要考虑现代浏览器。可以使用如下的工具实现在线字体的转换，基本方法是将字体上传，在线服务的网站将一个字体文件变换成多个字体文件后下载。

查看字体编码
有时候我们手上有一个图标字体文件，但是不知道他的对应编码，在线工具可以检测到一些，但有时发现在线工具并不是能检测到所有的编码，使用工具：FontCreator，不仅可以创建自己的字体还可以查看字体的详细内容。

base64内嵌字体
有些小的字体文件可以直接编码成base64将字符放在css文件中，让css直接解析，这种办法可以减少一些客户端的请求，图片与字体文件都可以这样做，

十七、CSS Sprite

CSS Sprites也就是通常说的CSS精灵，也有人称为雪碧图，是对网页中加载的图片的处理技术。在一个网页中可能有多张小的图片，如图标等，会向服务器发送多个请请求，请求数越多，服务器的压力就越大，精灵技术就是先将多张小的图片合并成一张图片，然后在CSS中分开为多张小图片的一种技术。

17.1、将小图片合并

可以使用在线合并，也可以使用photoshop合并

17.2、使用CSS分离图片

为了分离图片，需要先了解background-position属性：

作用：设置或检索对象的背景图像位置，必须先指定 <' background-image '> 属性

background-position：<position> [ , <position> ]*
<position> = [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]

默认值：0% 0%，效果等同于left top
适用于：所有元素
<percentage>：用百分比指定背景图像填充的位置。可以为负值。其参考的尺寸为容器大小减去背景图片大小
<length>：用长度值指定背景图像填充的位置。可以为负值。
center：背景图像横向和纵向居中。
left：背景图像在横向上填充从左边开始。
right：背景图像在横向上填充从右边开始。
top：背景图像在纵向上填充从顶部开始。
bottom：背景图像在纵向上填充从底部开始。

17.3、小结

CSS Sprites非常值得学习和应用，特别是页面有很多很小的icon（图标），但如果需要选择使用CSS精灵技术，你需要了解它的优缺点。

优点

利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

缺点

在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置。
CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

十八、阴影

18.1、文字阴影

text-shadow

<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>：设置对象的阴影的颜色。

18.2、盒子阴影

box-shadow

<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④：如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>：设置对象的阴影的颜色。
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

十九、背景

19.1、背景图像尺寸

background-size：指定对象的背景图像的尺寸大小

background-size：<bg-size> [ , <bg-size> ]*

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

<length>：用长度值指定背景图像大小。不允许负值。
<percentage>：用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

19.2、背景图像显示的原点

background-origin：指定对象的背景图像显示的原点。

background-origin：<box> [ , <box> ]*
<box> = border-box | padding-box | content-box

padding-box：从padding区域（含padding）开始显示背景图像。
border-box：从border区域（含border）开始显示背景图像。
content-box：从content区域开始显示背景图像。

二十、伪元素

伪元素不是真的元素是通过CSS虚拟出的一个元素，CSS3的语法为了区分伪元素与伪类，使用“：：”表示，但是前期为了兼容“：”仍然可以使用。

20.1、before

在应用样式的元素内的前部虚拟一个元素可以指定元素的内容与样式。

20.2、after

after也是一个与before类似的伪元素，不同的是他的位置是在内部的尾部
注意：

本质上并不支持伪元素的双冒号(::)写法，而是忽略掉了其中的一个冒号，仍以单冒号来解析，所以等同变相支持了E::after。
不支持设置属性position, float, list-style-*和一些display值，Firefox3.5开始取消这些限制。
IE10在使用伪元素动画有一个问题：
.test:hover {}
.test:hover::after { /* 这时animation和transition才生效 */ }需要使用一个空的:hover来激活

二十一、圆角与边框

圆角可能是我们最迫切需要的CSS3样式了，在CSS2.1中想尽各种办法都不算理想，实现方法如下：

21.1、border-radius 圆角

border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

<length>：用长度值设置对象的圆角半径长度。不允许负值
<percentage>：用百分比设置对象的圆角半径长度。不允许负值

这里有两部分，第一个角度是水平角度，第二个角度是垂直角度。

提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
如果只提供一个参数，将用于全部的于四个角。
如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。

垂直半径也遵循以上4点。对应的脚本特性为borderRadius。

21.2、边框图片border-image

border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>

<' border-image-source '>：设置或检索对象的边框是否用图像定义样式或图像来源路径。
<' border-image-slice '>：设置或检索对象的边框背景图的分割方式。
<' border-image-width '>：设置或检索对象的边框厚度。
<' border-image-outset '>：设置或检索对象的边框背景图的扩展。
<' border-image-repeat '>：设置或检索对象的边框图像的平铺方式。

图片剪裁位置(border-image-slice)

没有单位，专指像素。这类似于flash的as脚本，舞台高宽，影片剪辑大小，位移直接就是一个数值，没有单位，因为默认单位就是像素(px)了。例如：border-image:url(border.png) 27 repeat;这里的27专指27像素。
支持百分比值，百分比值大小事相对于边框图片而言，假设边框图片大小为400px*300px，则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。

重复性(border-image-repeat)
这里的重复性有别于background的背景重复，差别较大。background图片就是重复，不重复，水平重复，垂直重复，总之就是围绕repeat（重复）这个词打转，一家独大。而对于border-image，可谓是三足鼎立，repeat（重复）只是其中之一，其余两个是round（平铺）和stretch（拉伸）。其中，stretch是默认值。

参数0~2个，0则使用默认值 – stretch，例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% stretch stretch;；1则表示水平方向及垂直方向均使用此参数；2个参数的话则第一个参数表水平方向，第二个参数表示垂直方向。例如：border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% round repeat;表示水平方向round（平铺），垂直方向repeat（重复），至于何为平铺何为重复下面会深入讲解。

二十二、变形 transform

CSS3中使用transform对元素进行变形，可以是2D的也可以是3D（效果）的，transform的参数有许多，多数是函数的形式，具体如下：

transform：none | <transform-function>+

2D Transform Functions
matrix()：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate()：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translatex()：指定对象X轴（水平方向）的平移
translatey()：指定对象Y轴（垂直方向）的平移
rotate()：指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义
scale()：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scalex()：指定对象X轴的（水平方向）缩放
scaley()：指定对象Y轴的（垂直方向）缩放
skew()：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewx()：指定对象X轴的（水平方向）扭曲
skewy()：指定对象Y轴的（垂直方向）扭曲 3D Transform Functions：
matrix3d()：以一个4x4矩阵的形式指定一个3D变换
translate3d()：指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
translatez()：指定对象Z轴的平移
rotate3d()：指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
rotatex()：指定对象在x轴上的旋转角度
rotatey()：指定对象在y轴上的旋转角度
rotatez()：指定对象在z轴上的旋转角度
scale3d()：指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
scalez()：指定对象的z轴缩放
perspective()：指定透视距离

22.1、rotate()2D旋转

transform:rotate(<angle>)

angle是角度的意思，单位可以是：

deg 度（Degrees）
grad 梯度（Gradians）
rad 弧度（Radians）
turn 转、圈（Turns）

22.2、设置原点 transform-origin

transform-origin用于设置变形时的原点，从5.1可以看出转动时默认的原点在中心，这里使用该属性修改原点位置。

transform-origin：[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]

默认值：50% 50%，效果等同于center center

transform-origin：水平（left | center | right）垂直（top | center | bottom）

22.3、平移 translate()

transform：translate(x,y) = translate(<translation-value>[,<translation-value>]?)
指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 。

22.4、缩放 scale

transform:scale(x,y)

scale()：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值

22.5、斜切扭曲skew

transform:skew(x,y)

指定对象skew transformation（斜切扭曲）。第一个参数对应X轴角度，第二个参数对应Y轴角度。如果第二个参数未提供，则默认值为0

二十三、渐变

在早期IE浏览中的滤镜中就有渐变，Photoshop中也有渐变，可简单的认为渐变就是颜色的平滑过度，CSS3的渐变语法如下：

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?

<angle>：用角度值指定渐变的方向（或角度）。
to left：设置渐变为从右到左。相当于: 270deg
to right：设置渐变从左到右。相当于: 90deg
to top：设置渐变从下到上。相当于: 0deg
to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。 <color-stop> 用于指定渐变的起止颜色：
<color>：指定颜色。
<length>：用长度值指定起止色位置。不允许负值
<percentage>：用百分比指定起止色位置。

渐变一般应用于需要指定颜色的地方。

二十四、透明

24.1、opacity

设置对象的不透明度。

opacity：<number>

<number>：使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。 0表示完全透明，1表示完全不透明。

24.2、transparent与图片透明

用来指定全透明色彩
transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。
在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。
在CSS2中，border-color也开始接受transparent作为参数值，《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。
在CSS3中，transparent被延伸到任何一个有color值的属性上。

    color: transparent;
    border: 1px solid transparent;
    background: transparent;

常见互联网图片格式，压缩格式：

gif：只255种颜色，透明，动画效果
jpg：色彩丰富（65536），不透明，不支持动画
png：色彩更加丰富，支持透明，不支持动画

24.3、RGBA

RGBA是CSS3中新增用于设置颜色的方法，语法：

RGBA(R,G,B,A)
取值：

R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A： Alpha透明度。取值0 - 1之间。

此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。
IE6.0-8.0不支持使用 rgba 模式实现透明度，可使用 IE 滤镜处理，如：

filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#80000000,endColorStr=#80000000);
background: rgba(0, 0, 0, 0.5);

二十五、动画

前端可以使用javascript实现一些简单的动画，但是有很大局限；jQuery解决了部分问题，对于一些小的动画jQuery表示不错，但复杂的过渡效果也无能为力；CSS3中引入了2种动画效果表现不错，分别是过渡动画与帧动画。

25.1、过渡动画

过渡动画可简单理解为是从一个状态过渡到另一个状态间自动生成的动画效果，相对简单。

transition语法

transition：<single-transition>[,<single-transition>]*
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

<' transition-property '>：检索或设置对象中的参与过渡的属性
<' transition-duration '>：检索或设置对象过渡的持续时间
<' transition-timing-function '>：检索或设置对象中过渡的动画类型
<' transition-delay '>：检索或设置对象延迟过渡的时间
过度动画基本可以针对元素的种属性为尺寸、透明度、颜色等。

25.2、帧动画

也称为补间动画，过度动画中的效果是根据原始状态与目标状态生成的，如果需要控制中间过程则可以使用帧动画。
帧动画需要先定义再使用，使用@keyframes定义，animation调用定义好的动画。

@keyframes语法

@keyframes <identifier> { <keyframes-blocks> }
<keyframes-blocks>：[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*

<identifier>： identifier定义一个动画名称

<keyframes-blocks>：定义动画在每个阶段的样式，即帧动画。

<pre xml:space="preserve" style="margin: 0px; padding: 0px; border: 0px; line-height: 1.57143em; font-family: Monaco, Courier, monospace;">
@keyframes testanimations {
    from { opacity: 1; }
    to { opacity: 0; }
}</pre>

animation语法

animation：<single-animation>[,<single-animation>]*
<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

animation-name ：检索或设置对象所应用的动画名称
animation-duration：检索或设置对象动画的持续时间
animation-timing-function：检索或设置对象动画的过渡类型
animation-delay：检索或设置对象动画延迟的时间
animation-iteration-count '>：检索或设置对象动画的循环次数
animation-direction：检索或设置对象动画在循环中是否反向运动
animation-fill-mode：检索或设置对象动画时间之外的状态
animation-play-state：检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

二十六、Less

26.1、概要

Less是一种动态样式语言，Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数。LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。 Less是一个JS库，所以他可以在客户端运行，相对Sass则必须在服务端借助Ruby运行

中文网站： http://www.lesscss.net/

英文官网： http://lesscss.org

less源码： https://github.com/cloudhead/less.js

github地址： https://github.com/less/less.js

26.2、变量

语法：@变量名:值;

以@作为变量的起始标识，变量名由字母、数字、_和-组成
没有先定义后使用的规定；
以最后定义的值为最终值；
可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；
定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；
存在作用域，局部作用域优先级高于全局作用域。

26.3、解析Less

插件安装

在线处理

页面中直接引用less的源码，使用javascript动态翻译，这样在开发阶段非常方便，但是在运行阶段会影响效率，建议在开发阶段使用less.js在线处理，项目稳定运行时将less文件预处理。

步骤一：

下载到less.js动态处理.less文件的javascript脚本，下载地址： https://github.com/less/less.js

步骤二：

在页面中引入样式与less.js文件，如下：

<pre xml:space="preserve" style="margin: 0px; padding: 0px; border: 0px; line-height: 1.57143em; font-family: Monaco, Courier, monospace;"><link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script></pre>

测试运行

预处理

在线处理的效率低，预处理就是将less文件先翻译成标准的CSS文件，再引入到项目中，处理的办法有许多：

26.4、混入(Mixins)

类似函数或宏

定义函数，@radius是参数，3px是默认值

.borderRadius(@radius: 3px) {
        -moz-border-radius: @radius;
        -webkit-border-radius: @radius;
        border-radius: @radius;
  }

使用函数，带参数

#header { .borderRadius(10px); }

不带参数使用默认参数

.btn { .borderRadius}

注意：

可以不使用参数 .wrap(){…} .pre{ .wrap }，也可以使用多个参数
内置变量@arguments代表所有参数(运行时)的值 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ box-shadow: @arguments; }

注意，在参数没有默认值的前提下使用@arguments调用时必须赋值，否则会导致整个页面内的less语法出错而失效。

Mixins必须使用ID或者类，即#xx或.xx，否则无效。

26.5、嵌套

允许将多个CSS选择器嵌套在一起，&表示当前选择器的父选择器

#header { 
&.fl{ float: left; }
.mln { margin-left: 0; } 
}

生成

#header .fl{float: left;} 
#header .mln {margin-left: 0;}

26.6、运算

运算主要是针对任何数字、颜色、变量的操作，支持加、减、乘、除、()或者更复杂的综合运算；

@init: #111111;
@transition: @init*2;
.switchColor { color: @transition; }

26.7、函数

Less 提供了许多用于转换颜色，处理字符串和进行算术运算的函数

.lightColor{lighten(@color, 10%); }

26.8、作用域

同一级的变量后者覆盖前者，内部变量优先级高于外部变量，变量只在同一个文件中生效。

26.10、注释

块注释和行注释都可以使用

26.11、循环

在Less中，混合可以调用它自身。这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构。

二十七、Sass

Sass与Less类似类似也是一种CSS的预编译语言，他出现的更晚，但功能更加强大，Sass 有两种语法。第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本；第二种比较老的语法成为缩排语法（或者就称为 "Sass"），提供了一种更简洁的 CSS 书写方式特点如下：

特点

不能直接在页面中解析，需要使用ruby预先翻译成css文件，而Less可以在线动态翻译。
Sass功能更加强大，拥有流控语句等Less不具备的功能
完全兼容 CSS3，在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)

在使用时Sass的后缀名为scss，本文全部使用scss的语法，可以安装Koala直接解析，不需要去搭建ruby环境，Koala已封装好。

27.1、变量

sass中可以定义变量，方便统一修改和维护

27.2、嵌套

sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。

27.3、导入

sass中如导入其他sass文件，最后编译为一个css文件，优于纯css的@import

27.4、mixin 混入

sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。定义时使用关键字@mixin，调用时使用@include

27.5、扩展/继承

sass可通过@extend来实现代码组合声明，使代码更加优越简洁。

27.6、运算

27.7、函数

sass中集成了大量的颜色函数，让变换颜色更加简单。

RGB函数

rgb(＄red, ＄green, ＄blue) //根据RGB中的三个值计算出一个颜色；
rgba(＄red, ＄green, ＄blue, ＄alpha) //根据RGB中红、绿、蓝和透明度计算出一个颜色；
red(＄color) //获取RGB中的红色值；
green(＄color) //获取RGB中的绿色值；
blue(＄color) //获取RGB中的蓝色值；
mix(＄color1, ＄color2, [＄weight]) //混合两种颜色；

HSL函数简介（HSL用色轮表示颜色值)

hsl(hue,saturation, ＄lightness): 根据色相、饱和度和亮度的值返回对应的HEX颜色
hsla(hue,saturation, lightness,alpha): 根据色相、饱和度、亮度和透明度的值返回对应的HEX颜色
hue(＄color)：从HEX颜色值中取得色相值
saturation(＄color): 从一个HEX颜色值中取得饱和度值
lightness(＄color):从一个HEX颜色值中取得亮度值
ajust-hue(color,degrees):通过改变一个颜色的色相值，创建一个新的颜色
lighten(color,amount)：通过改变颜色的亮度值，让颜色变亮，创建一个一个新的颜色
darken(color,amount):通过改变颜色的亮度值，让颜色变暗，创建一个一个新的颜色
saturate(color,amount):通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
desaturate(color,amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色
grayscale(color)：将一个颜色变成灰色，相当于desaturate(color,100%);
complement(color)：返回一个补充色，相当于adjust?hue(color,180deg);
invert(＄color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变

Opacity函数简介（控制颜色的透明度）

alpha(＄color)/opacity(＄color):获得透明度值
rgba(＄color,alpha)：改变颜色的透明度值
opacify(＄color,＄amount)/fade-in(＄color,＄amount):使颜色更不透明
transparentize(＄color,＄amount)/fade-out(＄color,＄amount):使颜色更加透明

27.8、流程控制

sass中和其它程序语言一样也拥有流程控制语句，如if，for，each，while，指令，函数等。

二十八、浏览器兼容

28.1、概要

世界上没有任何一个浏览器是一样的，同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核亦不尽相同，相同内核的版本不同，相同版本的内核浏览器品牌不一样，各种运行平台还存在差异、屏幕分辨率不一样，大小不一样，比例不一样。兼容性主要考虑三方面：

CSS兼容
JavaScript兼容
HTML兼容

这三类也是前端的主要组成部分，都存在一定的兼容性问题，知己知彼，百战百胜，我们先了解浏览器的发动机—内核。

28.2、浏览器内核

Trident
Microsoft公司浏览器内核，IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）及许多品牌浏览器的内核。其中部分浏览器的新版本是“双核”甚至是“多核”，其中一个内核是Trident，然后再增加一个其他内核。

Gecko
Firefox内核，Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) ，Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon使用的内核。

Presto
Opera前内核，已废弃，Opera现已改用Google Chrome的Blink内核。

Webkit
Safari内核,Chrome内核原型,开源，它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。傲游浏览器3、Apple Safari、(Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器

Blink
Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）。

edge
微软专门为新IE打造的引擎，速度快，目前已经基于此引擎开发了浏览器，目前IE11使用该内核，估计以后微软的新浏览器会继续采用该内核。

28.3、兼容的一般标准

在不同的主流的浏览器上表现效果一致
能适应不同的屏幕大小
能适应不同的分辨率与色彩深度

28.4、CSS Reset

如全局重置{ padding: 0; margin: 0; border:}虽然能全部重置，但由于性能较低，不推荐使用。因为需要遍历整个DOM树，当页面节点较多时，会影响页面的渲染性能。

28.5、CSS Hack

CSS Hack就是针对不同的浏览器或不同版本浏览器写特定的CSS样式达到让浏览器兼容的过程。

条件注释法

IE条件注释（Conditional comments）是IE浏览器私有的代码，在其它浏览器中被视为注释。

样式内属性标记法
在CSS样式的属性名前或值后面添加特殊的字符让不同的浏览器解析。

选择器前缀法

28.6、文档模式（X-UA-Compatible）

文档模式是IE8浏览器以后的一种独有技术，他可以通过meta指定当前文档的渲染模式，如可以把IE8降级成IE6、IE7使用。文档模式的主要作用是影响浏览器显示网页HTML的方式，用于指定IE的页面排版引擎（Trident）以哪个版本的方式来解析并渲染网页代码。

x-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其他 meta 之前使用。
<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >
<meta http-equiv ="X-UA-Compatible" content = "IE=edge,chrome=1" />
Google Chrome Frame(谷歌内嵌浏览器框架GCF)
插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核

未指定文档模式时使用默认的文档模式示例

28.7、javascript兼容

这里有两层意思，第一可以使用javascript操作样式与标签，强制浏览器兼容，比如先使用javascript判断浏览器类型，再操作样式与标签。

第二指javascript存在兼容问题，如一个对象在某些浏览器下没有办法使用，要让javascript更加兼容，可以采取如下办法：

使用第三方提代的javascript库，如jQuery，Zepto， Prototype，dojo、YUI、ExtJS

像jQuery这种成熟的javascript库经过多次的版本迭代，已经变得非常成熟，世界上的网站到现在近60%都使用到了jQuery，他的兼容性不错。

浏览器检测、重新封装

使用javascript判断浏览器类型，对一些特点的方法或对象重新封装后使用屏蔽浏览的不兼容性。可以使用User-Agent、或特定对象。

二十九、前端性能优化

29.1、概要

在保证功能的前提下，性能也非常关键。从上图可以看出如果性能太差，响应速度慢将带非常差的用户体验，会失去大量用户。
好的性能要依托如下几个方面：

服务器端
网络速度，客户端与服务器之间的每个网络环节
客户端软件与硬件配置
前端的性能，资源的数量，大小，javascript的时间与空间复杂度等

要提高前端的性能可以从如下几个方面入手：

尽量减少HTTP请求数量
压缩
缓存
使用内容发布网络（CDN的使用）
DNS Prefetch
将CSS样式表放在顶部
将javascript脚本放在底部
使用外部javascript和CSS
避免重定向

29.2、减少HTTP请求数量

前端优化的黄金准则指导着前端页面的优化策略：只有10%-20%的最终用户响应时间花在接受请求的HTML文档上，剩下的80%-90%时间花在为HTML文档所引用的所有组件（图片、脚本、样式表等）进行的HTTP请求上。

图片地图
CSS Sprite
Data URI Scheme（内联资源）
样式表的合并
使用Web Font字体图标

图片地图

图片地图与称热点图片，不算新技术，早在HTML4.0中就存在了，就是在图片的指定区域指定超链接。这样做的目的是将原本需要物理拆分的图片合并在一起，通过热点单独指定链接，间接的减少了客户端请求服务器图片的数量。

精灵图片（Sprite）
就是把多张细小的图片拼成一张大图片，然后通过CSS来控制在什么地方具体显示这整张图片的什么位置，使用CSS裁剪出想要的图片，这样可以减少客户端请求小图片的次数。

字体图标（Web Font）
使用@font-face能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体，可以实现矢量图标，一次加载反复使用多个图标，相当于图标都变成了字体。可以将多个小图标定义在一个字体中，减少图标的请求次数。

内联资源（Data URI Scheme）
所谓的内联资源就是将一些小的资源文件序列化成base64的编码，放在CSS样式或页面中，在客户端再解析，优点是合并了小的文件，减少请求，把二进制变成了字符串方便存储，但是会出一个没有意义的长字符串影响开发时阅读代码，另外在某些情况下将失去图片的缓存。

data类型的Url格式，是1998年在RFC2397中提出，现在多数浏览器支持，IE8支持。可以在CSS，HTML中嵌入小的非字符数据。

合并资源
将多个小的离散的css、js文件合并，注意粒度，把多个请求变成1个请求

29.3、压缩

用户请求的资源越小速度将越快，网络带宽占用越小，但是压缩将占用更多的CPU资源，压缩与解压也是需要成本的。

GZIP压缩

GZIP，即网页压缩，是由WEB服务器和浏览器之间共同遵守的协议
Gzip通常可以减少70%网页内容的大小，包括脚本、样式表、图片等文件

开启Tomcat Gzip压缩
使用gzip压缩可以减少数据传输大小，加快网页加载速度。很多大站都开启了gzip压缩，不过也有很多网站并没有开启gzip压缩，gzip压缩后对SEO不友好，但从带宽和流量的角度来看，还是有必要开启gzip压缩的。

开启IIS Gzip压缩

压缩javascript、css
可以在IDE中安装插件，也可以使用单独的工具，或者在前端自动化中设置压缩步骤。

优化图像
选择合适的图像压缩格式，常见是gif、jpg、png

压缩HTML
去除html中的多余空格、注释等内容（演示）
后台动态压缩，页面渲染时压缩

29.4、缓存

http头部缓存

<meta http-equiv="Expires" content="Tue, 01 Dec 2015 13:30:26 GMT" />

Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求新内容，可以使用客户端缓存的内容，但是请求还是会发生，状态为304。浏览器会默认开启缓存功能。

本地存储

LocalStorage、SessionStorage、Web SQL Database

离线缓存

ApplicationCache，在断开服务器时仍然可以使用客户端的缓存文件，继续浏览。

动态页面静态化

将动态内容，需要复杂计算的内容变成静态的如HTML、JavaScript

29.5、内容分发网络（CDN）

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定，它是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件。

29.6、DNS Prefetch

DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行 DNS 的解析，减少用户等待时间，提高用户体验。

29.7、小节

优化是没有止境的，只有更快没有最快，下面是更多关于前端优化的方法。

网页内容

减少http请求次数
减少DNS查询次数
避免页面跳转
缓存Ajax
延迟加载
提前加载
减少DOM元素数量
根据域名划分内容
减少iframe数量
避免404

服务器

使用CDN
添加Expires 或Cache-Control报文头
Gzip压缩传输文件
配置ETags
尽早flush输出
使用GET Ajax请求
避免空的图片src

Cookie

减少Cookie大小
页面内容使用无cookie域名

CSS

将样式表置顶
避免CSS表达式
用<link>代替@import
避免使用Filters