The summary of the--CSS3 of the front-end development face

http://www.jianshu.com/p/f60b619aa52b

Related knowledge points

Layout, float, box model, elasticity and model, selector priority, center positioning, compatibility, hack ... Topics & Answers How to understand the CSS box model.

Each HTML element is a rectangular box.
(1) There are two kinds of box models: IE box model, Standard Model of the box, and the content of IE contains border and pading.
(2) The standard box model contains: content, padding (padding), boundary (margin), border (border).

The difference between link and @import.

(1) Link is an XHTML label, and @import is provided by CSS.
(2) when the page is loaded, link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded.
(3) import only in IE more than 5 to recognize, and link is XHTML tags, no compatibility issues.
(4) Link way style weight is higher than @import weight.
(5) The difference between using the DOM to control the style. When you use JavaScript to control the DOM to change the style, you can only use the link tag, because @import is not a DOM control.

What CSS selectors are. Which properties can be inherited. How the priority algorithm is computed. What new pseudo classes are in CSS 3.

ID selector (# myID)
class selector (. myclassname)
Tag Selector (Div, H1, p)
adjacent selector (H1 + P) Child selector (
ul < li)
descendant selector (Li a)
Wildcard selector (*)
property selector (A[rel = "external"])
pseudo class selector (a:hover, Li:nth-child)
inheritable: font-size font-family color, UL L I DL-DD DT;
Not inheritable: Border padding margin width height;
The proximity principle, which is the closest to the style definition, and the load style to the last loaded position.
priority is:
     !important >  id > Class > tag  
     important higher than inline priority
CSS3 added pseudo class example:
P: First-of-type selects each <p> element of the first <p> element that belongs to its parent element.
p:last-of-type  Selects each <p> element of the last <p> element that belongs to its parent element.
p:only-of-type  Selects each <p> element that belongs to the unique <p> element of its parent element.
p:only-child    Selects each <p> element that belongs to the unique child element of its parent element.
P:nth-child (2)  selects each <p> element that belongs to the second child element of its parent element.
: Enabled,:d isabled controls the disabled state of the form control.
: The checked  radio box or check box is selected.

How to center a div and how to center a floating element.
Set a width for the Div, and then add the margin:0 Auto property

  div{
      width:200px;
      margin:0 Auto;
   }

How to center a floating element
Determine the width of the container, such as width 500, height 300 layer, set the outer margin of the layer

   . div { 
    width:500px; height:300px;//height can be set without
    Margin: -150px 0 0-250px;
    Position:relative, relative positioning
    background-color:pink;//convenient to see the effect
    left:50%;
    top:50%;
  }

What are the compatibility of browsers that you frequently encounter? The reason, the solution is what.

(1) Png24 for the picture in the IE6 browser on the background, the solution is made of PNG8.
(2) browser default margin and padding are different, the solution is to add a global *{margin:0;padding:0;} To unify.
(3) IE6 Bilateral distance BUG: block attribute label float, and there is rampant margin case, in IE 6 display margin than set the larger.
(4) floating IE generated by the bilateral distance problem: block-level elements are added display:inline, inline elements block-level elements display:inline followed by display:table.
        . bb{
         background-color: #f1ee18;        * * All identification
        /background-color: #00deff \9;        /*IE6, 7, 8 identification * *
        +background-color: #a200ff;        /*IE6, 7 identification * *
        _background-color: #1e0bd1;        /*IE6 identification */
        }

Common hack skills:

(1) IE, you can use the method to get the general properties to obtain custom attributes, or you can use GetAttribute () derived from the definition of properties,
(2) Firefox, can only use getattribute () derived from the definition of attributes. Workaround: The unification is obtained from the defined attribute through GetAttribute ().
(3) IE, the even object has x,y properties, but there is no Pagex,pagey property;
(4) Firefox, the event object has pagex,pagey properties, but no x,y attribute. The workaround is a conditional comment, with the disadvantage that additional HTTP requests may be added to the IE browser.
(5) Chrome Chinese interface under the default will be less than 12px of text force according to 12px display, can be-webkit-text-size-adjust:none by adding CSS properties;
(6) After hyperlink access hover style does not appear the clicked-visited hyperlink style no longer has hover and active, and the workaround is to change the order of the CSS properties:
L-v-h-a:  a:link {} a:visited {} a:hover {} a:active {}

List display values to illustrate their role. In the position value, the relative and absolute locate the origin.

Display Value: The
block is displayed as an element of type blocks.
None Default value. Displayed as inline element types.
Inline-block is displayed like inline elements, but its contents are displayed like block-type elements.
List-item is displayed as a block type element and adds a style list tag.
relative and absolute position origin:
Absolute: Generates an absolutely positioned element that is positioned relative to the first parent element other than static positioning.
relative: Generates a relatively positioned element that is positioned relative to its normal position.

Why do you want to initialize CSS styles?

Because of browser compatibility issues, different browsers for some of the default values of some tags are different, if not on the CSS initialization will often appear between the browser page display differences.
Of course, the initialization style will have a certain impact on the SEO, but the fish and bear cake can not be both, but to minimize the impact of the case initialization.  The simplest initialization method is: * {padding:0; margin:0} (I do not recommend this) Taobao style initialization: Body, H1, H2, H3, H4, H5, H6, HR, P, blockquote, DL, DT, DD,
  UL, OL, Li, Pre, form, fieldset, Legend, button, input, textarea, TH, TD {Margin:0; padding:0;}
  Body, button, input, select, textarea {font:12px/1.5tahoma, arial, \5b8b\4f53}
  H1, H2, H3, H4, H5, h6{font-size:100%;
  Address, cite, DFN, EM, var {font-style:normal;}
  Code, KBD, Pre, samp {font-family:couriernew, Courier, Monospace;}
  Small{font-size:12px;} ul, ol {List-style:none;}
  a {text-decoration:none;}
  a:hover {text-decoration:underline;}
  sup {vertical-align:text-top;}
  sub{Vertical-align:text-bottom;}
  Legend {color: #000;}
  FieldSet, img {border:0;}
  button, input, select, textarea {font-size:100%} Table {border-collapse:collapse; border-spacing:0;}

CSS is how to define the weight rules.

The following is the weight of the rule: the weight of the label for the 1,class weight of 10,id weight of 100, the following example is to demonstrate the weight of various definitions:/
* weights for the 1*/
div{
}/* Weights
for 10*/
. class1{
}
/* Weights are 100*/
#id1 {
}/* weights
are 100+1=101*/
#id1 div{
}/
* weights are 10+1=11*/
. Class1 div{
}
/* weight is 10+10+1=21*/
. Class1. Class2 div{
} The 
last defined style works if the weights are the same, but this should be avoided.

How to understand the separation between performance and content.

The performance is separated from the structure simply by saying that only the LABEL element performance in HTML is controlled by the CSS file entirely.

How to define a container with a height of 1px.

div{
heigh:1px; 
width:10px; 
Background: #000; 
Overflow:hidden
} 
IE 6 This problem is caused by the default row height, Overflow:hidden | zoom:0.08 | line-height:1px This can also be resolved.

How to solve the 3px problem of IE 6.

_zoom:1;  Margin-left:value; _margin-left:value-3px;

Firefox text can not open the height of the container, how to solve.

Clear float. clear{Clear:both; height:0px; overflow:hidden;}

How can you make layers appear above flash?

The solution is to set the transparency properties for Flash
<param name= "wmode" value= "Transparent"/> or <param name= "wmode" value= "opaque"/>

Cursor:hand in FF does not show small hands, how to solve.

Cursor pointer;

In IE, the content will be adaptive height, and FF will not be adaptive height, how to do.

Add a layer to the layer to be adaptive to the height, the style is
. clear{clear:both;font-size:0px;height:1px},
so there is a small problem, the height will be more than one pixel. There is also a workaround for adding a pseudo class to the current layer.
#test: After {
  content: ".";
  Display:block;
  height:0;
  Clear:both;
  Visibility:hidden;
}

