html5 css3知识点,CSS3主要知识点总结+HTML5新标签(图文版).docx

总结+HTML5新增标签

目录：

1、CSS 属性编写顺序

2、CSS3属性(内核前缀)

3、position相对/绝对定位

4、overflow：scroll等的区别

5、display属性应用

6、盒模型计算方法和Bug

7、CSS3新增加的结构标签

8、蒙版，变形，过渡，动画等CSS3效果

1、显示属性，自身属性，文本属性

推荐样式编写顺序? ??1 显示属性 ：display，list-style，position，float，clear [注意按照横着的顺序]

??? 2 自身属性(合模型)：width，height，margin，padding，border，background(第3点)??? 3 背景：background??? 4 行高：line-height??? 5 文本属性：color,font，text-decoration，text-align，vertical-align，white-space，content??? 6 其他 cursor/z-index/zoom??? 7 css3属性：trandsform/transition/animation/box-shadow/border-radius??? 8 链接的样式请严格按照如下顺序添加：???? ?a:link-->a:visited-->a:hover-->a:active(LoVeHAte)

* 书写的CSS代码的时候请注意按照显示 自身 文本的书写顺序来书写！

分享2014-4-1 HTML5上课笔记

2、CSS3属性(内核前缀)

Mozilla 内核 ? css前缀-moz;?

WebKit ?内核 ? css前缀-webkit ;(谷歌已换用blink内核)

Opera ? 内核 ? css前缀 -o ; ? ?(欧朋已换用blink内核)

Trident 内核 ? css前缀 -ms ;?

CSS3新属性：

1)边框

① border-colors ?

相关属性?border-top-colors ?border-right-colors ?border-bottom-colors ?border-left-colors?

? ?

② border-image ?：

stretch 拉伸方式来填充边框背景图?|?

repeat 平铺 图片碰到边界时超出截断 |?

round 平铺，图片会工具边框的尺寸动态调整图片大小直至刚 好铺满整个边框

? ?

③ border-radius ?相关属性??border-radius: 1-4 length | % / 1

? ?border-radius数值为合模型的一半就变成圆 ，记住：不是相对于合模型的width(如：965x1611)，

? ? 而是整个框才是

? ? ?

结果就显示的不是正圆，所以border-radius:?300px; 才能显示正圆，加上border的值

? ? ? ??

? ? ? ? ? ??

'/'前面表示水平方向，后面表示垂直方向。每个方向都可以用1~4个值，缩写的规则遵循“左上开始，

?顺时针旋转/?只能写一个?

2)阴影

1.文本阴影 text-shadow(不需要判断浏览器)

? ??text-shadow:2px 3px 2px #000;

文字阴影的结构是按照以下顺序：X--偏移，Y--偏移，模糊，和颜色;text-shadow:-2px -3px 2px rgba(0, 118, 160, .25);设置为负值，X -偏移阴影转移到左侧。设置为