CSS classic interview questions (the most complete, continuously updated…)

2. Box-sizing?

The default value is content-box context-box. The default value is content-box context-box. The default value is content-box context-box, which is the W3C standard box model. ** Set the height/width attribute of the element to the content + border + padding section

3. Understanding of block formatting context (BFC)?

(A concept in the W3C CSS 2.1 specification that is a stand-alone container that determines how elements position their content and how they relate and interact with other elements.)

A page is made up of many boxes. The type of the element and the display attribute determine the type of the Box.

Different types of boxes participate in different Formatting contexts (containers that determine how documents are rendered), so elements inside the boxes are rendered in different ways. This means that elements inside and outside the BFC don’t interact with each other.

The BFC defines how the internal Block Box is laid out.

Positioning scheme:

1. The internal boxes are placed vertically one after the other.
2. The vertical distance of Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap.
3. The left side of each element’s margin box touches the left side of the containing block’s border box.
4. The region of the BFC does not overlap with the float box.
5. The BFC is a separate container on the page, and the child elements inside the container do not affect the outside elements.
6. When calculating the height of the BFC, the float element is also calculated.

A BFC can be triggered if one of the following conditions is met

1. The root element, which is HTML
2. Float does not have a value of None (default)
3. Overflow value is not visible (default)
4. The display value is inline-block, table-cell, and table-caption
5. The value of position is absolute or fixed

For more on the BFC, see my articleWhat is the BFC? What’s the use?

4. What are the CSS selectors? Which attributes can be inherited? How to calculate the CSS priority algorithm?

CSS selectors:

