This is my first post with the Nuggets, documenting the most frequently asked questions about CSS during my recent job search. Stay tuned for more. Depending on the level of the interviewer and the technical points that the interviewer is good at, there are many different points of emphasis in each interview, and as a job seeker, we can only do our best to research, think, and summarize as much as possible. If you encounter csS-related problems later, I will add them here.

1. What is BFC? Explain

  • Concept: Block formatting context, which is a separate rendering area that dictates how the internal elements are laid out, unrelated to the external area
  • Conditions for creating a BFC: root element (HTML); Float elements (float is not None); Absolute positioning elements (position is absolute and fixed); Inline block elements (element display is inline-block); Display :table-cell or table-caption; Overflow calculates a block element whose value is not visible; Elastic elements (direct children of the display: Flex element); Grid element (direct child of display: Grid element)
  • BFC rule: Margins of two adjacent boxes belonging to the same BFC will overlap; The BFC region does not overlap the float element region; When calculating the height of the BFC, the floating child element also participates in the calculation. The text layer is not covered by the floating layer and surrounds the surroundings
  • BFC application: prevent margin overlap, so that two boxes belonging to different BFC can contain floating elements; Prevent parent elements from collapsing; Prevents elements from being overwritten by floating elements and ADAPTS to a two-column layout

2. Center elements horizontally and vertically

  • Text, inline element, inline block element, image: text-align+line-height+vertical-align
  • Flexible box: Flex +justify-content+align-items
  • Absolute positioning: Position +margin(fixed width and fixed height); Position +transform(compatible transform);
  • Absolute center: position+margin:auto;
/* Scenario 1 -- text, inline elements, inline block-level elements, images */
#parent{ 
  height: 150px; 
  line-height: 150px; /* Line height is the same as height */ 
  text-align: center; 
  font-size: 0; /* Eliminate the ghost blank node bug*/ 
}
#son{ 
/*display: inline-block; * / /* If the element is a block level, it needs to be changed to inline or inline block level */    
  vertical-align: middle; 
}
/* Option 2 -- Elastic box */ 
#parent{ 
  display: flex; 
} 
#son{ 
  margin: auto; # the parent {} ordisplay: flex; justify-content: center; align-items: center; # the parent {} ordisplay: flex; 
  justify-content: center;
}
#son{ 
  align-self: center; 
}
/* Option 3 -- absolute positioning */ 
#parent{ 
  position: relative;
} 
#son{ 
  position: absolute;
  top: 50%; 
  left: 50%; 
  /* margin-left: negative half of its width; Margin-top: negative half of its height; * / 
  transform: translate(-50%, -50%); 
}
/* Option 4 -- Absolutely centered */ 
#parent{ 
  position: relative;
} 
#son{ 
  position: absolute;
  margin: auto; 
  width: 100px; 
  height: 50px; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
}
Copy the code

3. Clear floats

  • Clear float reasons: text is formatted around float elements. The parent element collapses so that the floating element blocks the normal element;
  • How to clear the float:
  1. Add the empty div element clear:both after the float element to solve the problem of typesetting text around the float element.
  2. Add Overflow: Hidden or Auto to the parent element to trigger the BFC and solve the height collapse problem;
  3. Using pseudo-elements is also done by adding a dot to the end of the element with the clear: both attribute.

4. What are physical pixels and device-independent pixels

  • Pixel concept: A pixel is a small square with independent position and color;
  • Screen resolution: how many pixels a screen is composed of;
  • Image resolution: the number of pixels an image contains. For a picture of the same size, the higher the resolution, the clearer it will be.
  • Physical pixels: The physical pixels of any device are fixed, real physical units on the device;
  • Device-independent pixel: An abstract pixel concept that allows devices of different resolutions to measure in units of abstract pixels to maintain visual consistency.
  • Device pixel ratio: DPR = physical pixel/device independent pixel;
  • Designers are given drawings based on physical pixels;
  • Use CSS pixels in the development process, CSS pixels are easy to change, page scaling factor = CSS pixels/device independent pixels;

5. Pseudo classes and pseudo elements

  • Pseudo-elements: Used to create and style elements that are not in the document tree, or to style specific parts of the selected element. Common pseudo-elements :: :before, ::after, ::first-line, ::first-letter, ::placeholder, :: Selection, etc
  • Pseudo classes: A class of CSS selectors that use pseudo classes to find information that does not exist in the DOM tree and cannot be retrieved by regular CSS selectors. Common pseudo-classes are shown in the following figure:

6. Talk about reflux and redraw

  • Preface:
  1. Browsers use streaming layout: the way “blocks” and “inline” elements are displayed on a page.
  2. Step 1: The browser processes the HTML markup and constructs the DOM tree; Step 2: Process the CSS and build the CSSOM tree; Step 3: Combine the DOM tree with the CSSOM tree into a Render tree, then calculate the size and position of each node on the page, and finally draw the nodes on the page.
  • Backflow: The process by which the browser rerenders part or all of a Render Tree document when the size, structure, or properties of some or all elements change.
  • Backflow factors: first rendering of the page; Element size or position changes; Element content changes (text number, etc.); Element font size changes; Add and remove visible DOM elements; Query certain attributes or call certain methods: offset class, Client class, Scroll class and other attributes, getComputedStyle(), scrollIntoView(), scrollTo() and other methods.
  • Repaint: Changing the style of a node without affecting the geometry of the node will result in repaint: modifying elements such as color and background-color.
  • How to avoid backflow and redraw:
  1. Avoid table layouts;
  2. Avoid using the CSS expression calc();
  3. Apply animation to elements with position attributes absolute and Fixed;
  4. Avoid manipulating styles too often. It is best to override the style property at once, or use class to change styles at once.
  5. For resize,scroll and other operations to handle the shaking, throttling;
  6. Avoid frequent repeated reads of properties (client,scroll,offset classes) that cause backflow and redraw, and cache them in a variable if necessary.

7. How do I draw a 0.5px line

  • In HD (DPR >=2) you can set the 0.5px directly, but this way Chrome rounds the 0.5px to 1px;
  • Transform: scale() scale(the most common method);
.hr { 
  height: 1px;
  transform: scaleY(0.5); 
  transform-origin: 50% 100%; 
}
Copy the code
  • The linear gradient is adopted, the lines are not clear and a little blurred;
.hr.gradient {
  height: 1px;
  background: linear-gradient(0deg, #fff, #000); 
}
Copy the code
  • Use boxShadow as a shadow;
.hr.boxshadow { 
  height: 1px; 
  background: none; 
  box-shadow: 0 0.5px 0 #000; 
}
Copy the code
  • Using SVG: 1px in SVG is a physical pixel, not a device-independent pixel;
.hr.svg {
  background: none;
  height: 1px; 
  background: url("data:image/svg+xml; utf-8,
      
       
      "); 
}
Copy the code
  • Adopt the border-image mode.
  • Use meta ViewPort: Set the zoom scale.

Several ways of compatibility:

8. What is the difference between opacity and RGBA?

  • Opacity applies to elements and all content within them;
  • Rgba only works on elements, and children within elements do not inherit transparency;

10. CSS box model

  • Box model: Element content + inner margin + border + margin
  • W3c standard model: When box-sizing is content-box (default), width= the content area of the element;
  • Width = width +padding+border;

11. How to achieve a two-column layout

  • Position: Absolute
  • Flexible box (display: Flex)
  • Inline block (display:inline-block)
  • Float element + BFC element (float:left + Overflow :hidden)

Flex :0, 1 and auto stand for what?

  • Flex-grow () : How to deal with the remaining space when the child element has less space than the parent element;
  1. The default value is 0, indicating that no free space is occupied.
  2. When all the child elements are 1, it means that the remaining space is evenly allocated.
  3. When one child element is 2 and the others are 1, the child element of 2 takes up twice as much space as the other child elements.
  4. When one child element is 1 and the rest are 0, the child element of 1 occupies the global remaining space;
  • Flex-shrink () : how to shrink a child element if it has more space than its parent;
  1. The default value is 1, indicating isometric shrinkage.
  2. When all children are set to 1, all children shrink equally;
  3. When one child element is 0 and the others are 1, the 0 child element does not shrink;
  • Flex-basis: specifies the initial size of a Flex element in the main axis. If an element is set to both flex-basis (except auto) and width, flex-basis takes precedence.
  1. The default value is auto, indicating that the main axis size occupied by the project is equal to the actual content size of the project.
  2. Set to a fixed value means that the size of the main axis occupied by the item is a fixed value;

13. Cascade context, cascade level, cascade order, z-index

  • The concept of cascading context: A cascading context is a THREE-DIMENSIONAL representation of an HTML element. If an element has a cascading context, it is understood that the element is closer to the screen viewer on the Z-axis.
  • Create cascading context: document root element (HTML); An element whose position is absolute or relative and z-index is not auto. Elements whose position value is fixed or sticky; A child element of the Flex container, and z-index is not 0; A child element of the grid container, and z-index is not 0; The opCity property value is less than 1. Elements that have the following CSS attributes and the value is not None: transform; Filter; Mask D. 1. The hand offered by the hand
  • Hierarchy concept: The order of HTML elements above and below the Z axis in the same hierarchy context.
  • 1. In the context of uniform hierarchy, hierarchy;