Front-end interview CSS

Posted May 25, 20203 min read

Foreword

Personal summary, collection, sharing, if there is any omission, please leave a message to correct me!

1. What is the difference between the standard box model in CSS and the IE box model?

Box model:
(1) There are two box models:IE box model(border-box), W3C standard box model(content-box)
(2) Box model:divided into four parts:content, padding, margin, and border

The difference between IE box model and W3C standard box model:
(1) W3C standard box model:attributes width and height only contain content, not border and padding
(2) IE box model:attributes width and height contain content, border and padding, which refers to content

  • padding + border.

Which box model to use in ie8 + browser can be controlled by box-sizing(new CSS property). The default value is content-box, which is the standard box model; if box-sizing is set to border-box, IE Box model. If the DOCTYPE is missing in ie6, 7, and 8, the box model will be interpreted as the IE box model. If the DOCTYPE type is declared on the page, all browsers will interpret the box model as the W3C box model.

2. What is the difference between double colon and single colon in ::before and:after? Explain the role of these two pseudo-elements

the difference:
In CSS3, a single colon is used to represent a pseudo-class, and a double colon is used to represent a pseudo-element. However, in order to be compatible with existing pseudo-element writing, single colons can also be used in some browsers
To represent pseudo elements.
Pseudo-classes generally match some special states of elements, such as hover, link, etc., while pseudo-elements generally match special positions, such as after, before, etc.
Role:
If you want the inserted content to appear before other content, use ::before, otherwise, use ::after;
In the code order, the content generated by ::after is also later than the content generated by ::before.
According to the stack perspective, the content generated by ::after will be above the content generated by ::before.

3. Which properties in CSS can be inherited?

Each attribute is given in the definition whether the attribute is inherited, an inherited attribute will use the value of the same attribute of the parent element when no value is specified
As your own value.

Generally inherited attributes include font-related attributes, font-size and font-weight. Text-related attributes, color and text-align, etc.
Some layout attributes and list attributes of the table such as list-style, etc. There are also cursor attributes and element visibility.

When an attribute is not an inherited attribute, we can also inherit it by obtaining the attribute value of the same name from the parent element by setting its value to inherit.

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

block:block type. The default width is the width of the parent element, and the width and height can be set and displayed on a new line.
none:The element is not displayed and removed from the document flow.
inline:Inline element type. The default width is the content width, and the width and height cannot be set.
inline-block:The default width is the content width, you can set the width and height, and the peer display.
list-item:Display like block type elements, and add style list mark.
table:This element will be displayed as a block-level table.
inherit:Specifies that the value of the display attribute should be inherited from the parent element.
flex:Set the flexible layout of child elements

5. Common ways to hide elements?

(1) Use display:none; to hide the element, the rendering tree will not contain the rendering object, so the element will not occupy a position on the page, nor will it respond to the bound listening events.

(2) Use visibility:hidden; to hide elements. The element still occupies space on the page, but it will not respond to the bound listening event. It is an inherited attribute. If the child element uses visibility:visible, it is not inherited, and the descendant element will appear again.

(3) Use opacity:0; to set the transparency of the element to 0, in order to hide the element. The element still occupies space on the page, and can respond to the listen event that the element is bound to.

(4) The element is hidden by removing the element from the visible area by using absolute positioning.

(5) Through the negative value of z-index, make other elements cover the element to achieve hiding.

(6) Use transform:scale(0,0) to scale the element to 0, so as to hide the element. In this method, the element still occupies a position on the page, but will not respond to the bound listening event.

6. How to set the transparency, and the difference?

rgba will only change the transparency of the current color
opacity, as long as the color associated with the element will follow the transparency
transparent is a kind of color, this color is called transparent color, set the color or background color of an element to it

7.