This article documents some common CSS knowledge points. Refer to the reference article for details.

Sorting out front-end knowledge points

1. The difference between standard box model and IE(weird box model).

Standard (W3C) box model: width = content + border + padding + margin

Low version IE box model: width = content + border + padding + margin

The height and width of the standard box model box are the width of the content, while the width of the IE box model box includes the content+padding+border.

2. What are CSS selectors? Which attributes can be inherited?

  • Id selector (#content)
  • Class selector (.content)
  • Label selector (div, p, spanEtc.)
  • Adjacent selector (h1 + p)
  • Child selector (ul > li)
  • Descendant selector (li a)
  • Wildcard selector (*)
  • Property selector (a[rel = "external"])
  • Pseudo class selector (a:hover, li:nth-child)

CSS Inherited Properties

3. CSS priority?

Id selector >. Selector > + selector > *

Important > Inline > Inline > outer chain

4. CSS3 new pseudo-class selector?

5. How do I center div?

Flex layout: context-content: center; align-items: center

Margin-left + margin-left + transform

6. What are the values of display?

7. What are the new features of CSS3

  • attributeandpseudo-classesThe selector
  • The rounded (border-radius)
  • Multi-column layout (multi-column layout)
  • Shadow (shadow) and reflection (reflect)
  • Text effects (text-shadow)
  • Text rendering (text-decoration)
  • Linear gradient (gradient)
  • Rotation (rotate)/zoom (scale)/Tilt (skew)/Move (translate)
  • Media Enquiries (@media)
  • RGBAAnd transparency
  • @font-faceattribute
  • More background

8. Create a triangle with pure CSS?

9. What is responsive design? What are the fundamentals of responsive design?

10. How do I clear floats? What is BFC?

  • Parent box defines height (height)
  • The last floating element is followed by an empty div tag and styledclear: both
  • Parent tags that contain floating elements add style Overflow ashidden/both
  • Parent div definitionzoom

11. CSS optimization and performance improvement methods

  • Multiple CSS can be merged and HTTP requests minimized
  • If the attribute value is 0, no unit is added
  • Place the CSS file at the top of the page
  • Avoid descendant selectors, excessive constraints, and chain selectors

Use compact syntax to avoid unnecessary repeated use of semantic naming, easy to maintain as little as possible use! Impotrant, can choose other selectors to simplify rules, as far as possible to merge different classes of duplicate rules to comply with the box model rules

12. What is CSS preprocessor/post-processor? Why use them?

  • Preprocessor, such as:Less, Sass, stylus, used to precompile SASS or less, increases the reusability of CSS code, as well as hierarchies, mixins, variables, loops, functions, etc., making it easy to write and develop UI components.
  • Post-processor, such as:postCss, is often 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.
  • Other CSS preprocessor languages:Sass.Less.Stylus.Turbine.Swithch css.CSS Cacheer.DT Css.

13. What’s the difference between a double colon and a single colon in ::before and :after? Explain what these two pseudo-elements do?

  • The colon (:) is used for CSS3 pseudo-classes, and the double colon (::) is used for CSS3 pseudo-elements.

  • ::before is a pseudo-element defined in the presence of a child element before the body content of the element. It doesn’t exist in the DOM, it exists only in the page.

  • The pseudo-elements :before and :after are new to CSS2.1. At first, the pseudo-element prefix used a single colon syntax, but as the Web evolved, the CSS3 specification changed the pseudo-element syntax to use double colons, becoming ::before ::after.

14. If you need to write animation manually, what is the minimum time interval you think?

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.

15. What is the difference between rgba() and opacity?

  • Opacity functions on an element and the transparency of all content (including text) within the element

  • Rgba () only works on the element’s own color or its background color; child elements do not inherit the transparency effect

16. Display: Inline-block when a gap is displayed?

  • There will be gaps when there is space, you can delete the space to solve

  • When margin is positive, you can make margin use negative value

  • You can set font-size:0, letter-spacing, and word-spacing to 0

17. What is the difference in the presentation of CSS styles using PX, REM and EM?

18. The difference between transform and animation?

  • Transform: It, like width and left, defines many static styles for elements to transform, rotate, scale, shift, and perspective. Through a combination of functions we can achieve cool static effects (non-animation).
  • AnimationKeyframe animation: works on elements rather than style properties. Keyframe animation is used instead of purely expressive javascript code to animate, and can explicitly control the property values of the current frame via keyFrame.

19. What is the difference between display: None and visibility: hidden?

  • Connection: The values of both attributes can make elements invisible

  • The difference between:

    • Display: None causes elements to completely disappear from the render tree, occupying no space at all. Visibility: Hidden will not make the element disappear from the render tree, and the renderer element will continue to occupy space, but the content will not be visible.

    • From the perspective of inheritance: display: none is a non-inheritance attribute. The descendant node disappears because the element disappears from the rendering tree. It cannot be displayed by modifying the descendant node attribute. Because you inherit the hidden, you can make the descendant node explicit by setting visibility: visible.

    • From a redraw and rearrangement perspective: Modifying the display of elements in a regular stream usually results in document rearrangement. Modifying the visibility attribute only causes the element to be redrawn.

    The screen reader will not read display: None; Element content; The visibility: Hidden element content is read.

20. What is the difference between link and @import?

  • linkBetter than@import.

21. What is the relation between display,float,position?

22. Collapsing margins

  • throughBFCTo solve the

23. What are some ways to hide elements?

  • Visibility: Hidden This property simply hides an element, but the space occupied by the element still exists.

  • Opacity: 0 CSS3 property, which makes an element fully transparent.

  • Position: Absolute Sets a large left negative position so that the element is positioned outside of the visible area.

  • The display: None element becomes invisible and no longer takes up space in the document.

  • Transform: scale(0) sets the scale of an element to infinitesimally small, the element will not be visible, and its original position will be preserved,

  • Height: 0 Sets the element height to 0 and eliminates the border.

  • Filter: blur(0) CSS3 attribute, the larger the value in parentheses, the greater the degree of Gaussian blur of the image, when it reaches a certain degree, the image can disappear.

24. Understanding of BFC(block formatting Context).

The BFC specifies how the internal Block Box is laid out. 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.

Positioning scheme:

  • The inside of theboxThey’ll be placed one after the other in the vertical direction
  • boxThe vertical distance is divided bymarginDecide, belong to the sameBFCOf the twoAdjacent BoxthemarginThere will be overlap
  • Each elementmargin boxTo the left, with the containing blockborder boxTo the left
  • BFCThe area will not be withfloat boxoverlap
  • BFCIs a separate container on the page, and the elements inside the container do not affect the elements outside
  • To calculateBFCThe floating element is also involved in the calculation

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

  • The root element changes, i.ehtml
  • floatThe value of thenone(the default)
  • overflowThe value of thevisible(the default)
  • displayThe value ofinline-block.tabke-cell.table-caption
  • positionThe value ofabsoluteorfixed

25. Is the element vertical percentage set relative to the height of the container?

In general, percentage units for child elements are based on parent elements. Margin and padding are exceptions. The height of the element is relative to the height of the container, but the margin and padding are relative to the width of the container.

26. What are the most common attributes of box-sizing? What are the roles of the two?

  • box-sizing: content-boxDefault standard (W3C) box model element effects
  • box-sizing: border-boxTriggers the effect of weird (IE) box model elements
  • box-sizing: inheritInherits the value of the parent element’s box-sizing property

27. What’s the difference between a double colon and a single colon in ::before and :after?

28. What are the common CSS layouts?

Common CSS layouts include fixed layout, streaming layout, elastic layout, floating layout, positioning layout, margin and padding.

29. What is reflux and redraw and the difference?

  • Reflux (rearrangement)reflow: Part (or all) of the Render Tree needs to be rebuilt due to changes in element size, layout, hiding, etc.
  • Redraw (repaint) : When some elements in the Render Tree need to update their attributes, which only affect the appearance and style of the elements, but not the layout, it is called redraw, such as color changes, etc.

Conditions that trigger rearrangement (backflow) :

  • Add or remove visibledomThe element
  • The position of the element has changed
  • The size of the element has changed, such as margin, width and geometry
  • Content changes, such as image size, font size changes, etc
  • Page render initialization
  • The browser window size changes, such as when the resize event occurs

Refer to the article

CSS chapter – nearly 20,000 words to help you consolidate CSS knowledge

49 CSS facts you may not know