css

1. The difference between link and @import

Essentially, these two methods are for loading css files, but there are still subtle differences

Link is an XHTML tag, and @import is a way provided by css. In addition to loading css, the link tag can also do many other things, such as defining RSS, defining rel connection attributes, etc. @import can only load CSS
The difference in loading order. When a page is loaded, the CSS referenced by link will be loaded at the same time, and the CSS referenced by @import will wait until the page is all downloaded before loading.
The difference in compatibility. Since @import is proposed by CSS2.1, old browsers do not support it. @import can only be recognized in IE5 and above, and the link tag has no such problem and is fully compatible.
The difference when using DOM to control styles. When using JavaScript to control the DOM to change the style, you can only use the link tag, because @import is not controlled by the DOM.

2. Box model

2.1 What is the box model

The page is stacked by box models, and each HTML element can be called a box model
The box model from the outside to the inside includes: margin, border, padding, content
The box model has the standard box model and the IE box model. The difference between the two is: the width and height of the standard box model is the size of content, while the IE's is content+padding+border

2.2 How to set up two box models

box-sizing: content-box (W3C standard box model)
box-sizing: border-box (IE box model)

2.3 How does JS get and set the width and height of the box

dom.style.width/height : Only the width and height of the inline style can be taken out
dom.currentStyle.width/height : Get real-time calculated style, but only supported by IE
window.getComputedStyle(dom).width : Get the style of instant calculation, support other browsers, and have better compatibility
dom.getBoundingClientRect( ).width/height : Calculate the absolute position of the box model on the page, which is rarely used.
dom.offsetWidth/offectHeight : returns the actual size of the element

2.4 What is margin overlap? Under what circumstances will overlapping margins occur? How to resolve overlapping margins?

Margin overlap: Two adjacent margins (margin-top, margin-bottom) in the vertical direction may be merged into one margin. This phenomenon is called collapse, and the one with the larger absolute value is displayed on the page as the final result on

2.5 Basic concepts of BFC

BFC (Block Level Formatting Context), it determines how an element locates its content, as well as the relationship and interaction with other elements. In layman's terms, it is a special block with its own layout inside and is not affected by external elements

How BFC is produced:

overflow：auto/hidden

position:absolute/fixed

float:left/right

display:inline-block/table-cell/table-caption/flex/inline-flex

3. The difference between display: none, visibility: hidden and opcatity:0

Space occupation

display:none will not take up extra space and will cause reflow and redraw
visibility: hidden and opacity:0 will occupy space and only redraw
visibility: hidden does not affect the count of the list

Inheritance

display:none will not be inherited by child elements. After the element is set with this attribute, itself and its child elements will be hidden. Even if display:block is set on the child element, the child element will not be displayed.
visibility:hidden will be inherited by child elements, and the child element can be redisplayed by setting the visibility:visible property of the child element
opacity:0 will be inherited by child elements and cannot be displayed by setting opacity:1 of child elements

Event binding

The events bound to the display:none and visibility:hidden elements cannot be triggered
opacity:0 Events bound on the element can be triggered

Transition animation

Transition is invalid for display:none and visibility:hidden
transition is valid for opacity:0

4. BFC related

BFC definition

BFC (Block formatting context) is literally translated as "block-level formatting context". It is an independent rendering area, and the layout of elements is not affected by the outside world

BFC layout rules

The inner boxes will be placed vertically one after another
The vertical distance of the box is determined by the margin. The margins of two adjacent boxes belonging to the same BFC will overlap
The left side of the margin box of each box touches the left side of the border box containing the block
The BFC area will not overlap with the float box
BFC is an isolated and independent container on the page, the child elements inside the container will not affect the outside elements, and vice versa
When calculating the height of the BFC, floating elements also participate in the calculation

How to create BFC

overflow：auto/hidden
position:absolute/fixed
float:left/right
display:inline-block/table-cell/table-caption/flex/inline-flex

The role of BFC

Use BFC to avoid margin overlap
Adaptive two-column layout
Clear float

5. Clear float

Method 1: Add height to the ancestor element of the floating element

In web page production, because the height can be supported by the content, the height rarely appears

Method two: clear: both

This method has a very big and fatal problem: the margin fails

Method 3: Partition wall method

It is also called the extra tag method, which is to add an empty tag at the end of the floating element and add the clear: both style. The newly added element must be a block-level element. Due to the addition of meaningless tags and poor structure, it is not recommended to use

Method 4: Add overflow attribute to the parent

You can add an overflow attribute to the parent element , and set its attribute value to hidden, auto, or scroll

Advantages: simple code
Disadvantage: unable to display the overflow part

Method 5: Add the :after pseudo element to the parent

The :after method is an upgrade of the extra tag method

.clearfix:after {
    
    
	content: "";
	display:block;
	clear:both;
	height:0;/*兼容旧浏览器*/
	visibility:hidden;/*兼容旧浏览器*/
}
.clearfix {
    
    
	*zoom:1;/*兼容IE6~7浏览器*/
}

6. Selector priority

Inline style priority 1000
id selector priority 100
Class selector priority 10
Element selector priority 1
Unified selector priority 0
No inherited style priority

7. Horizontal and vertical centering

Center element fixed width and height

absolute + 负margin

.father {
      
      
    position:relative;
}
.son {
      
      
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-50%;
    margin-top: -50%;
}

absolute + margin auto

.father {
      
      
    position:relative;
}
.son {
      
      
    position: absolute;
    top:0;
    left:0;
    bottom: 0;
    margin:auto;
}

absolute + calc

.father {
      
      
    position:relative;
}
.son {
      
      
    position:absolute;
    top: calc(50%-son盒子高度的一半);
    left: calc(50%-son盒子宽度的一半);
}

Centered element variable width and height

absolute + transform (The compatibility of this method depends on the compatibility of translate2d)

.father {
      
      
    position:relative;
}
.son {
      
      
    position:absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%)
}

line-height

.father {
      
      
    line-height: 300px;// 与其高度一致
    text-align: center;
    font-size: 0px;
}
.son {
      
      
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; /* 修正文字 */
}

css-table

.father {
      
      
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.son {
      
      
    display: inline-block;
}

flex

.son {
      
      
    display: flex;
    justify-content: center;
    align-items: center;
}

8. CSS to make circle, triangle

Round

.box {
      
      
    width:5px;
    height:5px;
    background-color:blue;
    border-radius:50%
}

triangle

.box {
      
      
    width:0;
    height:0;
    border-width:10px;
    border-style:solid;
    border-color: #ccc transparent transparent transparent
}

9. px in rem

px pixels (Pixel). Relative length unit. The pixel px is relative to the monitor screen resolution.
em is a relative length unit. Relative to the font size of the text in the current object. If the current font size of the text in the line has not been manually set, it is relative to the default font size of the browser.
Rem is a relative unit (root em) newly added to CSS3. What is the difference between this unit and em? The difference is that when using rem to set the font size for an element, it is still a relative size, but the relative size is only the HTML root element.

10. Reflow and redraw

what happens when the html loads

When the page is loaded, the browser parses the obtained HTML code into a DOM tree. The DOM tree contains all HTML tags, including display:none hidden, and elements dynamically added with JS.
The browser parses all styles (user-defined CSS and user agents) into a style structure DOM Tree and a combination of the style structure to build a render tree
The render tree is similar to the DOM tree, but the difference is very big, because the render tree can recognize styles, each NODE in the render tree has its own style, and the render tree does not contain hidden nodes (such as display: none nodes, and head Nodes), because these nodes will not be used for rendering and will not affect the rendering, so they will not be included in the render tree. The simple understanding is that after the DOM Tree and CSS are combined, the render tree is rendered.

What is reflux

When part (or all) of the render tree needs to be rebuilt due to changes in the size, layout, and hiding of elements. This is called reflow.
Each page needs to be reflowed at least once, that is, when the page is loaded for the first time, reflow will definitely occur at this time, because the render tree needs to be constructed.
During reflow, the browser invalidates the affected part of the rendering tree and reconstructs this part of the rendering tree. After the reflow is completed, the browser redraws the affected part to the screen. This process is called redrawing.

What is redrawing

When some elements in the render tree need to update attributes, and these attributes only affect the appearance and style of the element, but not the layout, such as background-color. It is called redrawing.

the difference:

Reflow is bound to cause redrawing, and redrawing does not necessarily cause reflow. For example: when only the color changes, only redrawing will occur without causing reflow
When the page layout and geometric properties change, reflow is required. For
example: adding or deleting visible DOM elements, element position changes, element size changes-margins, padding, borders, width and height, content changes

Front-end interview-css

css