1、CSS的盒子模型？
(1)两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了 border 和 pading;
(2)盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
box-sizing：content-box(默认) | border-box(ie盒模型)
2、link 和@import 的区别是?
(1)、link属于XHTML标签，而@import是CSS提供的;
(2)、页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3)、import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
(4)、link方式的样式的权重 高于@import的权重;
3、display:(显示)
none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline：指定对象为内联元素。
block：指定对象为块元素。
list-item：指定对象为列表项目。
inline-block：指定对象为内联块元素。(CSS2)
table：指定对象作为块元素级的表格。类同于html标签
inline-table：指定对象作为内联元素级的表格。类同于html标签
table-caption：指定对象作为表格标题。类同于html标签
(CSS2)
table-cell：指定对象作为表格单元格。类同于html标签
(CSS2)
table-row：指定对象作为表格行。类同于html标签
(CSS2)
table-row-group：指定对象作为表格行组。类同于html标签
(CSS2)
table-column：指定对象作为表格列。类同于html标签
(CSS2)
table-column-group：指定对象作为表格列组显示。类同于html标签
(CSS2)
table-header-group：指定对象作为表格标题组。类同于html标签(CSS2)
table-footer-group：指定对象作为表格脚注组。类同于html标签
(CSS2)
run-in：根据上下文决定对象是内联对象还是块级对象。(CSS3)
box：将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
inline-box：将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
flexbox：将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
flex：将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
inline-flex：将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
4、visibility：(为被隐藏的对象保留其物理空间)
visible：设置对象可视。
hidden：设置对象隐藏。
collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。
5、overflow、overflow-x、overflow-flow：
visible：对溢出内容不做处理，内容可能会超出容器。
hidden：隐藏溢出容器的内容且不出现滚动条。
scroll：隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
6、opacity：(不透明度)
使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内。
7、@charset "utf-8"; 在外部样式表文件内使用。指定该样式表使用的字符编码。
8、css选择符：
关系选择：E F { sRules } 包含选择符 会选中所有E 下的F 后代元素;
E>F { sRules }子选择符 选中E 的子元素 F;
E+F { sRules }相邻选择符，选中有相同父元素下的E的所有紧邻F兄弟元素；
E~F { sRules }兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。css3
属性选择符：
E[att] { sRules } 选择具有att属性的E元素。
E[att="val"] { sRules } 选择具有att属性且属性值等于val的E元素。
E[att^="val"] { sRules } 选择具有att属性且属性值为以val开头的字符串的E元素。css3
E[att$="val"] { sRules } 选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"] { sRules } 选择具有att属性且属性值为包含val的字符串的E元素。
伪类选择符：(css3)
E:not(s) { sRules } 匹配不包含s选择符的元素E;
E:root { sRules } 匹配E元素在文档的根元素。在HTML中，根元素永远是HTML
E:last-child { sRules } 匹配父元素的最后一个子元素E;
E:only-child { sRules } 匹配父元素仅有的一个子元素E。
E:nth-child(n) { sRules } 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
E:nth-last-child(n) { sRules } 匹配父元素的倒数第n个子元素E;
E:first-of-type {sRules } 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type { sRules } 匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type { sRules } 匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n) { sRules } 匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n) { sRules } 匹配同类型中的倒数第n个同级兄弟元素E。
E:empty { sRules } 匹配没有任何子元素(包括text节点)的元素E。
9、BFC:( Box、Formatting Context)
定义：--“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干
BFC布局规则：
1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时，浮动元素也参与计算
二、哪些元素会生成BFC?
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
小技巧
/*设置字体抗锯齿*/
-webkit-font-smoothing:antialiased;
/*清除浮动代码1*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
.floatfix{
*zoom:1;
}
.floatfix:after{content:"";display:table;clear:both;}
//css3部分
1、tansform(变换)
-webkit-perspective:800px;/*定义 3D 元素距视图的距离, perspective 属性时，其子元素会获得透视效果，而不是元素本身。*/
-webkit-transform-style:preserve-3d; /*子元素将保留其 3D 位置。*/
-webkit-backface-visibility:hidden; /*定义当元素不面向屏幕时不可见*/
none：无转换
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轴的(垂直方向)扭曲
2、transition：(过渡)
[ transition-property ]：检索或设置对象中的参与过渡的属性
[ transition-duration ]：检索或设置对象过渡的持续时间
[ transition-timing-function ]：检索或设置对象中过渡的动画类型
[ transition-delay ]：检索或设置对象延迟过渡的时间
缩写：transition:all .5s ease-in .1s;
