Samjin/CSS tricks

## CSS tricks
1. Height and max-height at 100%;

2. HTML may need 100% to expand all the way to viewport height(browser height), because viewport is the hidden container of <html>;
IF a child want to use 100% of container's height, then you may need height: 1px to container if the container
doesn't have height property but a min-height. http://jsfiddle.net/aUDnn/1/?utm_source=website&utm_medium=embed&utm_campaign=aUDnn

3. > *:target {} // this might be a good way for animation.

4. What :nth-child(an+b) does is it divides the container’s children into a elements (the last group taking the remainder),
and then selects the bth element of each group. So, li:nth-child(3n+1) will divide the list items into 3 groups, put the
remainder items in a fourth group (if the number of items is not divisible by 3), and then it will match the first item in each group.

5. :nth-child() is also similar to :nth-of-type(), except that the latter is more specific. It selects the elements based on the given formula only if the element is of a certain type.

6. equal columns height: https://css-tricks.com/fluid-width-equal-height-columns/

7. word-wrap: break-word; (only 1 value to break word)
   word-break break-all / break-word (break-word is same as CSS3 overflow-wrap: break-word;)
   white-space: pre-wrap;
	1. Height and max-height at 100%;

	2. HTML may need 100% to expand all the way to viewport height(browser height), because viewport is the hidden container of <html>;
	IF a child want to use 100% of container's height, then you may need height: 1px to container if the container
	doesn't have height property but a min-height. http://jsfiddle.net/aUDnn/1/?utm_source=website&utm_medium=embed&utm_campaign=aUDnn

	3. > *:target {} // this might be a good way for animation.

	4. What :nth-child(an+b) does is it divides the container’s children into a elements (the last group taking the remainder),
	and then selects the bth element of each group. So, li:nth-child(3n+1) will divide the list items into 3 groups, put the
	remainder items in a fourth group (if the number of items is not divisible by 3), and then it will match the first item in each group.

	5. :nth-child() is also similar to :nth-of-type(), except that the latter is more specific. It selects the elements based on the given formula only if the element is of a certain type.

	6. equal columns height: https://css-tricks.com/fluid-width-equal-height-columns/

	7. word-wrap: break-word; (only 1 value to break word)
	word-break break-all / break-word (break-word is same as CSS3 overflow-wrap: break-word;)
	white-space: pre-wrap;