html5 css3的要点,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标签

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;