CSS's key knowledge

One: Font property settings

1: Font settings: Divided into Chinese font settings and English font settings. There are five main types of English fonts: serif fonts, san-serif fonts, monospace fonts (such as wide body), cursive fonts (cursive), fantasy fonts (fantasy body)

The usage rate of English fonts under each window platform: www.cssfontstack.com. (also known as web-safe fonts)

Common Chinese fonts: Www.aoao.org.cn/blog/2008/03/font-chinese

2:font-famaily, Font-size, Font-style, font-weight all have inheritance

3:font shorthand note, must write on the font-size, font-famaily attributes, and font-size must be in front, if you add Font-style, must be in front of the font-size, remember the non-exchangeable order.

Two: Text property settings

1: Text literal has a default size of 16px.

2: Pay attention to the difference between letter-spacing and word-spacing. Letter-spacing the spacing between characters (Chinese characters are also counted). Word-spacing refers to the spacing between words, separated by spaces.

3: The most important point is also the most easily confused point. Line-height set the row height. The default row height is 22px,22px=16px+3px+3px. That is, the default text size plus the text up and down each 3px spacing, this 3px system proportionally, change the font size

can cause change. This property is often used for vertical alignment of text, and if there is only one line of text, you only need to set the height of the line to the altitude of the area, which results in vertical centering.

4:text-align and Vertical-align properties. Horizontal alignment is simple. Speaking of vertical-align (vertical alignment property), we need to talk about 5 lines. It's almost like we write English words. The first is the baseline baseline, which corresponds to the bottom line where we start writing words. The second one is

Lines are the bottom line of some lowercase letters such as y,g and so on. The third one refers to the top line of some lowercase letters o,c,e and so on, and the fourth is the top line for the uppercase lines such as g,h and so on, and the last one is the top line of the lowercase letter H.

Vertical-align default value is baseline, once set text-top corresponds to fourth line, Text-buttom corresponds to the second line, center corresponds to the center of the baseline and the third line.

Three: Box model

1: Learn Web technology, be sure to learn how to look at the box model. The box is divided into 4 layers, the innermost layer is called the filling layer, the main content is placed, the second layer is the padding padding, the third layer is the border border, and the fourth layer is margin margin.

Box-sizing mainly sets two values, respectively, Content-box,border-box, the default is Content-box. Once changed to Border-box, this causes the size within the bounding box not to change, and once the Padding property is changed, it will only cause the height and width of the fill layer to change.

2: Vertical margin Folding problem: refers to the two adjacent sibling elements each set the margin, the margin between them will not accumulate, but the selection will overlap.

Four: Display Properties

1: When the value is inline, changing the height and width does not cause a change (except for the image), adding margins is not valid, you can write multiple lines in one line. Often used in navigation bars.

2: When the value is block, just the opposite of inline, it is an element that occupies a row of space, regardless of the content.

3: When the value is Inline-block, it combines the advantages of the above two kinds of values. You can change the height and width to write in one line.

3: When the value is none, the content and contents of the size of the collection, you can achieve the hidden effect.

V: layout of CSS

The 1:float property. The arrangement of the upper and lower ranks is mainly changed to left and right. But one big drawback is that it's out of the control of the parent element. For example, there are three P elements in <div>, once all set to float, it will cause the div to lose height, equivalent to failure.

2: Solution to the disadvantages of float: 1: Add the Overflow:hidden property to the parent element

2: Let the parent element also float up

3: Purge method; (typically write clear:both in parent element to clear the effect of left float and right float)

4: Add pseudo-elements (generally defined as class attributes): Clearfix::after{content: "."; clear:both; Display:block; visibility:hiddle; height:0}

Positioning of 3:CSS (and its importance)

Common four values (static,relative,absolute,fixed)

Static: A non-anchored element, which is the default value for all element position. If two areas overlap, you can use the Z-index property, which is the proposed z-axis, facing with us, if you want to see the entire range of an area, you only need to set the Z-index value a bit larger.

Relative: Relative positioning element (using offset setting)

Absolute: Absolute positioning Element (it is the relative closest relative positioning of the parent element as a reference)

Fixed: Fixing elements, in fact, similar to absolute, the main difference is the browser perspective, that is, sliding down, he will be fixed in the same position, will always see.

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

Key knowledge of CSS