[翻译]Flexbox完全手册

原文地址

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

译文不一定与原文内容完全相符,有我对其中的一些理解,但不会有太大的出入。

引言

Flexbox是一种更高效更灵活的布局方式,它可以让一些元素在一个容器里很容易的实现各种对齐以及控制这些元素之间的距离,即使这些元素的大小不固定(这也是它为什么叫flex的原因)。

其实Flex布局的主要思想是可以让容器去改变子元素的宽度、高度、顺序以及它们之间的距离等等(当然,这种布局方式针对不同的设备,不同分辨率都是起作用的)。Flex盒子会根据有效的空间去扩展或收缩元素。

比较重要的一点是,…

jQuery中解绑匿名函数

解除事件绑定

给一个元素绑定事件后,再解除绑定,是一个比较常见的操作。

对于有名字的函数,这个操作在jQuery里很简单:

function doAlert(){
  alert("fire!");
}
var doc = $(document);
doc.on("click",doAlert);
doc.off("click",doAlert);

点击查看…

jQuery中的事件委托

事件委托

例如有一个文章列表:

<ul> class="arcList"
  <li><a href="#">#1</a></li>
  <li><a href="##">#2</a></li> 
  <li><a href="###">#3</a></li> 
  <li><a href="####">#4</a></li>
  <li><a href="#####">#5</a></li>

CSS3自定义checkbox,radio表单元素样式

表单样式

在写表单样式的时候是比较烦人的,因为各浏览器下的效果都不一样,所以在以前都会使用图片来进行解决,并且很多时候还需要JS的辅助。当然,那是为了兼容所有浏览器,但我们如果只需要兼容一些高级浏览器或者只需要考虑移动端的话,则不需要想这么多,因为CSS3是如此强大。

我想说什么呢?说不清楚只好先上demo了:

See the Pen tHyLK by blwoosky (@blwoosky) on CodePen

Sass嵌套问题

Sass嵌套所带来的问题

CSS是如何渲染的一篇中,我们晓得CSS是从右向左进行渲染的,那么我们在写SASS时就需要格外注意嵌套问题了。因为嵌套越多,最终生成的CSS选择器就会越来越长。

例如:

ul{
	li{
		a{
			i{
				
			}
		}
	}
}

那么,使用SASS编译后会得出:…