（CSS2）
如果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;
}
Basic Support包含值：none | inline | block | list-item | inline-block
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值，不同的浏览器可能设置的不一样，就会出现误差，重置浏览器样式就是让您可以在一张白纸上写字。
8.1、CSSReset
每种浏览器都有一套默认的样式表，即user agent stylesheet，网页在没有指定的样式时，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。但这样会有很多兼容问题，CSSReset可以将所有浏览器默认样式设置成一样。
8.2、normalize
也许有些cssreset过于简单粗暴，有点伤及无辜，normalize是另一个选择。bootstrap已经引用该css来重置浏览器默认样式，比普通的cssreset要精细一些，保留浏览器有用的默认样式，支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。
Normalize.css和传统Reset的区别
Normalize.css 保护了有价值的默认值
Normalize.css 修复了浏览器的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：
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 的元素浏览器会赋予它一系列的效果。
出发IE下的haslayout方法
display: inline-block
除了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的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一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
10.5、z-index属性
语法：z-index: auto |
10.6、:target伪类
语法：
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时不生效
浮动元素间会堆叠
浮动元素不能溢出包含块
相邻的浮动元素，left属性最前面的元素，排在最左边
相邻的浮动元素，right属性最前面的元素，排在最右边
包含块不会计算浮动元素的高宽
浮动元素与非浮动元素会重叠，挤出块中的内容
11.3、清除浮动
该属性的值指出了不允许有浮动对象的边。
clear：none | left | right | both
适用于：块级元素
清除外部浮动
清除内部浮动
方法1：BFC
十二、居中
12.1、块标签自身水平居中
当一个有宽度的块标签设置margin:0 auto时将实现自身的水平居中
12.2、块标签内对齐
text-align：start | end | left | right | center | justify | match-parent | justify-all
默认值：start
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 | |
默认值：baseline
作用：设置或检索内联元素在行框内的垂直对其方式： 把当前盒提升（正值）或者降低（负值）这个距离，百分比相对line-height计算。当值为0%时等同于baseline。： 把当前盒提升（正值）或者降低（负值）这个距离。当值为0时等同于baseline。（CSS2） 说明：
不能实现对齐的主要原因是：vertical-align这个属性的特点，它是相对兄弟级行高（line-height）来定位
12.7、垂直居中方法五
使用div构造一个表格
使用表格特性居中
12.8、垂直居中方法六
在某些时候需要将小图片与文字对齐，可以使用对齐的属性absmiddle（绝对居中）
12.9、垂直居中方法七
方法与4.5非常类似，但是4.5要求知道居中元素自身的高度与宽度，这样会有一定的局限，CSS3中可以使用transform移动元素自身的宽度与高度
十三、负边距
所谓的负边距就是margin取负值的情况，如margin:-100px，margin:-100%。当一个元素与另一个元素margin取负值时将拉近距离。常见的功能如下：
向上移动
去除列表右边框
负边距+定位，实现水平垂直居中
去除列表最后一个li元素的border-bottom
十四、页面布局
14.1、双飞翼布局
经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：
三列布局，中间宽度自适应，两边定宽；
中间栏要在浏览器中优先展示渲染；
允许任意列的高度最高；
要求只用一个额外的DIV标签；
要求用最简单的CSS、最少的HACK语句；
在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多。在淘宝UED（User Experience Design）探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局，
14.2、多栏布局
栅格系统
多列布局
column-count： | auto： 用整数值来定义列数。不允许负值
column-gap： | normal
column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>
columns：<' column-width '> || <' column-count '>
14.3、弹性布局（Flexbox）
display属性值flex： 将对象作为弹性伸缩盒显示
flex：none | || ： 用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。： 用来指定收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。： 用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。 设置，如果自身的宽度没有定义，则长度取决于内容。
Flex容器可以设置属性flex-flow，取值为row,row-reverse,column,column-reverse四种值
row-reverse：显示在一行中，反转
column：显示在一列中
column-reverse：显示在一列中 反转
14.4、流式布局（Fluid）
固定布局和流式布局在网页设计中最常用的两种布局方式。固定布局能呈现网页的原始设计效果，流式布局则不受窗口宽度影响，流式布局使用百分比宽度来限定布局元素，这样可以根据客户端分辨率的大小来进行合理的显示。
14.5、瀑布流布局
瀑布流布局是流式布局的一种。是当下比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。
优点
有效的降低了界面复杂度，节省了空间：我们不再需要臃肿复杂的页码导航链接或按钮了。
对触屏设备来说，交互方式更符合直觉：在移动应用的交互环境当中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮。
更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。
缺点
有限的用例
额外的复杂度
再见了，页脚
SEO：
关于页面数量的印象：
14.6、响应式布局（Responsive）
媒介类型
媒介查询的应用位置（Media Queries）
内部样式
导入样式
链接样式
XML中应用样式
媒介查询语法
@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进行控制，如：
小节
每个移动设备浏览器中都有一个理想的宽度（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 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体，可以实现矢量图标。
16.2、font-face优点
可缩放性（Scalability）
尺寸（Size）
可维护性（Maintainability）
可推广性（Adoption）
灵活性（Flexibility）
可交互性(Interactivity)
16.3、字体格式
TureType(.ttf)格式
OpenType(.otf)格式
Web Open Font Format(.woff)格式
Embedded Open Type(.eot)格式
SVG(.svg)格式
这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持
16.4、使用@font-face
@font-face {; src: [][, []]*; [font-weight: ]; [font-style:
