Common front-end CSS interview questions

As the epidemic continues to improve, various places have begun to gradually resume work. Of course, for us, the so-called gold, three, silver and four job-hopping seasons are about to begin. Here, I would like to share some of my accumulated experience in the front-end field so that I can review the past and learn new things.

For the front-end, it involves a wide range of knowledge and content, but it remains the same, mainly around html(5), css(less,scss,sass,styus, css3), js (es5, es6), and several common popular frameworks vue, react, etc. Without further ado, let’s get straight to the topic.

Special recommendation:2020 CSS interview questions summary (latest)

##1. Please name a few new features of html5

Answer: The new features added by html5 are specifically:

1. New semantic/structured tags, such as footer, article, main, nav, etc.;

2. New input type types and attributes, such as: email, tel, number, etc.;
3. HTML5 proprietary API geographical location local storage cache, etc.
4. The difference between the new graphic tag svg canvas and
5. The new multimedia tag video audio source
6. Some abandoned element tags, such as: font
7. Custom element tag
8. DOCTYPE and character encoding charset declaration

2. Use of z-index

Answer: z-index is used to set labels The hierarchical relationship, when using z-index, you need to set the position attribute of the label at the same time (such as relative, absolute, or fixed). The default z-index of the label is 0, and you can set a negative number. The larger the value, the higher it is at the top

3. Position attributes and usage

Answer: position is the positioning attribute of css, which mainly includes the following different attribute values: The details are as follows:

absolute

Generate an absolutely positioned element and position it relative to the first parent element other than static positioning.

The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

fixed

Generate absolutely positioned elements, positioned relative to the browser window.

The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

relative

Generates a relatively positioned element, positioned relative to its normal position.

So, "left:20" will add 20 pixels to the left position of the element.

static

Default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).

inherit

Specifies that the value of the position attribute should be inherited from the parent element.

4. Use of float

Answer: The attribute defines in which direction the element floats. Historically this property has always been applied to images, causing the text to wrap around the image, but in CSS, any element can be floated. A floated element creates a block-level box, regardless of what type of element it is. The details are as follows:

The effect caused by float makes the element itself become an element similar to inline-block, so that the element wrapping it ignores its height, that is, the parent element has no height. For example: setting the box for the child element height:100px; The height of the parent element at this time is also 100px. The effect of float float causes the element to move out of the document flow in the specified direction until its outer edge hits the containing box or another floating border. Floating will only affect the elements behind it. If the above element does not float, it will not float up. If the parent element is too narrow to accommodate all floating elements, the floating elements that cannot be accommodated will be displayed in a new line. Taking the line-wrapping element as the basis, if there is a floating element with a height greater than the line-wrapping element, then when the line-wrapping element breaks, it will be "stuck" by the taller element. 5. Ways to clear the impact of floating

Answer : Float will cause damage to the document flow. Therefore, if you need to eliminate the impact of float, there are generally several solutions:

For sub-elements: add an element after the floating sub-element, and add an clear: both attributes can be displayed normally. The disadvantage is that an empty element is added arbitrarily, which does not comply with the code specifications. For the parent element: add an adjacent empty element after the parent element, set the clear attribute, but only allow the subsequent elements to display normally. , and does not expand the height of the parent element. For the parent element: Set the height for the parent element, which can be displayed normally, but the scalability is not good, because the height is usually expanded by the content inside. For the parent element: Set the display for the parent element. : inline-block, it can be displayed normally, but the margin:auto of the parent element is invalid, and you will find that there will be a gap between the upper and lower parts. For the parent element: set overflow: hidden to the parent element, it can be displayed normally, but it needs to match the width. , otherwise it will occupy one line by default. 6.css animation properties (such as using css to brake a rotating triangle)

Answer: To make a triangle, you can directly use the border attributes. Specifically, you can set the height and width of the box to 0px, and then set the color attributes of different borders corresponding to the width. The corresponding base of the triangle is set to a specific triangle color. The corresponding should not be set or set to a width of 0. The other two hypotenuses are set to transparent

The rotation animation will involve two properties of css, namely:

1) transition: animation property , you can write four values, which are the attribute name of the corresponding animation or directly set all, the time when the animation is completed (unit is s or ms), the change curve of the animation, and the time when the animation starts