1. Id selector (# myid)

2. Class selector (.myClassName)

3. Tag (element) selectors (div, h1, p)

4. Adjacent selector (H1 + p)

5. Sub-selector (ul > Li)

6. Progeny selector (Li A)

7. Wildcard selector (*)

A [rel = “external”]

Hover (A :hover, Li :nth-child)

Pseudo element selector, group selector.

Inheritance:

Inheritable styles: font-size, font-family, color, ul, li, dl, dt, dd;

Non-inheritable styles: border, padding, margin, width, height

Priority (proximity principle) :! important > [ id > class > tag ] ! Important has a higher priority than inline

Priority algorithm calculation

Priority nearest principle, as in the case of weight style definition of the nearest prevail

! important>id >class>tag

Important has a higher priority than inline

Element selector weights: element label (derivation selector) : 1, Class selector: 10, ID selector: 100, inline style maximum weight, 1000

1. ! Styles declared important have the highest priority and are evaluated if they conflict.
2. If the priorities are the same, the last appearing style is selected.
3. Inherited styles have the lowest priority.

5. What pseudo-classes are added in CSS3?

P :first-of-type Selects the first of its parent elements

Each of the elements

Elements.

P :last-of-type selects the last element belonging to its parent

Each of the elements

Elements.

P :only-of-type Select the unique of its parent element

Each of the elements

Elements.

P :only-child Selects each of the unique child elements that belong to its parent element

Elements.

P :nth-child(2) Selects each of the second children that belong to its parent element

Elements.

:enabled

:disabled Specifies whether the form control is disabled.

:checked, the button or check box is checked.

:before adds content before an element and can also be used to clear the float

:after adds content after the element

6. How to center a div? How to center a floating element? How do I center an absolutely positioned DIV? How to center an img position

Horizontal center div:

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;
Copy the code

A floating element centered horizontally or vertically

The first: unknown element width and height

<div class="outer"> <span style>.outer{width:300px; height:300px; position:relative; background-color:#ccc; } span{ float:left; position:absolute; backgroond-color:red; top:50%; left:50%; transform:translate(-50%,-50%); } </style>Copy the code

Second: known element width and height

<div class="outer"> <span style>.outer{width:300px; height:300px; position:relative; background-color:#ccc; } span{ float:left; position:absolute; backgroond-color:red; width:150px; height:50px; top:50%; left:50%; margin:-25px 0px 0px -75px; } </style>Copy the code

Img (display: table-cell or position)

<div class="outer">        
    <img src="nz.jpg" alt="">    
</div>
<style>        
    .outer{            
        width: 300px;           
        height: 300px;            
        border: 1px solid #cccccc;            
        display: table-cell;            
        text-align: center;            
        vertical-align: middle;        
    }        
    img{            
        width: 150px;            
        height: 150px;        
    }    
</style>
Copy the code

Absolutely positioned divs are centered horizontally and vertically:

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: auto;
left: 0;
right: 0; 
top:0;
bottom:0;
Copy the code

An even more elegant way to center is to use the flex layout. Click on my article Mastering Flex Layouts, which is enough **

For more centered questions, check out my postSeveral methods of centering divs

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

8. The value of position?

CSS positioning has a new attribute, sticky positioning sticky, it is mainly used on the scroll event monitoring;

Viscous positioning can be considered a mixture of relative positioning and fixed positioning. Elements are positioned relative until they cross a certain threshold and then fixed. Such as:

#one { position: sticky; top: 10px; }
Copy the code

The elements are positioned relative until the viewport scrolls to the top of the elements less than 10px away. After that, the element is fixed 10px from the top until the viewport rolls back below the threshold.

For more information on sticky, please click hereIntroduction to Viscous Positioning

9. What are the new features of CSS3?

1. Added various CSS selectors :not(p) selects every non-P element; P :empty selects every P element that does not have any children (including text nodes)

2. Borders:

   div{ border:2px solid; border-radius:25px; Box-shadow: 10px 10px 5px #888888; Border-image :url(border-.png) 30 30 round; // Set shorthand properties for all border images. }Copy the code

3. Background background-clip (specifies the drawing area of the background image), background-origin, background-size

   div{ background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; Background-origin :content-box; background-origin:content-box; } body{background-image:url(img_flwr.gif), URL (img_tree.gif); }Copy the code

4. Linear Gradients down/up/left/right/diagonally

   background: linear-gradient(direction, color-stop1, color-stop2, ...) ;Copy the code

5. Text-shadow, textwrap, word-break, word-wrap;

6. * * * * the transform 2 d transformation: scale (0.85, 0.90) | translate (0 px, – 30 px) | skew (9 deg, 0 deg) | rotate () 3 d conversion perspective (); Transform applies a 2D or 3D transform to an element;

7. Transition the transition

8. animation

9. Multi-column layout

10. The box model

11. Flex layout

12. ** Multimedia query ** defines two sets of CSS that take different properties when the browser size changes

For more new features in CSS3 and HTML5, check out the new features in CSS3 and HTML5

10. Please explain CSS3 flexbox (elastic box layout model) and its application scenario?

The purpose of this layout model is to provide a more efficient way to lay out, align, and allocate space for items in a container. In a traditional block layout, blocks are arranged vertically from top to bottom. The inline layout is arranged horizontally. Elastic box layouts have no such inherent directional restrictions and can be manipulated freely by the developer. Trial scenario: The flexible layout is ideal for mobile front-end development and is perfectly supported on Android and ios.

For more information on Flex layouts, see my article Do you really know Flex layouts?

11. How does it work to create a triangle with pure CSS?

First, you need to set the width and height of the element to 0. Then set the border style.

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
Copy the code

12. How to design a full screen layout?

The first real product:

1. The height and width of the three pieces are determined;
2. Margin: 0 auto; In the middle.
3. The next two use float or inline-block without breaking lines;
4. Use margin to center them.

The second full-screen font layout: set the top div to 100% and the bottom div to 50% wide, then use float or inline to make them non-newline.

13. Common compatibility problems?

1. The default margin and padding are different for different browsers. The solution is to add a global

   *{margin:0; padding:0; } to unify;

2. IE6 two-sided margin bug: When block property tag float is followed by margin, IE6 shows margin is larger than set. Hack: display: inline; Convert it to an inline property. The method of progressive recognition gradually excludes the part from the whole. First, the clever use of the “9” tag separates Internet Explorer from all situations. Then, use “+” again to separate IE8 from IE7, IE6, so that IE8 has been identified independently. The method of progressive recognition gradually excludes the part from the whole. First, the clever use of the “9” tag separates Internet Explorer from all situations. Then, use “+” again to separate IE8 from IE7, IE6, so that IE8 has been identified independently.

   { background-color:#f1ee18; Background-color :#00deff\9; /*IE6, 7, 8 */ +background-color:#a200ff; /*IE6, 7 */ _background-color:#1e0bd1; /*IE6 */}Copy the code

3. Set a small height label (usually less than 10px), and in IE6, IE7, the height is higher than the self-set height. Hack: Set overflow:hidden for tabs that exceed the height; Or set the line height to be less than the height you set.

4. In IE, you can use the method of obtaining general attributes to obtain custom attributes, or you can use getAttribute() to obtain custom attributes. In Firefox, you can only use getAttribute() to get custom attributes. Solution: Use getAttribute() to obtain user-defined attributes.

5. By default, text smaller than 12px is forced to display as 12px. You can add the CSS property -webkit-text-size adjust: None; To solve.

6. The hover style does not appear after the hyperlink is accessed, because the hyperlink that has been clicked no longer has the hover and active style. The solution is to change the order of CSS properties :L-V-H-A:

   a:link {} 
   a:visited {} 
   a:hover {} 
   a:active {}
   Copy the code

7. In IE,even has x,y properties, but no pageX,pageY properties;

   In Firefox, the event object has pageX and pageY properties, but no x and y properties.

   Solution :(conditional comments) the disadvantage is that it may increase the number of additional HTTP requests in Internet explorer.

8. Png24 bit image appears in the background of iE6 browser, the solution is to make PNG8.

14. Write solutions to several IE6 bugs

1. Use of display caused by bilateral distance BUG float

2. 3 Pixel problems using float caused by using Dislpay: inline-3px

3. Use the correct writing order link visited hover active

4. Add position:relative to parent for Ie Z-index problem

5. Png transparent using JS code change

6. Min-height! Important solution ‘

7. Select using iframe nesting in IE6

8. Why is there no way to define the width of the container around 1px (IE6 default line height, use over:hidden,zoom:0.08 line-height:1px)

9. Ie 6 is not supported! important

15. Why initialize CSS styles

Because of browser compatibility issues, different browsers have different default values for some tags, and if the CSS is not initialized, the page will display differently from browser to browser. Of course, initializing a style will have an impact on SEO, but you can’t have your cake and eat it, but try to initialize with minimal impact.

16. What is the difference between the calculation method of absolute containing block and normal flow?

In either case, we must first find the element in its ancestor whose nearest position is not static and then determine:

1. If the element is inline, then containing block is the smallest rectangle that can contain the first and last inline box padding box generated by the element.
2. Otherwise, it consists of the padding box of this ancestor element.

Initial containing block: initial containing block: initial containing block

Supplement:

1. Static (default)/relative: the content box of its parent element (i.e. without the padding)

2. Absolute: Look up the nearest element with the position absolute/relative

3. Fixed: Its containing block is always the root element (HTML /body), and the root element is also initial containing block

17. The collapse property in CSS has a value for visibility. What’s the difference between different browsers?

When an element’s **visibility** property is set to **collapse**, it behaves the same as **hidden** for normal elements. The exception is that if the element is related to the table, such as table row, table group, table column, table column group, it will behave the same as **display: None **.

In Chrome, there is no difference between using **collapse values and **hidden values.

In Firefox, Opera, and IE11, using the **collapse value works exactly as it is: the row of the table disappears and the row below it replaces it.

18. Display: None and visibility:hidden what is the difference?

Display: None hides the corresponding element and allocates no more space in the document layout (reflux + redraw)

Visibility :hide the corresponding element and leave the original space in the document layout (redraw).

With the CSS display: None attribute, the width, height, and other attributes of an HTML element are “lost”; Using the visibility:hidden property, the HTML element (object) is only visually invisible (fully transparent), and the space it occupies remains.

19. What happens when position is superimposed on display, overflow, float?

The display attribute specifies the type of box that the element should generate; The position attribute specifies the positioning type of the element; The float property is a layout that defines the direction in which elements float. Similar to the priority mechanism: position: Absolute /fixed has the highest priority, float does not work when they are present and display values need to be adjusted. Elements located by float or Absolute can only be block elements or tables.

20. Why does the float occur? When do YOU need to clear a float? What are the ways to clear a float? What are the pros and cons? Which one do you think is the best? Why is that?

Reasons for floating:

The floating element stops when it touches the border that contains it or the border of the floating element. In the CSS specification, float positioning is not part of the normal page flow, but is positioned independently, so the block box of the document flow acts as if the float box does not exist. Floating elements float on the block box of the document flow.

Position: Fixed is a subclass of position: Absolute. The floating box can be moved left and right until its outer edge encounters the edge of the containing box or another floating box, so floating positioning is not part of normal page flow. The normal flow in the document will behave as if the float box does not exist. When the float box height exceeds the contain box, the contain box will not automatically scale the height of the pen box float element. Therefore, a parent container containing only floating elements is displayed without considering the placement of the child elements, causing the parent container to appear empty.

Problems with floating:

1. The height of a parent element cannot be stretched, affecting elements of the parent’s level
2. Non-floating elements (inline elements) that are siblings of the floating element follow
3. If the first element does not float, then the elements before it need to float as well, otherwise the structure of the page display will be affected.

How to clear the float:

1. The parent div defines height
2. The last floating element is followed by an empty div tag and the style clear:both. (Theoretically, you can remove any tags and add meaningless ones)
3. The parent tag containing the floating element adds the style overflow to hidden or auto.
4. Parent div defines zoom (empty tag elements clear float and have to add meaningless code, use zoom:1 for IE compatibility)
5. Clear float with after pseudo-element (for non-IE)

1**, parent div define height**

Principle: If the parent div manually defines its height, it solves the problem that the parent div cannot automatically obtain its height

Pros: Simple, little code, easy to learn

Disadvantages: Only suitable for layouts with fixed height, giving an exact height can cause problems if the height is different from the parent div

Suggestion: This parameter is not recommended. This parameter is recommended only for layouts with fixed height

2**, end with empty div tag clear:both**

Principle: Add an empty DIV, use CSS to improve clear:both clear floating, so that the parent div can automatically get to the height

Pros: Simple, less code, good browser support, less prone to weird problems

Disadvantages: many beginners do not understand the principle; If you have a lot of floating layouts, you have to add a lot of empty divs, which makes you feel uncomfortable

Suggestion: This method is not recommended, but it is the main method used to clear the float

3**, parent div definition overflow:hidden**

How it works: Width or zoom:1 must be defined, and height cannot be defined. When using overflow:hidden, the browser automatically checks the height of the float area

Pros: Simple, less code, good browser support

Disadvantages: Cannot be used with position, as excess sizes are hidden

Suggestion: Only recommended for those who do not use position or who have a deep understanding of overflow:hidden

4**, parent div defines pseudo-classes :after and zoom**

Principle: IE8 above and non-IE browser support :after, principle and method 2 is a bit similar, ZOOM (IE to have properties) can solve IE6, IE7 floating problem

Advantages: good browser support, not prone to strange problems (currently: large websites are used, such as: Teng Xun, netease, Sina, etc.)

Shortcomings: code, many beginners do not understand the principle, to use the combination of two sentences of code, to make mainstream browser support

Suggestion: It is recommended that you define public classes to reduce CSS code

Div {clear:both; div{clear:both; }

(2) the parent element of {overflow: hidden | auto; zoom:1}

(3) : After pseudo-selector that automatically creates a child element at the end of the parent container

.clearfix:after { content: "\0020"; display: block; height: 0; clear: both; } .clearfix { zoom: 1; }Copy the code

“Clearfix” is the class name of the parent container, “content:”020″;” Is to put a blank at the end of the parent container,

“height: 0;” Is to make this this whitespace character not show up, “display: block; clear: both;” Is to ensure that the whitespace character is a non-floating independent block. :after selector not supported by IE 6, add an IE 6 unique command “zoom:1;” Will do.

21. Margin overlap

Wrap a container around the overlapping element and trigger the container to generate a BFC. Example:

<div class="aside"></div> <div class="text"> <div class="main"></div> </div> <! -->.aside {margin-bottom: 100px; width: 100px; height: 150px; background: #f66; } .main { margin-top: 100px; height: 200px; background: #fcc; }.text{/* Block margin from overlapping */ overflow: hidden; /* block margin from overlapping */ overflow: hidden; // The BFC attribute has been triggered. }Copy the code

22. What is the display value of the element after the float is set?

Automatically change to display:block

23. Have you used media queries for the mobile layout?

By querying the media, you can define different CSS for different sizes and sizes of media to adapt to the corresponding device display.

1. The inside

   <link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">
   Copy the code

2. CSS :

3. @media only screen and (max-device-width:480px) {/ CSS style /}

Display: Inline should not be used after width, height, margin, padding, and float. Display: float should not be used after inline-block. Display :block should not be used vertical-align. Display :table-* < display:table-* < display:table-* >Copy the code

Web Fonts may be unfamiliar to Chinese websites, but they are very popular abroad. Web Fonts are often bulky, and some browsers block page rendering damage when downloading Web Fonts.Copy the code

<meta name= 'viewport' content= "width=device-width, initial scale=1\.maximum-scale =1, user-Scalable =no" >Copy the code

p{ font-size:10px; - its - transform: scale (0.8); //0.8 is the scale}Copy the code

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
Copy the code

:first-line 
:first-letter 
:before 
:after
Copy the code

 display : block
Copy the code

Float: left;Copy the code

img{    
    border: 0;    
    vertical-align: bottom;
}
Copy the code

padding margin
Copy the code

padding : 0;
margin : 0;
Copy the code

list-style:none;
background-image:url()
Copy the code