css/css3知识点

  Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架，并且支持响应式布局。一经推出后颇受欢迎，一直是GitHub上的热门开源项目。前端的核心是js.
> CSS知识点
Centering in CSS: A Complete Guide- https://css-tricks.com/centering-css-complete-guide/
CSS居中完全指南- http://blog.csdn.net/fungleo/article/details/50786305
CSS 幽灵元素方案垂直居中注意事项- http://blog.csdn.net/fungleo/article/details/77344476?ref=myread
8个超震撼的HTML5和纯CSS3动画源码- http://www.html5tricks.com/8-html5-pure-css3-animation.html
用CSS实现各种图片滤镜效果演示-http://www.webhek.com/post/image-effects-with-css.html
HTML+CSS- http://blog.csdn.net/yisuowushinian/article/category/1090482
css box-flex弹性布局使用测试实例页面- http://www.zhangxinxu.com/study/201012/css-box-flex-demo-1.html
css设置标签的水平与垂直居中，定位与弹性盒布局的的结合- http://blog.csdn.net/wulihuihui/article/details/52654220
你所不知道的 CSS 滤镜技巧与细节-http://geek.csdn.net/news/detail/241864
CSS布局奇淫技巧之–各种居中- http://www.jqhtml.com/8659.html  http://www.cnblogs.com/2050/p/3392803.html
CSS3滚动视差效果的制作技巧- http://www.webhek.com/post/parallax.html

-- CSS3圆角详解
CSS3圆角（border-radius）的用法- http://blog.csdn.net/enuola/article/details/9411749
div水平垂直居中的完美解决方案- http://www.jb51.net/css/28259.html
 设置img铺满屏幕宽度 html？

-- 编写CSS时应该注意：
  CSS选择符是从右到左进行匹配的。从右到左！所以，#nav li 我们以为这是一条很简单的规则，秒秒钟就能匹配到想要的元素，但是，但是，但是，是从右往左匹配啊，所以，会去找所有的li，然后再去确定它的父元素是不是#nav。，因此，写css的时候需要注意：
 1.dom深度尽量浅。
 2.减少inline javascript、css的数量。
 3.使用现代合法的css属性。
 4.不要为id选择器指定类名或是标签，因为id可以唯一确定一个元素。
 5.避免后代选择符，尽量使用子选择符。原因：子元素匹配符的概率要大于后代元素匹配符。后代选择符;#tp p{} 子选择符：#tp>p{}
 6.避免使用通配符，举一个例子，.mod .hd *{font-size:14px;} 根据匹配顺序,将首先匹配通配符,也就是说先匹配出通配符,然后匹配.hd（就是要对dom树上的所有节点进行遍历他的父级元素）,然后匹配.mod,这样的性能耗费可想而知.

-- 在CSS中实现”Wrapper“最好的方式：
  "Wrapper" vs "Container"，在编程语言中，container一词通常用来表示包含多个元素的结构，wrapper则表示对某单个对象进行包装，该对象可以提供多个功能，也会向它提供接口。

-- CSS中的继承：
  CSS预处理器的用处（你不必明白如何深度使用它，你只需要了解它们的用途以及如何帮助开发）；
  面向不同装置的CSS媒体查询以及写响应CSS；
  BootStrap(是一个框架，用于设计和页面上内容的布局，很多在线培训或者学校把重心放在教授Bootstrap上，实际上深入理解CSS的基础知识比特定的Bootstrap特征及方法更重要)；
  CSS的滥用：变得难于理解，难于维护,产生冗余，冗余很难定位和清除，难于理解，动一处而牵扯全局。

> css3模板
设备像素，设备独立像素，CSS像素- http://yunkus.com/physical-pixel-device-independent-pixels/?ref=myread
CSS框架- http://www.oschina.net/project/tag/310/css-framework
45个纯 CSS 实现的精美边框效果- http://www.cnblogs.com/lhb25/archive/2012/08/29/css-border-and-box-effect-a.html
CSS3环形特色表单 转圈切换表单焦点- http://geek.csdn.net/news/detail/197551?ref=myread

-- CSS3 display:flex box-flex和display:box有什么区别
前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。
后者是2009年的语法，已经过时，是需要加上对应前缀的。
display:box box-flex 是比较早期的 flex 布局用法吧，标准化里面没有了，display:flex 是标准的
所以兼容性的代码，大致如下    
{display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */  
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */   
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */   
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */}
box-flex的含义与作用：用来按比例分配父标签的宽度(或高度)空间。
#first_boy { box-flex: 2; }
#second_boy { box-flex: 1; }
#three_boy { box-flex: 1; }