2) transform: rotation The main attributes include rotate (radical rotation also includes rotate3d, rotateX, rotateY, rotateZ), translate (there are four for the same reason), scale (there are four for the same reason)

7. Formal box model and informal box model

Answer: The box model mainly calculates the width or height of the label inconsistently. The standard box model includes: margin, border, padding and the width of the content , that is: the actual width of the box = the left and right margin of the content, the left and right borders, the left and right padding, the actual width of the content; and the box-sizing attribute was introduced in CSS3, which can change the calculation method of the standard box model, specifically: set box-sizing: border -box, the actual width of the box = the actual width of the left and right margins of the content. Of course, you can directly set box-sizing: content-box to restore the normal standard box model

8.flex elastic layout

Answer: 1. Set the display attribute of the box to flex, or line-flex, which corresponds to six css attributes, namely:

1) flex-direction: Set the arrangement of child elements (row, column, row-reverse, column-reverse)

2) flex-warp: Set whether the child elements are wrapped (nowarp, warp, warp-reverse)

3) flex-flow: Abbreviation of flex-direction and flex-warp, default is row nowarp

4) justify-content: Set the horizontal arrangement of child elements Mode (flex-start, flex-end, center, span-around, span-between)

5) align-items: Set the vertical mode of child elements (flex-start, flex-end, center, stretch , baseline)

6) align-content: Set the arrangement of multiple axes (flex-start, flex-end, center, spand-around, spand-between, stretch)

2 . The corresponding sub-element item also has its own six css attributes, which are:

1) order: Set the arrangement weight of the element with the larger the value, the more behind

2) flex-grow: Set the enlargement ratio of the element

3) flex-shrink: Set the shrink ratio of the element

4) flex-basis: Set the proportional space occupied by the main axis of the excess space item

5 ) flex: The abbreviation of flex-grow, flex-shrink and flex-basis defaults to 0 1 auto

6) align-self: Sets the vertical arrangement of the child elements, the default is the align-items of the box The value

:warning:: After setting the flex layout, the float, clear, and vertical-align of the child elements are invalid

9.grid grid layout

Answer: 1. To set the grid layout of the box, you need to set the display to grid or line-grid, which corresponds to the following attributes:

1) grid-template-columns: definition The width of each column

2) grid-template-rows: Define the height of each row

3) grid-row-gap: Define the gap between rows

4 ) grid-column-gap: Define the gap between columns

5) grid-gap: Define the gap abbreviation between rows and columns

6) grid-teamplate-areas: Define a The area is composed of multiple cells

7) grid-auto-flow: Define the container arrangement order

8) justify-items: Define the horizontal arrangement order of the content of the sub-elements

9) align-items: Define the vertical order of the content of child elements

10) place-items: Define the abbreviation of the horizontal and vertical order of the content of child elements

11) justify-content : Define the horizontal arrangement order of the container (grid)

12) align-content: Define the vertical arrangement order of the container (grid)

13) place-content: Define the horizontal and The abbreviation of vertical arrangement order

2. The attributes of child elements include:

1) grid-column-start: The position where the column starts

2) grid-column- end: The position where the column ends

3) grid-row-start: The position where the row starts

4) grid-row-end: The position where the row ends

5) grid-column: column start and end positions

6) grid-row: row start and end positions

7) grid-area: define the area in which the element is placed

8) justify-self: Define the element's own horizontal arrangement

9) align-self: Define the element's own vertical arrangement

10) place-self: Define the element's own horizontal arrangement and vertical arrangement

:warning:: When set to grid layout, the float, inline-block, table-cell, column-* attributes of the child elements are all invalid

10. Common centering solutions

Answer:

1. Horizontally center inline elements: directly use text-align: center

2. Inline elements are vertically centered: vertical-align: middle and set the row height of the parent element to the height of the parent element

3. Fixed-width elements are horizontally centered using: magin: 0 auto

4. Flex elastic layout: Set justify-content: center to center horizontally, align-items: center vertically

5. Perform vertical centering through padding attribute

6. Set parent element For: display: table-cell, vertical-align: middle

7. Set vertical centering through pseudo-elements: Set the parent element to a pseudo-element and set it to inline-block, and set vertical-align: middle

8. When the height is determined: absolute position margin to vertically center

