css classic interview questions (2)

1. Clear floating

Let’s answer a question first, why do we need to clear floats?

If all the child doms in a dom are float: left or float: right, then all the child doms are at another level, and the level of the parent dom will be empty. Therefore, if the height of the parent dom is not specified, the parent dom will The height is 0

1. The simplest way to clear floating is to specify the height of the parent dom: xxxpx;
2. Add overflow:hidden to the parent dom to clear the floating method. When the overflow attribute is not visible, an independent rendering area of ​​BFC will be formed. This area The float will be regarded as the same independent level for rendering, so the height of the float dom is the height of the entire BFC rendering area.
3. Universal clearing method::after pseudo-element clear float (now the mainstream method, recommended) add a to the parent dom clear class name.

	.clear::after {
    
    
		content:"";
	    display:block;
	    height:0;
	    clear:both;
	    visibility:hidden;
	}

2. The difference between opacity: 0, visibility: hidden, display: none

display: none (let the dom not be arranged or rendered at all, so it naturally does not occupy space and cannot be clicked) visibility: hidden (
let the dom only be arranged and not rendered, so it occupies space but cannot be clicked)
opacity: 0 ( let the dom be only arranged and not rendered, so it occupies space but cannot be clicked) The DOM is both arranged and rendered, but the color is transparent and invisible, but it does not mean that it is not rendered. It exists, occupies space, and can be clicked)

3. Draw a triangle with css

div{
    
    
	width: 0;
	height: 0;
	border: 10px solid red;
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
}

4. Common mainstream browser prefixes

-moz-: firefox Firefox browser compatibility prefix
-o-: opera browser compatibility prefix
-ms-: early ie browser and edge browser compatibility prefix
-webkit-: mainstream Google browser, Safari, Opera Newer versions, compatibility prefix for almost all iOS browsers

With the development of front-end technology, the five major browsers in the past will also use a unified kernel. Currently, webkit is the most promising.

5. What is the difference between redrawing and reflowing?

First of all, it is established that the rendering tree is rendered on the page after html and css are synthesized. In other words, there will be at least one arrangement and drawing process. CSS calculation->arrangement->drawing is always such a process.
Arrangement is to calculate the position and size of the DOM on the page, and drawing is to display every pixel of the DOM.

1. If the user's operation or changes in the front-end program cause the page to change, redrawing and reflowing may occur.
2. In a popular sense, if the size and position of a DOM changes, it will cause rearrangement. If a DOM only has color and background changes, it may only cause redrawing.
3. Rearrangement will definitely lead to redrawing, but redrawing will not necessarily lead to reflowing.
4. Redrawing and rearrangement also have scope. The DOM of the page is not always at the same level. For example, animations such as position:fixed/absolute, z-index, transform, etc. will cause part of the DOM to be laid out in a completely new level. Layers are independent of each other, and redrawing and rearrangement within a layer will not affect outside layers. Therefore, during the development process, rational cutting of levels will effectively reduce the performance consumption caused by redrawing and rearrangement.

6. How to optimize images

There are also many ways to process images with css.
1. Integrate multiple icon files into one image (sprite image or sprite image). In the background, we can set the xy coordinates of position to display different content.
2. Generally, when the size of the image is less than 8k, it is directly converted to base64 for use.
3. Try to use the WebP format for browsers that can display the WebP format. Because the WebP format has a better image data compression algorithm, it can bring smaller image size, and it has image quality that is indistinguishable to the naked eye. The disadvantage is that the compatibility is not good. 4. For mobile terminals, the screen width is
so Point, there is absolutely no need to waste bandwidth by loading the original image. Generally, images are loaded using CDN, which can calculate the width to fit the screen, and then request the corresponding cropped image.
5. For some simple decorative pictures or simple animations, try to use CSS animation effects or CSS to achieve them.

7. What are the attributes of transition and animation in CSS3?

transition transition animation:

transition-property: Specify the CSS property of the transition
transition-duration: Specify the completion time required for the
transition transition-timing-function: Specify the transition function
transition-delay: Specify the delay time of the transition

animation keyframe animation:

animation-name: Specifies the name of the keyframe to be bound to the selector
animation-duration: The animation specifies how many seconds or milliseconds it takes to complete
animation-timing-function: Sets how the animation will complete a cycle
animation-delay: Sets the animation before starting The delay interval
animation-iteration-count: defines the number of times the animation is played
animation-direction: specifies whether the animation should be played in reverse in turn
animation-fill-mode: specifies when the animation does not play (when the animation is completed, or when the animation has a delay When playback has not started), the style to be applied to the element
animation-play-state: Specifies whether the animation is running or paused

8. Why use transform for centering (why not use marginLeft/Top)

Let’s first talk about how transform and marginleft/top are centered.

How to center marginleft/top

.position-outter {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: plum;
}

.position-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  background-color: pink;
}

How to center transform

.translate-position-outter {
    
     
	position: relative; 
	width: 300px; 
	height: 300px; 
	background-color: plum; 
}

.translate-position-center {
    
    
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: pink;
	transform: translate(-50%, -50%);
}

Transform will not cause large-scale redrawing and rearrangement of the page

Transform is a composite property. Transition/animation animation on the composite property will create a composite layer, which allows the animated element to animate in a separate layer. As long as the content of this layer does not change, there is no need to repaint (repaint), the browser will form a new frame by recomposite (recomposite).

top/left are layout attributes. Changes in these attributes will cause reflow/relayout. The so-called reflow refers to the CSS calculation->reflow->redraw process for these nodes and other nodes affected by these nodes. , the browser needs to redraw the entire layer, causing a huge performance overhead.

9. What are the properties used to control image scrolling?

background-attachment: This property sets whether the background image scrolls with the rest of the page or is fixed to scroll.

.box {
    
    
  background-image: url("img.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

10. Pseudo classes and pseudo elements

Pseudo elements: Elements that can be visually presented but cannot be found in the DOM. Common page icons or tooltips are implemented through pseudo elements. Commonly used pseudo elements include xxx::after, xxx::before, xxx::first-line, xxx::first-letter
pseudo-classes: add special effects to specific selectors. It adds categories to existing elements and does not generate new elements. Common ones include:hover, :nth-child(), :first-child, etc.

11. CSS style weight (priority)

!important > inline style > id > class > tag