Front-end Interview questions (CSS3)

CSS (3) 1. Horizontal Centering method

1. Element is inline element, set parent element Text-align:center

2. If the element width is fixed, the left and right margin can be set to auto;

3. If the element is absolutely positioned, set the parent element position to relative, and the element is set to Left:0;right:0;margin:auto;

4. Using the Flex-box layout, specify the Justify-content property as center

5.display set to Tabel-ceil

2. Vertical Centering method

1. Set the display mode to table, Display:table-cell, and set Vertial-align:middle

2. Using flex layout, set to Align-item:center

3. Set the bottom:0,top:0 in absolute positioning and set the Margin:auto

4. Set a negative value of top:50%,margin-top to half the height when fixed in absolute positioning

5. Text vertically centered set Line-height to height value

3. A brief introduction to the new features of CSS3

A flex layout has been added to the layout,

New selectors such as First-of-type,nth-child are added to the selector,

Box-sizing is added to the box model to change the box model,

Added animation, 2d transformations, 3d transformations, etc. in animation.

Add transparency, RGBA, etc. in color

Fonts allow embedding and font shading, and of course there's a box shadow

Finally, there are key media queries.

4. How do I use CSS for hardware acceleration?

Hardware acceleration is to improve performance by creating separate composite layers that allow the GPU to render this layer, generally triggering hardware-accelerated CSS properties such as transform, opacity, and filter, in order to avoid the repaint of 2D animations at the beginning and end of the operation, General use Tranform:translatez (0)

5. Talk about the animation6 of CSS3. What is the difference between absolute positioning and relative positioning?

Absolute positioning is relative to the nearest already positioned ancestor element, no relative to body, absolute positioning out of the document flow,

Relative positioning is relative to the initial position of the element in the document, and the relative positioning of the element still occupies the original space.

What is 7.BFC? Introduction, How to trigger BFC?

BFC is often said to be a block formatting context, which is a separate rendering area that specifies how the interior is laid out, and that the child elements of the area do not affect the outer elements. Among the more important layout rules are the internal box vertical placement, the calculation of the height of the BFC, floating elements are also involved in the calculation. The rules that trigger BFC have root elements, floating elements, position as absolute or fixed elements, display Properties Inline-block, Table-cell, Table-caption, Flex, Inline-fllex , the overflow is not a visible element.

What are 8.css sprites, and what are the pros and cons

Concept: Stitching multiple small images into one image. The background pattern that needs to be displayed is adjusted by background-position and element dimensions.

Advantages:

1. Reduce the number of HTTP requests, greatly improving page loading speed
2. Increase the repetition of picture information, increase the compression ratio, reduce the image size
3. Easy to change style, just modify the color or style on one or several pictures to achieve

Disadvantages:

1. Picture Merge Trouble
2. Maintenance hassle, modifying a picture may require a new layout of the entire picture, style

9.display: none;And visibility: hidden;The difference

Contact: They can make elements invisible

Difference:

1. Display:none: The element disappears completely from the render tree and does not occupy any space when rendered; visibility:hidden; no element disappears from the render tree, the renderer element continues to occupy space, but the content is not visible
2. Display:none; The descendants node disappears due to the disappearance of elements from the render tree, which cannot be displayed by modifying descendant node properties; visibility:hidden; is an inheritance attribute, descendant nodes disappear due to inherited hidden, by setting visibility : visible; Allows descendant nodes to explicitly
3. Modifying the display of elements in a regular stream usually causes the document to Reflow. Modifying the Visibility property will only cause the redraw of this element.
4. The reader does not read display:none; element content; Read Visibility:hidden; element content

10.linkAnd @importThe difference

1. linkIs the HTML way, @import is the CSS way
2. linkMaximum support for parallel downloads, @import too many nested causes serial download, Fouc
3. linkYou can rel="alternate stylesheet" specify a candidate style by
4. Browser to link support older than @import , can use @import to hide styles on old browser
5. @importYou must refer to other files in the CSS file before the style rule
6. Overall: link is better than @import

11.display: block;And display: inline;The difference

blockElemental Features:

1. When in a regular stream, if width not set, the parent container 2 is filled in automatically. You can apply margin/padding 3. If no height is set, the height is expanded to include the child elements in the regular stream 4. When the layout is in a regular stream, it is between the front and back element positions (exclusive of a horizontal space) 5. Ignorevertical-align

inlineElemental Features

1. In the horizontal direction according to the direction Layout 2. Line wrapping does not take place before or after the element 3. white-space controlled 4. margin/padding Not valid in vertical direction, 5 in horizontal direction. width/height An attribute is not valid for a non-substituted inline element, and the width is determined by the element content 6. The row box for a non-replacement inline element is determined by the height of the row line-height box that replaces the element in the row, and height margin padding border 6. Floating or absolute positioning is converted to block 7. vertical-align attribute is in effect

12. How to clean up (contain) floats when the container contains several floating elements

1. Add extra elements to the container element before closing the label and setclear: both
2. The parent element triggers a block-level formatting context (see Block-level Visual context section)
3. Set container element pseudo elements for cleanup recommended cleanup floating method

/** * 1 content is used as a space in the standard browser to repair empty space on the floating element when the * contenteditable attribute appears in the document under Opera * 2 use display to use table instead of block: You can prevent containers and * Sub-element Top-margin folding, this can make the cleaning effect and bfc,ie6/7* zoom:1;*/. Clearfix:before,.clearfix:after{content: " ";/*1*/Display:Table;/*2*/}. Clearfix:after{Clear:both;}/** * IE 6/7 use * * by triggering the haslayout implementation contains floating **/. Clearfix{*zoom:1;}

13. How to create a block-level formatting context (block formatting context), BFC What is the use of

To create a rule:

1. root element
2. Floating element ( float not none )
3. Absolutely positioned element ( position value is absolute or fixed )
4. displayValue is inline-block ,, table-cell , table-caption flex , inline-flex one of the elements
5. overflowNot visible an element

Role:

1. can contain floating elements
2. Not covered by floating elements
3. Prevent margin folding for parent-child elements

Front-end Interview questions (CSS3)