css总结
1. placeholder是html5的新属性,仅支持html5的浏览器才支持placeholder,目前最新的firefox、chrome、safari以及ie10都支持,ie6到ie9都不支持。
2.兼容全浏览器的写法: div{ filter:alpha(opacity=50); } /* IE6-IE8 */ ,div{ opacity:.5; } /* 现代浏览器 */
3.适配:http://www.mahaixiang.cn/ydseo/1369.html
4.Png 透明图片,颜色很丰富,但是IE6不支持PNG-24透明
5.块元素:
1.独占一行
2.有宽高
3.display:block
4.块级元素一般可嵌套块级元素或行内元素
5.<form>只能包含块级元素
包括:<div>, <p>, <h1>, <form>, <ul> , <li>
6.行内元素:
1.共用一行
2.宽高auto*auto
3.dispaly:inline
4.不能定义自己的宽和高,可以通过行高line-height撑起来
包括:<span>, <a>, <label>, <input>, <img>, <strong> 和<em>
5.img 可以通过css改变宽高,
7.行内块级元素
1.共用一行
2.有宽高
3.display:inline-block
包括:form表单
8.热区 就是你指定图片的一个区域 点击那里可以跳转到指定页面
9.过渡动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width:100px; height:100px; background:red; transition-property:width; transition-duration:1s; transition-timing-function:linear; transition-delay:0s; /* Safari */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:0s; } div:hover { width:200px; } </style> </head> <body> <p><b>注意:</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p> <div></div> <p>鼠标移动到 div 元素上,查看过渡效果。</p> <p><b>注意:</b> 过渡效果需要等待两秒后才开始。</p> </body> </html>
10.自定义动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width:100px; height:100px; background:red; animation:myfirst 5s; -webkit-animation:myfirst 5s; /* Safari and Chrome */ } @keyframes myfirst { from {background:red;} to {background:yellow;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { from {background:red;} to {background:yellow;} } </style> </head> <body> <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p> <div></div> </body> </html>
11弹性布局:https://www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox/
1.可以让你告别浮动、完美实现垂直水平居中的新特性
2.Flexbox
布局的主体思想:根据浏览器的大小变化进行自动伸缩
3.弹性盒布局模型已经被主流的浏览器所支持。不过为了支持不同版本的浏览器,在使用时除了规范中定义的属性之外,还需要添加相应的浏览器前缀形式