9. When the height is uncertain: absolute positioning transform, specifically: set the element that needs to be vertically centered to: position: absolute, top: 50%, transform: translateY(-50%)

10. Vertically center via flex-duration: column: display: flex, flex-duration: column, justify-content: center

Horizontal and vertical centering method:

1. The height of the parent element is known, and the height and width of the child element are fixed (the height may not be fixed): text-align : center, line-height: parent height

2. Absolute positioning margin achieves vertical and horizontal centering, you need to know the height and width of the child element

3. Absolute positioning transform achieves vertical and horizontal centering, it does not need to be Know the height and width of the child element: position: absolute; top: 50%; left: 50%; transform: translate (-50%, -50%)

4. Use display as table and child element as display: table-cell;vertical-align:center;text-align:center sub-element is set to vertical-align:center

5. Use the pseudo-element of the parent element for vertical centering (the parent element needs to know the height), Set the height of the pseudo element to 100%, and set vertical-align: middle, display: inline-block; the sub-element sets vertical-align: center; display: inline-block (the sub-element can be horizontally centered using text-align: center or margin: 0 auto)

6. The child elements are set to margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0;

11. Use of pseudo-elements

Answer:

Common pseudo-classes——:hover,:link,:active,:target,:not() ,:focus. Common pseudo-elements - ::first-letter, ::first-line, ::before, ::after, ::selection

::before and ::after unique content, used in css Add content to the logical head or tail of an element during rendering.

These additions will not appear in the DOM, will not change the document content, and cannot be copied. They are only added in the css rendering layer.

So don’t use :before or :after to display meaningful content, try to use them to display decorative content, such as icons

12.css selector

Answer: Wildcard selector, label selector, class selector, id selector, attribute selector, space selector is greater than selector plus sign selector

13.pSet padding to 100% expression

Answer: Whether in standard mode or box-sizing mode, padding is part of the total width of the element. So at this time, the performance of p is the color corresponding to p

14. Usage of em, rem, px

Answer:

em is a relative length unit. The font size relative to the text within the current object. If the current font size for inline text has not been manually set, it will be relative to the browser's default font size. Rem is only relative to the font-size of the HTML root element to calculate px pixels (Pixel). Relative length unit. Pixels px are relative to the monitor screen resolution. 15. Usage and precautions of margin

Answer: When margin is used, the margin between two adjacent labels will be merged, that is, the margin-top and margin-bottom of the upper and lower labels will be set. When , it will be automatically merged, and the largest attribute value will be the actual interval between the two

16. List several common css3 attributes and uses

Answer: Common ones include: border-radius: setting the rounded corners of the label; box-shadow: setting the shadow, box-sizing: changing the box model, etc.

17. Comparison between less and sass

Answer:

The difference is that the Less environment is simpler than Sass

The installation of Sass requires the installation of Ruby Environment, Less is based on Javascript. You need to introduce Less.js to process the code and output css to the browser. You can also use Less in the development process, then compile it into a css file and place it directly in the project.

Less is easier to use than Sass

Less does not tailor the original features of CSS, but adds procedural language features to CSS based on the existing CSS syntax.

Sass has more powerful functions than Less

1. Sass has variables and scopes

2. Sass has the concept of functions

3. Process control: conditions , Loop traversal, inheritance, reference

4. Data structure: array, map

Less and Sass processing mechanisms are different

The former is processed through the client, the latter It is processed through the server. In comparison, the former will be a little slower than the latter.

The only difference between variables in Less and Sass is that Less uses @ and Sass uses $. Similarities

Less and Sass have some syntax in common, such as the following:

1. Mixins - class within class;

2. Parameter mixing - classes that can pass parameters, just like functions;

3. Nesting rules - nest classes within Classes, thereby reducing duplicate code;

4. Operations - use mathematics in CSS;

5. Color function - you can edit colors;

6. Namespace (namespace) - group styles so they can be called ;

7. Scope - locally modify the style;

8. JavaScript assignment - use JavaScript expressions to assign values ​​in CSS.

Of course, when it comes to css, you will also ask about css pre-processing languages, such as less, scss, etc. You can check the corresponding information by yourself, and I will not explain too much here

Related tutorial recommendations: CSS video tutorial

The above is the detailed content of Common front-end CSS interview questions. For more information, please follow other related articles on the PHP Chinese website!