Interview - CSS Basics

redraw and reflow

Repaint : Repainting is when the node needs to change its appearance without affecting the layout. For example, changing the background-color is called repainting

Reflow : Reflow is called reflow when the layout or geometric properties need to be changed.

回流必定会发生重绘,重绘不一定会引发回流. The cost of reflow is much higher than that of redrawing, and changing the child nodes in the parent node is likely to cause a series of reflows of the parent node.

Operations that cause reflows:

Change the size of the box, change the font, add or delete styles, change the word, position or float, add and delete labels to the box model, and get the width and height of the box.

Actions to reduce reflux:

Use the transform of css3, reduce the use of display, match and search Css selectors from right to left, and avoid too many node levels

What is graceful degradation and progressive enhancement? What is the difference between the two?

Elegant degradation : refers to building complete functions from the beginning, and then making compatibility for low-version browsers
**Progressive enhancement:** refers to building pages for low-version browsers to ensure the most basic functions, and then for advanced browsing
The difference between the two is as follows
(1) Graceful degradation starts from the complicated status quo and tries to reduce the supply of user experience .
(2) Progressive enhancement starts from a very basic and functional version, and continues to expand to meet the needs of future environments. (3) Degradation
(functional decay) means looking back, and progressive enhancement means Look ahead while keeping its foundations in a safe place.

Talk about the box model?

In the standard box model , width and height refer to the width and height of the content area. Increasing padding, borders, and margins will not affect the size of the content area, but will increase the overall size of the element's box.

In the IE box model , width and height refer to the width and height of the content area + border + padding.

Talk about your understanding of BFC, IFC, GFC, FFC specifications.

BFC (formatting context), a box that creates a new BFC is laid out independently, and the layout of elements inside the box does not affect elements outside the box. Two adjacent boxes in the same BFC will have margin overlapping problems in the vertical direction. BFC is an independent rendering area created in the value browser. The layout of all elements in this area will not affect the layout of elements outside the area. This rendering area only works on block-level elements.

IFC ( Inline Formatting Context ) refers to the height of the line box (line box) of the inline formatting context IFC is calculated from the highest actual height of the elements contained in the line (not affected by the padding margin in the vertical direction) The line in IFC The frame is generally close to the entire IFC on the left and right, but it will be disturbed by float elements. Multiple line cabinets in the same IFC have
different heights. It is impossible to have block-level elements in IFC. When inserting block-level elements (such as inserting a div in Two anonymous blocks are generated, separated by divs, that is, two IFCs are generated, and each IFC is externally represented as a block-level element, arranged vertically with the div. **GFC **(
GridLayout Formatting Context) refers to the grid layout formatting context , that is, when the display value of an element is set to grid, the element will obtain an independent rendering area. You can define the grid definition row (grid definition row) and grid definition on the grid container (grid container) Column ( grid
definition column ), in the grid item ( grid item ) defines grid row ( grid row ) and grid column ( grid column ) to define the position and space for each grid item. **FFC **(Flex
Formatting Context) refers to the adaptive formatting context, that is, the element whose sp la value is flex in line-flex will generate an adaptive container. Each child element in the flex container is a flex unit. A flex unit can be any number of flex elements. and all elements outside the flex container are unaffected Simply put, exbox defines the layout of flex units inside the flex container.

What are the common methods of vertically centering boxes? Please give 3 examples?

① Use the method of locating the father-in-law of the son to achieve

#container{
    
    
    width:500px;
    height:500px;
    position:relative;
}
#center{
    
    
    width:100px;
    hight:100px;
     position: absolute;
     top: 50%;
     left: 50%;
    margin-top:-50px;
    margin-left:-50px;
    
}

② By using the transform of Css3 , it is easy to realize the vertical centering of the element without knowing the height and width of the element.

#container{
    
    
    position:relative;
}
#center{
    
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

③ ** flex**

#container{
    
    
    display:flex;
    justify-content:center;
    align-items: center;
}

#center{
    
    

}

What are the methods to clear floats?

Why clear the floating, because the floating box is out of the standard flow, if the height of the parent box is not set, the box below will be propped up.

1. Additional label method (after the last floating label, add a new label and set clear: both;) (not recommended)

2. Add the overflow attribute to the parent (add overflow:hidden to the parent element) (not recommended)

3. Use the after pseudo-element to clear the float (recommended)

    .clearfix:after{
    
    /*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
    
    
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
｝

4. Use before and after double pseudo-elements to clear floats

 .clearfix:after,.clearfix:before{
    
    
        content: "";
        display: table;
    }
    .clearfix:after{
    
    
        clear: both;
    }
    .clearfix{
    
    
        *zoom: 1;
    }

Difference between device pixels, css pixels, device independent pixels, dpr, ppi?

• Device pixel : It is a physical pixel. Generally, the resolution of a mobile phone refers to the device pixel. The device pixel of a device is immutable.
• CSS pixels and device-independent pixels are equivalent. Regardless of the resolution of the device, the size of CSS pixels should be the same. CSS pixels are a relative unit, which is relative to device pixels. The size of a CSS
  pixel Depends on page scaling and dpr size.
• Dpr refers to the ratio of device pixels to device independent pixels. For a general PC screen, dpr=1. In iphone4, Apple launched a retina screen with a dpr of
  2. The scaling of the screen will change the value of dpr.
• Ppi refers to the density of physical pixels per inch, the larger the ppi, the greater the resolution of the screen;

em rem px pt vw vh

• px
• Pixels are an absolute unit, a virtual length unit, and a digitized image length unit of a computer system. Pixels are relative to the screen resolution of the display, and elements using this unit will not change due to changes in the size of other elements.
• pt
  is Pound Points, which is an absolute unit and a unit of physical length, equal to 1/72 inch
• The relative unit of em
  , the reference base is the font size of the parent node (representing the font size relative to the parent element)
• rem
  is the root em. Like em, it is also a relative length unit, which is calculated based on the font-szie of the body;
• vh/vw
  viewport percentage (viewport-percentage lengths, which includes four units of vh, vw, vmin and vmax, these four units are relative length units;
  vh: height percentage based on the visual area, such as: height: 10vh;
  vw: Width percentage based on the viewable area, such as: width: 10vw;
  vmin and vmax: both select the largest or smallest percentage from width or height;
• Percentage%
  Percentage is also a commonly used unit of length, which is always relative to the corresponding attribute of the parent element, that is, one-to-one correspondence with the attribute of the parent. For example: width: 100% is equal to 100% of the width of the parent, but does not include the padding of the parent; font-size: 120% is equal to 120% of the font size of the parent.

Common ways to hide elements?

• display:none; No space is occupied in the page, and the bound listening event will not be responded;
• visibility:hidden; Occupies the page, and will not respond to the bound listening event;
• opacity: 0; Occupancy in the page, it will respond to the bound listening event;
• Use positioning to remove the visible area;
• negative z-index;
• It is realized by the clip/clip-path element clipping method, which occupies a place in the page and will not respond to the bound listening event;
• transform:scale(0,0); Occupies the page and will not respond to bound listening events;

positioning position

• static Static positioning (no off-label, and z-index layering is not possible)
• The default value of the HTML document element is not affected by the top, bottom, left, and right attributes;
• Relative relative positioning (not off-label, you can use z-index for layering)
  relative to its own position.
• absolute absolute positioning (off-label, you can use z-index for layering)
• Its starting position is the parent element whose position value is not static. If there is no position value, the HTML shall prevail, and the final position shall be determined by top, bottom, left, and right;
• fixed fixed positioning (off-label)
  its starting position is relative to the viewport and is a fixed position that does not scroll with the sliding of the scroll bar;
• Sticky sticky positioning (off label)
  its relative offset is relative to the parent label, setting top and other values ​​will only be sticky in the parent label;

Let’s talk about image formats such as png, jpg, gif, svg, etc. Have you ever learned about webp?

• (1) BMP format, which is lossless compressed and supports bitmaps of indexed colors and direct colors. Since it is basically not compressed, its file size is generally relatively large.
• (2) GIF format, which is a lossless compressed bitmap using indexed colors. Due to the LZW compression method, the file size is small. And GIF also supports animation and transparency. But because it uses indexed colors, it is suitable for some scenes that do not require high color and require a small file size.
• (3) JPEG format, which is a lossy compressed bitmap using direct color. Due to the use of direct color, the color is richer, and it is generally suitable for storing photos. However, due to the use of direct color, the size of the file may be larger than that of the GIF format.
• (4) PNG-8 format, which is a lossless compressed bitmap using indexed colors. It is a good alternative format to GIF, it also supports the adjustment of transparency, and the file size is smaller than GIF format. Generally speaking, if animation is not required, we can use PNG-8 format instead of GIF format.
• (5) PNG-24 format, which is a lossless compressed bitmap using direct color. The advantage of PNG-24 is that it uses a compression algorithm, so its volume is much smaller than the BMP format file, but it is still larger than several other formats.
• (6) The svg format, which is a vector diagram, records the drawing method of the picture, so zooming in and out of the vector diagram will not produce jaggedness and distortion. It is generally
  suitable for making pictures such as some website logos or icons.
• (7) webp format, which is a direct-color bitmap that supports both lossy and lossless compression methods. The biggest advantage of using the webp format is that it has a smaller file size under the same quality file. Therefore, it is very suitable for the transmission of network pictures, because the reduction of picture size means the reduction of request time,
  which will improve the user experience. This is a new image format developed by Google, which is currently not very compatible in terms of compatibility.

How to make Chrome support text smaller than 12px?

When the font size is set to 12px or below in Google's CSS, the display is the same size, and the default is 12px.

Solution:

(1) It can be solved by using the private CSS property of -webkit-text-size-adjust in the core of Webkit, as long as -webkit-text-size -adjust:none is added; the
font size is not limited. But after chrome is updated to version 27, it cannot be used. Therefore, the higher version of Google Chrome
no longer supports the -webkit-text-size-adjust style, so use it with caution.

(2) You can also use the transform scaling attribute of css3 -webkit-transform:scale(0.5); Note -webkit-transform:scale(0.75);
shrinks the size of the entire element. At this time, if it is an inline element , it is necessary to convert inline elements into block elements, you can use display: block/
inline-block/…;

(3) Use pictures: If the content is fixed, cut out the text content of less than 12px to make pictures, which will not affect compatibility or affect the appearance.

How to make the font on the page clearer and thinner with CSS?

The private property of the webkit kernel: ** -webkit-font-smoothing**, used for font anti-aliasing, the font will look clearer and more comfortable after use.

Set **-webkit-font-smoothing: antialiased under the MacOS test environment; but this property is only for MacOS**, and it is invalid after other operating systems are set.

Draw a 0.5px line

1. Using the meta viewport method
2. Using the border-image method
3. Use transform:scale() method

What is the difference between double and single colons in ::before and :after?

In CSS3, single colons are used to represent pseudo-classes, and double colons are used to represent pseudo-elements. However, in order to be compatible with the existing pseudo-elements, in some browsers, a single colon can also be used 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.

Pseudo-classes are used to add corresponding styles to existing elements when they are in a certain state, which changes dynamically according to user behavior. For example, when the user hovers over a specified element, we can use :hover to describe the state of this element.
Pseudo-elements are used to create and style elements that are not in the document tree. They allow us to style certain parts of an element. For example, we can use ::before to add some text before an element and add styles to the text. Although the user can see the text, the text is not actually in the document tree.

How to implement single-line/multi-line text overflow omission?

/*单行文本溢出*/
p {
    
    
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*多行文本溢出*/
p {
    
    
  position: relative;
  line-height: 1.5em;
  /*高度为需要显示的行数*行高，比如这里我们显示两行，则为3*/
  height: 3em;
  overflow: hidden;
}

p:after {
    
    
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}