What is the principle of creating a triangle with pure CSS.

Hide the top, left and right three edges (color set to transparent)
#demo {
width:0;
height:0;
border-width:20px;
Border-style:solid;
Border-color:transparent transparent red transparent;
}

How to design a full screen "goods" word layout.

Simple way: The
above div wide 100%, the
following two div respectively wide 50%,
with float or inline make it do not wrap.

How to get Chrome to support text that is less than 12px.

Body{-webkit-text-size-adjust:none}

What are the three layers of the front page, respectively? What the role is.

The most accurate web design idea is to divide the Web page into three levels, namely: structure layer, presentation layer, behavior layer. The
structure layer of a Web page (structural layer) is created by markup languages such as HTML or XHTML. tags, which are the words that appear in angle brackets, describe the semantic meaning of the content of the Web page, but these tags do not contain any information about how to display the content. For example, the P tag expresses such a semantics: "This is a text segment." The
presentation layer of the Web page (presentation layer) is created by CSS. CSS answers the question "How to display the content". The
behavior layer of the Web page (behavior layer) answers the question "How content should respond to events." This is the domain of JavaScript language and Dom dominance.

:: Before and: What is the difference between a double colon and a single colon in after? Explain the effect of these 2 pseudo elements.

Single colon (:) for CSS3 pseudo class, double colon (: