What about the standard CSS box model? What’s different about the box model for the lower version of IE? (1) There are two kinds, IE box model and W3C box model; (2) Box model: content, padding, margin, border; (3) Area: The content of IE calculates the border and padding; What are the CSS selectors? Which attributes can be inherited?

  • Id selector (# myID) 2. Class selector (.myclassName) 3. Tag selector (div, H1, P) 4. Adjacent selector (H1 + P) 5. Child selector (UL > LI) 6. Descendant selector (Li A) 7. Wildcard selector (*) 8. Attribute selector (a[rel = “external”]) 9. Pseudoclass selector (A :hover, Li :nth-child)
  • Font size font family color, UL LI DL DD DT;
  • Non-inheritable style: border padding margin width height; How to calculate the CSS priority algorithm?
  • The nearest priority principle shall prevail if the style definition is the nearest in the case of the same weight;
  • The loading style is based on the last loaded location; The priority is:! Portant > id > class > tag portant
Example: p:first-of-type Selects each </p><p> element that belongs to the first <p> element of its parent element. P :last-of-type selects each </p><p> element belonging to the last </p><p> element of its parent element. P :only of type Selects each </p><p> element that belongs to the unique </p><p> element of its parent element. P :only-child Selects each </p><p> element that belongs to the only child of its parent element. P :nth-child(2) selects each </p><p> element that belongs to the second child of its parent. The :after appends content before an element. It can also be used to clear floats. :before Adds content after the element :enabled :disabled Controls the disabled status of form controls. : Checked check boxes or check boxes are selected. </p>Copy the code

### How to center div? How to center a floating element? How do I center an absolutely positioned div?

  • Give the div a width and add margin:0 auto
div{ width:200px; margin:0 auto; }
Copy the code
  • Center a floating element
Div {width:500px; width:500px; height:300px; // Margin: -150px 0 0-250px; position:relative; // background-color:pink; // left:50%; top:50%; }Copy the code
  • Center the absolutely positioned div
    position: absolute; 
    width: 1200px;
    background: none; 
    margin: 0 auto;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
Copy the code

What are the values of ###display? Explain their role.

Blocks are displayed as block type elements. None The default value. Display as inline element types. Inline-blocks are displayed like inline elements, but their contents are displayed like block-type elements. List-items are displayed as block type elements and add style list tags. The table element displays the display property as a block-level table. Inherit specifies that the display property should be inherited from the parent elementCopy the code

###position = relative and absolute

Absolute Generates an absolutely positioned element relative to the first parent element whose value is not static. Fixed (not supported by old IE) generates an absolutely positioned element, positioned relative to the browser window. Relative Generates an element that is positioned relative to its normal position. Static Default value. Without positioning, the element appears in the normal stream (ignoring the top, bottom, left, right Z-index declarations). Inherit specifies that the value of the position property be inherited from the parent element.Copy the code

What’s new with CSS3?

Added various CSS selectors (: Not (input) : All nodes whose class is not "input") border-radius:8px Multi-column Layout Shadow and Shadow\Reflect Text-shadow text render Transform added rotation, scaling, positioning, tilting, animation, Multi-background transform:\scale(0.85,0.90)\ Translate (0px,-30px)\ skew(-9deg,0deg)\Animation:Copy the code

### Please explain the Flexbox of CSS3 and the applicable scenarios.

.
Copy the code

What is the principle behind creating a triangle using pure CSS?

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

### How to design a full screen font layout?

Simple way: the div above is 100% wide, the div below is 50% wide, and then usefloatOr inline makes it non-newlineCopy the code

What are some common browser compatibilities? Why? What is the solution? Common hack skills?

  • The pNG24 bit image appears in the background of iE6, the solution is to make PNG8.
  • Margin and padding are different by default. Margin :0; margin:0; padding:0; } to unify.
  • IE6 double margin bug: After the block property tag float, margin is displayed in IE6 larger than the set margin. Float IE to generate double distance #box{float:left; width:10px; margin:0 0 0 100px; } In this case, IE will produce a distance of 20px. The solution is to add — _display:inline; Convert it to an inline property. (_ is a symbol recognized only by Internet Explorer 6) the gradual elimination of parts from the whole. First of all, the clever use of the “\9” mark, the IE viewer from all the situation out. Then, use “+” again to separate IE8 and IE7 and IE6, so that IE8 has been independently identified.
 css .bb{ 
       background-color:#f1ee18; /* All identified */
      .background-color:#00deff\9; /*IE6, 7, 8 recognize */
      +background-color:#a200ff; /*IE6, 7 recognition */
      _background-color:#1e0bd1; Identify * / / * IE6
 }
Copy the code
  • In Internet Explorer, you can obtain a custom attribute using the method of obtaining a general attribute or using getAttribute() to obtain a custom attribute. In Firefox, you can only use getAttribute() to obtain custom attributes. Solution: Use getAttribute() to obtain custom attributes.
  • In IE,even has x and y properties, but no pageX and pageY properties; In Firefox,event objects have pageX and pageY properties, but no x and y properties.
  • Solution :(conditional comment) the disadvantage is that additional HTTP requests may be added in Internet explorer.
  • In Chrome’s Chinese UI, text smaller than 12px will be forced to display at 12px by default, by adding the CSS property -webkit-text-size-adjust: None; To solve. Hover styles no longer hover or active after A hyperlink has been clicked. A :link {} a:visited {} a:hover {} a:active {} ### What’s the solution? The arrangement of the line boxes is affected by the spacing (carriage return \ space), etc. Since Spaces are also characters, these Spaces will also be styled and occupy space, so there will be spacing. If the character size is set to 0, there will be no Spaces. ### why CSS styles should be initialized.
  • Because of browser compatibility issues, different browsers have different default values for some tags. If CSS is not initialized, the page display will often be different between browsers. – Of course, initialization styles can have an impact on SEO, but you can’t have your cake and eat it, but try to initialize with minimal impact. The simplest way to initialize:
* {padding: 0; margin: 0; } (strongly not recommended) taobao style initialization code:Copy the code

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; }

What is the difference between the calculation of an absolute containing block and that of a normal flow?Either way, find the ancestor element whose closest position is not static, and then determine: Containing block is the smallest rectangle containing the padding box (excluding margin, border) of the first and last inline boxes generated by the element. 2. Otherwise, it consists of the padding box of the ancestor element. If neither can be found, it is initial containing block. Static (default)/relative: static(default)/relative: static(default)/relative: static(default)/relative: static(default)/relative: static(default) Its containing block is always the root element (HTML /body), and the root element is also initial containing block###CSS visibility property has a collapse value. What's the difference between different browsers?

Copy the code

.

### Position superimposed with display, margin collapse, overflow, float
Copy the code

.

### Understanding the BFC specification (block formatting context).(A concept from the W3C CSS 2.1 specification, it is a stand-alone container that determines how an element positions its content and how it relates and interacts with other elements.) A page is made up of boxes, and the type of the Box is determined by the element type and the display attribute. Different types of boxes are involved in different Formatting contexts, so elements inside the Box are rendered in different ways, that is, elements inside and outside the BFC do not affect each other.### CSS defined weightsHere are the rules for weights: tag weight is 1, class weight is 10, id weight is 100, the following example demonstrates the weight values of various definitions:Copy the code

Class1 {}/ the weight is 1/ div{}/ the weight is 10/. Class1 {}/ the weight is 100/ #id1{}/ the weight is 100+1=101/ # ID1 div{}/ the weight is 10+1=11/ .class1. Class2 div{} The last defined style will work if the weights are the same, but this should be avoided


Please explain why the float occurs and when the float needs to be cleared. The way to clear the float
Copy the code

.

### Mobile layout with media query?
Copy the code

.


### Use CSS preprocessor? Like that?
Copy the code

SASS (there is no essential difference between SASS and LESS, just because the team front-end uses SASS) // Write CSS with object-oriented thinking

* What are some ways to optimize CSS and improve performance? * How do browsers parse CSS selectors? * Should I use odd or even fonts on a web page? Why is that? * Which scenes are suitable for margin and padding? * How to write out the style module, say the idea, have any practical experience? * Is the percentage of the element vertical set relative to the height of the container? * How does full-screen scrolling work? Which CSS properties are used? * What is responsive design? What are the fundamentals of responsive design? How to compatibility with earlier Versions of IE? * Parallax scrolling effect, how to animate each page differently? (Go back to the top, slide down to reappear, and only reappear once respectively what to do?) What is the difference between a double colon and a single colon in ::before and :after? Explain what these two pseudo-elements do. * How to modify Chrome to remember passwords after automatically filling forms with yellow background? * What do you mean by line-height? * What is the display value of the element after it is floated? * How to make Chrome support text smaller than 12px? * How to make the font on the page clearer and thinner with CSS? (its - the font - smoothing: antialiased;) * The font-style attribute assigns it to "oblique" oblique. * position:fixed; How to deal with invalid under Android?If you need to write animation manually, what is the minimum time interval you think? Why? (ali)The default frequency of most monitors is 60Hz, which means 60 refreshes per second, so the minimum interval is theoretically 1/60 * 1000ms = 16.7ms###display: When will inline-block display a gap? (ctrip)
Copy the code

Remove spacing, use margin negative values, use font-size:0, letter-spacing, word-spacing

* overflow: Scroll is not smooth. * Have a height adaptive div with two divs, one 100px high, and want the other to fill the remaining height. * PNG, JPG, GIF these picture formats explain, respectively when to use. Have you heard about WebP?### What is Cookie isolation? (Or: How to request resources without cookies)If static files are placed under the master domain name, data with cookies will be submitted to the server when static files are requested, which wastes traffic. Therefore, it is better to separate them. Cookie is limited by domain, so requests cannot be submitted across domains. Therefore, when a non-primary domain name is used, cookie data will not be contained in the request header, which can reduce the size of the request header and the request time, so as to reduce the overall request delay. In addition, this method does not transmit cookies to the Web Server, reduces the processing and analysis of cookies by the Web Server, and improves the speed of HTTP request parsing by the Webserver. * What is the difference between writing the style tag after the body and before it?Copy the code

Page loading from top to bottom is, of course, style loading first


### What is a CSS preprocessor/post-processor?- Preprocessors such as LESS, Sass, or Stylus, which are used to precompile Sass or LESS, enhance the reuse of CSS code, as well as levels, mixins, variables, loops, functions, etc., and facilitate the modular development of UI components, greatly improving work efficiency. - Post-processors such as PostCSS are usually seen as processing CSS according to the CSS specification in the finished stylesheet to make it more efficient; The most common approach is to add browser private prefixes to CSS properties to achieve cross-browser compatibility. [Questions collected online](https://juejin.cn)### CSS topic here, welcome to add comments behind.
Copy the code