1. Standard CSS box model? How is the box model different from the lower version of IE?

The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: margins, borders, padding, and actual content. Low version IE box model: Width = content width (Content +border+padding) + marginCopy the code

  • In the standard box model, width refers to the width of the content
<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> CSS box </title> </head> <style type="text/ CSS "> .content { width: 300px; height: 400px; border: 5px solid #242424; padding: 20px; background-color: #898989; } </style> <body> <div class="content" id="zwkkkk1"></div> </body> </html>Copy the code

  • In this picture, we find that the 300*400 we set appears in the innermost blue box. At the same time, we can find that in this box model, besides the content we set, there are margin, border and padding.

  • To properly set the width and height of elements in all browsers, you need to know how the box model works.

    And the 350 by 450 boxes that we saw in the test renderings,

    350 (width) = 300 (content) + 20 (padding) * 2 + 5 (border) * 2

    450 (height) = 400 (content) + 20 (padding) * 2 + 5 (border) * 2

The use of box – sizing

Box-sizing: content-box; box-sizing: border-boxCopy the code

  • Box-sizing: border-box can make a big difference if you add box-sizing: border-box style to the code above
  • The width is still 300px
  • In the IE box model, width represents the width of content+padding+border

2. What are CSS selectors? Which attributes can be inherited?

CSS selectors: 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 (*), attribute selector (A [rel="external"]), pseudo-class selector (A :hover, Li: nTH-child) Font-size, font-family, color non-inheritable style: border, padding, margin, width, height priority (nearest principle) :! important > [ id > class > tag ] ! Important has a higher priority than inlineCopy the code

3. How to calculate the CSS priority algorithm?

Element selector: 1 Class selector: 10 ID selector: 100 Element tag: 1000! The most important declaration has the highest style priority and will be evaluated if it conflicts. If the priority is the same, the style that appears last is selected. Inherited styles have the lowest priority.Copy the code