Sam Samjin
Samjin
/ CSS tricks
Last active
July 5, 2016 06:38
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Inline-block | |
| 1. For inline-block for ie8 to work, <!DOCTYPE html> has to be declared, as well as <meta http-equiv="X-UA-Compatible" content="IE=edge">for correct rendering mode. Has to be first loading element in head. | |
| 2. inline-block may cause width problem. Use max-width: 100% or inherit to fix. | |
| 3. Try use *display: inline; *zoom:1; or float: left/right(works same as zoom), because ie8 treat inline-block as block element in cerntain condition. This supports ie6+ | |
| 4. inline-block may stack or overlap on each other even they are in same line, to fix it use margin-right: 1px if possible, otherwise, use #3 tip above | |
| 5. Align to bottom: Inline or inline-block elements can be aligned to the bottom of block level elements if the line-height of the parent/block element is greater than that of the inline element.* | |
| 6. Using 'vertical-align: baseline' would stack inline-block element instead of align them. | |
| Float and img width | |
| .float > img, If img has max-width: 100% in IE8, it will be 0 width. image won't be seen. |
NewerOlder