CSS Knowledge points

1. Text Display Line

Text-overflow:ellipsis;　　White-space:nowrap; Overflow:hidden;

The Text-overflow property is only annotations, and whether the ellipsis is displayed when text overflows. No other style attribute definitions are available. We want the effect of an ellipsis to occur when the overflow is implemented. You must also define: Force text to appear on one line (white-space:nowrap) and overflow content to be hidden (Overflow:hidden). This is the only way to achieve an overflow text display ellipsis effect.
First, only define text-overflow:ellipsis; The ellipsis effect cannot be achieved.
Second, the definition of text-overflow:ellipsis; White-space:nowrap; Also cannot achieve the ellipsis effect
Third, simultaneous application: text-overflow:ellipsis; White-space:nowrap; Overflow:hidden; You can achieve the desired overflow text display ellipsis effect:

Text-overflow

Normal: The default processing mode.
Pre: Displays preformatted text in equal-width font, does not combine white space between text, and does not wrap when text is out of bounds. can refer to the Pre object
NoWrap: Forces the display of all text within the same line, merging extra white space between text until the text ends or encounters a BR object.
Pre-wrap: Displays preformatted text in equal-width font, does not combine whitespace between text, and wraps when text touches the boundary.
Pre-line: Preserves text wrapping, does not preserve whitespace between text, and wraps when text touches the boundary.
Clip: Omit tags (...) are not displayed when text overflows within objects. ), instead of cutting out the overflow part.

Ellipsis: Displays ellipsis (...) when text inside an object overflows. ）

2, text multi-line display

There is no good way to be compatible with low-version browsers.

<style>.demo{position:relative;word-break:break-all;/* Support IE,CHROME,FF does not support */word-wrap:"..."; Position:absolute;top:16px;right:-3px;background: #aaa;  //Background color is the same as the background color of the div}</style>   

<div class="Demo" >asdsdasdasdsdsdfffffffffffffffffffffffffff</div>

3, text forced line wrapping

word-break:break-all;/* Support IE,CHROME,FF not supported */WORD-WRAP:break-word;/* support ie,chrome,ff*/  

word-wrap: Sets or retrieves whether a line break occurs when the content exceeds the bounds of the specified container

Take value

Normal: Allows content to open or overflow the specified container boundary.

Break-word: The tolerance will wrap within the boundary. Break the word internally if needed

Word-break: To solve the problem of preventing continuous meaningless long characters in the page break layout, should use Break-all;

4. Arrows

Can be achieved through pictures, borders, fonts, etc. For small arrows implemented with border, you can set the transparency and background color of border on both sides.

<div class="Demo" ></div>

. demo{Display:inline-block;*display:inline;   //compatible with Ie6border-width:20px;border-style:solid dashed dashed dashed;border-color: #000 Transparent Transparent　　transparent;width:0;height:0; }

5. Clear Floating

What is clear float?

When an element defines a float, it itself is detached from the containing block. The phenomenon is that the inclusion block will not wrap the floating child elements;

Empty label mode:

. Clearfix{clear:both;}

<div class= "Clearfix" ></div>

BFC Way:

. Clearfix{*zoom:1;overflow:hidden;}

Pseudo element mode:

. Clearfix{*zoom:1;}

. Clearfix:after{display:block;clear:both;visibility:hidden;content: "/0020"; overflow:hidden;}

Empty label way: More than a blank div, code look really very uncomfortable;

BFC (Block formatting Context): Content will overflow

Pseudo element method: perfect

6. Disassembly and abbreviation of attribute values

Property: Background,padding,margin,font,border

All of the CSS attribute abbreviation rules are: upper right lower left, if 3 are: up, left, bottom, if 2 are: up and down, around

Write to open the case: Only one of the properties, integration overrides one of the properties;

The order in which attributes are placed in the font is strictly adhered to, Font:font-style font-weight font-size font-familiy; ( Note: font-size and font-family are required properties of the font, And font-size must be put in front of font-family)

7. Pseudo-class and pseudo-elements

Pseudo class

<ul>

<li>111</li>

<li>222</li>

<ul>

Select the first Li of UL, this is familiar with First-chid

In official documents pseudo-classes are described with classify, while pseudo-objects are used with create. From here we can see the difference:

A pseudo-object represents a sub-object of an element that, while logically present, does not actually exist in the document tree.
Like the first-line above, it doesn't really exist in the DOM. We often use: Before:after also belong to pseudo-object.

The pseudo-class is actually already present, such as the presence of Li in the DOM, and we want to select it to add a new category to an already existing object.

The fundamental difference is whether they create new elements (abstractions), and if you need to add new elements to identify them, even pseudo-elements, if you need to add categories to existing elements, are pseudo-classes.

Pseudo-class: Used to represent the dynamic state of some elements;

Pseudo-element: represents a child element of an element that, although logically present, does not actually exist in the DOM document;

CSS Selector Level 3 in order to distinguish between the two confusion, and deliberately separated by a colon:

　　　　A pseudo-class is represented by a colon: first-child

　　　　Pseudo-elements are represented by two colons:: First-line

To be compatible with the lower version, both pseudo-and pseudo-elements use a single colon.

Pseudo-Class: E:link,e:visited,e:hover,e:active,e:focus,e:first-child,e:last-child,e:nth-child (n), E:nth-last-chlid

Pseudo-object: e:first-letter,e:first-line,e:before,e:after,e:selection