CSS基本笔记(CSS Memo)

1. Reasons to use CSS: DRY, Clean

Examles: 1.

This two way maybe will repeat numerous times, so the paragraph of code will be large. The best way is making a External sheet in the following way:

This will make your codes DRY(Don’t Repeat Yourself)

2.Cascade Order(something about the code priority)

 

 

3.Primary DOM selectors

Example:

4.Float <float: left/right/none;>

when we put pictures and paragraphs in a container, we could us Float to deal with their relation.

*Floated elements stack up to the parent edge, then move down to the next available edge. 

*Take care with elements that have differing heights-the first available edge isn’t always below.

 

Clearfix

 

5. Inheritance & Specificity

Override parent properties: nested selector

    0      ,0     ,0     ,0

inline style     #if ID       #of class   #of element

 

 6.BOX

Total box width = content width + padding width +border width

 

Box overflow:

↑when content beyond the container boundaries;

 

Positioning:<position: static/relative/absolute/fixed;>

 

Z-index:

↑Overlaping

Example:

In these case the Brown class should be above the Green class

 

7. Display Types:<display: block/inline/inline block;>

block:<div><p><ul><ol><li>

inline:<span><a><em><img>

 

8.Horizontal Centering

In block level:

in inline block level:

 

9. Image Cropping

Solutions:

Or we could