The way to the advanced CSS

The following main reference http://www.cnblogs.com/wangfupeng1988/tag/css know how much/

CSS Step-by-Step notes:

first, Learning CSS Three breakthroughs

1. How the browser loads and parses the 5 sources of css--css;

How 2.CSS and HTML are combined-selectors;

3.CSS can control the display Mode-box mode, floating, positioning, background, font, etc.;

The following separate elaboration:

1. How the browser loads and parses the CSS

(1) Browser Default Style sheet

html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, u l, center,dir, hr, menu, pre{Display:Block}/*the list element above is displayed by default in a block, not displayed in the inline element, which is for the HTML4 version, and some elements are discarded in XHTML1*/Li{Display:List-item}/*The default appears as a list*/Head{Display:None}/*not displayed by default*/Table{Display:Table}/*The default is table display*/TR{Display:Table-row}/*Default to table row display*/thead{Display:Table-header-group}/*group display by default for table headers*/tbody{Display:Table-row-group}/*group display by default for table rows*/tfoot{Display:Table-footer-group}/*default to group display at bottom of table*/Col{Display:Table-column}/*The default is the table column display*/Colgroup{Display:Table-column-group}/*group display by default for table columns*/td, th{Display:Table-cell; }/*The default is cell display*/caption{Display:table-caption}/*default to table header display*/th{Font-weight:Bolder;text-align:Center}/*the default is the table title display, rendering Bold Center State*/caption{text-align:Center}/*the default is the table title display, which renders the center state*/Body{margin:8px;Line-height:1.12}H1{font-size:2em;margin:. 67em 0}H2{font-size:1.5em;margin:. 75em 0}H3{font-size:1.17em;margin:. 83em 0}h4, p, blockquote, ul, fieldset, form, ol, dl, dir, Menu{margin:1.12em 0}h5{font-size:. 83em;margin:1.5em 0}h6{font-size:. 75em;margin:1.67em 0}h1, h2, h3, h4, h5, h6, b,strong{Font-weight:Bolder}blockquote{Margin-left:40px;Margin-right:40px}i, cite, em,var, address{Font-style:Italic}pre, tt, code, kbd, samp{font-family:monospace}Pre{White-space:Pre}button, textarea, input, object, Select{Display:Inline-block; }Big{font-size:1.17em}small, sub, sup{font-size:. 83em}Sub{vertical-align:Sub}/*define sub Elements default to subscript display*/sup{vertical-align:Super}/*define sub elements default to superscript display*/Table{border-spacing:2px; }thead, tbody, tfoot{vertical-align:Middle}/*define header, principal table, table pin element default to vertical alignment*/td, th{vertical-align:Inherit}/*define cells, column headings default to vertical to Zimmer think inheritance*/s, strike, del{text-decoration:Line-through}/*defining these elements defaults to strikethrough display*/HR{Border:1px inset}/*defines a 3D concave edge effect with a split line default of 1px wide*/ol, ul, dir, menu, DD{Margin-left:40px}ol{List-style-type:decimal}OL ul, UL ol, ul ul, ol ol{Margin-top:0;Margin-bottom:0}u, ins{text-decoration:Underline}Br:before{content:"A"}/*defines the Pseudo-object content style for wrapped elements*/: Before,: after{White-space:Pre-line}/*default style for defining Pseudo-object space characters*/Center{text-align:Center}abbr, Acronym{font-variant:Small-caps;letter-spacing:0.1em}: Link,: visited{text-decoration:Underline}: Focus{Outline:Thin dotted invert}/*Begin bidirectionality settings ( don't change)*/bdo[dir= "ltr"]{direction:Ltr;Unicode-bidi:Bidi-override}/*defines a BDO element the default text read-write display order when its property is dir= "ltr"*/bdo[dir= "rtl"]{direction:RTL;Unicode-bidi:Bidi-override}/*defines a BDO element the default text read-write display order when its property is dir= "rtl"*/*[dir= "ltr"]{direction:Ltr;Unicode-bidi:Embed}/*defines the default text read-write display order for any element when its property is dir= "ltr"*/*[dir= "rtl"]{direction:RTL;Unicode-bidi:Embed}/*defines the default text read-write display order for any element when its property is dir= "rtl"*/@media Print{/*define the default plot style for headings and lists*/H1 {page-break-before: always}h1, h2, h3, h4, h5, h6{Page-break-after:Avoid}ul, ol, DL{Page-break-before:Avoid}}

Browser Default Style

(2) User style sheet (not commonly used)

(3) <link> referenced css file

(4) style code written in <style>

(5) style code written in <a style= ' >

2. Frequently asked Questions:

(1) different Browser default styles are inconsistent

Workaround: * {margin:0; padding:0;}

(2) Stacking Errors

First you need to know the stacking rules:

The browser will integrate the fragmented into a whole, the browser will let the latter cover the former; special case--! Imporment (maximum execution, back cascade does not affect it)

The demo is as Follows:

3. Comparison of differences

(1) Div {display:block} (default), table{display:table}, td,th{display:table-cell}

A. The div width is the same as the parent container, and the table width depends on the Content-that is, the table is "wrapped";

B. Table-cell usage examples:

Use table-cell, like table as long as the layout, the effect and table do the effect is identical;

The way to the advanced CSS