CSS > overflow: hidden

This css property is so magic:

1. When a container contains only float elements, it'll collapse as we all know. 

Normally, we would add a

element with "clear: both;" to fix it(bad) or use div:after with 

"clear: both;"(better). 

Other than these solutions, we can simply add "overflow: hidden;" to the container and problem solved!

2. When a

is added after a float element, the div's width will be 100% cause float element is out of the normal flow.

If you want the div to be exactly put after the float element, add "overflow: hidden;" to the div.

So the basic idea here is that "overflow: hidden;" will create a new BFC(Blocking formatted Content).

HTML5:

NEVER miss the tag, it'll cause you really painful troubles. 

One of these that I ran into today is that the jquery $(window).height() returns a value exactly the same with $(document).height(). It almost killed me. Just a warning here, never forget that!!!

CSS: animation

There're basically 4 types of animation that modern browsers can do cheaply: position, scale, rotate and opacity.

position -> transform: translate(npx, npx);
scale -> transform: scale(n);
rotate -> rotate: rotate(ndeg);
opacity -> opacity: 0...1;

The process a website is loaded:

1. Function call;
2. Recalculate style;
3. Layout: generate geometry and position;
4. Paint: fill out the pixels for each elements into layers;
5. Composite Layers: draw layers out to the screen;

Position, scale, rotate and opacity only change properties that affect compositing stage, which makes them cheap.

And Chrome, Firefox, Safari and Opera all hardware accelerate transforms and opacity.

This is a good reference to find out which exact stage a css property affects:

http://goo.gl/lPVJY6

Opacity must be only one in the layer in order not to change background of others. Blink and Webkit browsers will automatically create a layer for opacity changes, but translateZ(0) and translate3d(0, 0, 0) are also used to create a new layer manually.

As to change position, setting left and top directly will change layout, so remember to use translate.

HTML: anchor with id attribute

This might not be news for you guys, but I actually just heard that today. 

By adding "#element" at the tail of the url, the window will scroll to the element .

CSS: triangle

Recently, I'm styling a chatroom and I want to wrap messages with a bubble frame. Basically what I need is a solid border with some triangles.

Normally there are 2 ways of making a triangle in css: border and linear-gradient.

I created two jsfiddle files to show that:

Border:
http://jsfiddle.net/quiz1991/f8777/2/

Linear-gradient:
http://jsfiddle.net/quiz1991/3um3L/

Border version is easier with less calculation than Linear-gradient version(especially when u use weird degrees other than the common 30, 45, 60, 90 in linear-gradient), but less flexiblity.

PS: attached is the bubble I created:
http://jsfiddle.net/quiz1991/3JL5g/1
Using absolute position is kinda risky, but since it's related to the black triangle, this solution is way better than use both :after and :before and absolute position to "draw" both those triangles as showed in the above fiddle file(the third li element).

CSS: collapse

First, we know that vertical margin collapse automatically. For example: 
(Hint: do not use inline style)
The above code will result a margin of 20px rather than 30px between div and p.

Second, we can set border-collapse: collapse; to table element, which will collapse the interleaving space of table cells. border-collapse: seperate; will do the opposite.

What if we want collapse margin even border of any two adjacent elements? Just set the according margin of the first element to a negative value. It's amazing and works good. Try it!

CSS > margin: 0 auto

You may have ever wondered why there're float: left; and float: right; but no float: center;, there's actually a easy way to center an element: margin: 0 auto;, which will automatically counts margin-left and margin-right according to parent's width while margin-top and margin-bottom remain 0.

Similarly, if you want to center the element vertically too, just set margin: auto auto;.