在实际的浏览器测试中，display: flex 不能完全替代display: -webkit-box
display: box 使用可以参考http://www.html5rocks.com/en/tutorials/flexbox/quick/
display: flex 使用可以参考https://css-tricks.com/snippets/css/a-guide-to-flexbox/
兼容性的问题可以参考https://css-tricks.com/old-flexbox-and-new-flexbox/
Android UC浏览器只支持display: box语法。而iOS UC浏览器则支持两种方式
需要注意的是如果要使用line-clamp时需要用display:box;

-- CSS层模型
使用Flexible实现手淘H5页面的终端适配- http://web.jobbole.com/84285/
使用Flexible实现手淘H5页面的终端适配二- http://blog.csdn.net/xw505501936/article/details/51767408
 DIV重叠 CSS让DIV层叠、叠加- http://www.divcss5.com/shili/s587.shtml
CSS层模型- http://www.cnblogs.com/zhaoww/p/5839665.html
CSS定义了一组定位（positioning）属性来支持层布局模型。div css z-index层重叠顺序。
 -- 层模型有三种形式：
 1、绝对定位(position: absolute)
 2、相对定位(position: relative)
 3、固定定位(position: fixed)

-- 判断div（标签）是否隐藏。
判断div中内容是否为空，显示隐藏- http://blog.csdn.net/yangbobo1992/article/details/8062311
显示/隐藏DIV的技巧(visibility与display的差别)？
div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白:
　　style="visibility: none;"
　　document.getElementById("typediv1").style.visibility="hidden";//隐藏
　　document.getElementById("typediv1").style.visibility="visible";//显示
 
　　通过设置display属性可以使div隐藏后释放占用的页面空间，如下
　　style="display: none;"
　　document.getElementById("typediv1").style.display="none";//隐藏
　　document.getElementById("typediv1").style.display="";//显

8款强大的CSS3/HTML5动画及应用源码- http://geek.csdn.net/news/detail/199824?ref=myread
-- DIV悬浮在页面底部或头部
CSS:
.xuanfu{  
    left: 0;  
    position: fixed;  
    bottom: 0;//这里换成top:0;就悬浮在头部  
    width: 100%;  
    z-index: 100;  
} 
Html:
<div class="xuanfu">这里是要悬浮的内容</div>
-- 下载文件或图片  DIV悬浮页面底部
js下载图片到本地- http://blog.csdn.net/jingshui1234/article/details/48807983
HTML <a> download 属性,点击链接来下载图片- http://www.cnblogs.com/babywin/p/6088581.html
ajax请求不能下载文件- http://blog.csdn.net/fan510988896/article/details/71520390
HTML中的a标签实现点击下载- http://www.cnblogs.com/zhaoxiaokai/p/6295190.html
HTML 保存图片到本地- http://www.cnblogs.com/SWSHBON/p/5688204.html

-- 卡片式设计和 CSS3 实现的立体纸张折叠的效果
卡片式设计（h5）PersonInfoShow - https://github.com/1432468608/PersonInfoShow
卡片式设计（h5）PersonInfoShow - http://www.jianshu.com/p/4050f8ed6b1b#
利用css3做出立体折叠效果- http://blog.csdn.net/natalie86/article/details/44851971 , http://felixniklas.com/paperfold/
css获取屏幕高度、宽度- http://blog.csdn.net/wd4java/article/details/42173603

-- css3动画
css3常用动画+动画库,CSS动画的两大组成部分：transition和animation。
CSS3 动画- http://www.w3school.com.cn/css3/css3_animation.asp

-- animate.css，animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。
  查看演示：https://daneden.github.io/animate.css/ 
  github地址：https://github.com/daneden/animate.css

magic.css动画库查看演示：http://www.17sucai.com/pins/demoshow/10001
magic.css动画库：https://github.com/miniMAC/magic
hover.css动画库查看演示：http://ianlunn.github.io/Hover/  ;Effect.css
hover.css动画库：https://github.com/IanLunn/Hover 

7款纯CSS3实现的炫酷动画应用- http://www.html5tricks.com/7-pure-css3-animation.html
44个惊人的超炫CSS3动画演示(1)- http://developer.51cto.com/art/201106/272180.htm

> css
web前端开发分享 css,js入门篇- http://blog.csdn.net/qq_37810594/article/details/61416254
CSS学习: 编写CSS文件- http://www.cnblogs.com/niuniu1985/archive/2009/09/22/1571786.html