css重点

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标签<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）

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(<number>,<number>,<number>,<number>,<number>,<number>)：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate(<length>[, <length>])：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translateX(<length>)：指定对象X轴（水平方向）的平移
translateY(<length>)：指定对象Y轴（垂直方向）的平移
rotate(<angle>)：指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义
scale(<number>[, <number>])：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scaleX(<number>)：指定对象X轴的（水平方向）缩放
scaleY(<number>)：指定对象Y轴的（垂直方向）缩放
skew(<angle> [, <angle>])：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewX(<angle>)：指定对象X轴的（水平方向）扭曲
skewY(<angle>)：指定对象Y轴的（垂直方向）扭曲

2、transition：（过渡）
[ transition-property ]：检索或设置对象中的参与过渡的属性
[ transition-duration ]：检索或设置对象过渡的持续时间
[ transition-timing-function ]：检索或设置对象中过渡的动画类型
[ transition-delay ]：检索或设置对象延迟过渡的时间
缩写：transition:all .5s ease-in .1s;