One article to solve the front-end interview ----HTML and CSS (the most detailed summary of the two swordsmen )

Write in front

Hello, everyone. I m Kerwin and R. I m doing an internship at Tencent. I have received help from many people along the way. I have also read articles from various great gods. Now I will slowly summarize and open up all my notes. I hope to be able to Help more people and be able to make progress with you. If there is any problem with the article, I hope to raise it in time so as not to mislead more people.
I like concise answers. I don't like long-form answers. I will try my best to make my answers detailed and easy to understand. If you want to improve yourself, you also need to learn more principles based on the corresponding points.

Edible objects: Junior front-end & school students
Delicious index:

If you are a big brother, I would like to say hello to you first, I suggest you Alt+F4, this article is not for you

HTML

1. What is DOCTYPE?

DOCTYPE is an abbreviation of document type. It is a document type declaration in a markup language, which tells the browser what version of HTML is currently written and what specification should be used to parse the page. After the W3C standard came out, browsers have a unified standard for page rendering, and this rendering method is called standard mode.

<!DOCTYPE>

Non-existence or incorrect format will cause HTML or XHTML documents to be presented in a promiscuous mode, which means that the right to render html pages is given to the browser. There are as many display methods as there are browsers.

2. html semantic tags:

Meaning: Let the label have its own meaning
1. Make it easier to read (increase code readability), facilitate team development and maintenance
2. It is convenient for other devices to render web pages in a semantic way, making it easier for search engines to read ( SEO)

3. The difference between src and href

src: Point to the location of the external resource. The pointed content will be embedded in the document where the current tag is located, replacing the current content. At the same time, the download and processing of other resources will be suspended until the resource is loaded, compiled, and executed. The commonly used script is script , Img.
href (abbreviation of Hypertext Reference, I generally read it as HyRefer): Represents a hypertext reference, used to establish a link between the current element and the document, and will download resources in parallel without stopping the processing of the current document. Commonly used are: link, a.

4. Meta tag

<meta>

Tags provide metadata about HTML documents. It will not be displayed on the page, but it is readable by the machine. Can be used for browsers (how to display content or reload the page), search engines (keywords), or other web services, the main attributes are http-equiv and name

5. Block-level elements and inline elements

Block-level elements (on a single line): div, h1, h2, table, form, ul, ol, p
Inline elements (not on a line): span, img, input, button, a, i, label
Difference:
block-level elements always occupy a line, height, width, etc. can be set
inline elements and other elements in the same line, do not occupy a line by themselves, height and width cannot be controlled, only text or other inline elements can be accommodated. Margin only works for left and right

6. The difference between SVG and Canvas

SVG: SVG is a language that uses XML to describe 2D graphics. Each graphic element drawn is an independent DOM node, which is convenient for late binding events or modification, and is not suitable for game applications.
Canvas: Canvas draws 2D graphics through JavaScript, which can be regarded as a canvas. The graphics drawn are scalar graphics, which depend on the resolution and are suitable for games.

7.h5 new tag

The header tag contains guidance and navigation, etc., usually contains
h1~h6
, Search box, logo, etc.
The footer tag generally matches the address tag (display address), and contains author information, related links, etc.
The nav tag generally contains multiple a tags to build navigation components.
The aside tag mainly contains advertisements and sidebars.
The article tag contains the article, generally embedded header, footer, h1, p tags.
The section tag can be used to divide components in any of the above tags.
As the name suggests, hgroup is a collection of h1~h6.

CSS

1. CSS box model

Composition: content (content), padding (inner margin), border (border), margin (outer margin)

content-box

(W3C standard) (default) width: Indicates the width of content:, excluding padding and border
2:

border-box

(IE standard) width: represents the sum of content + padding + border

box-sizing

Can control the box model, the default is content-box

2. Margin overlap and margin negative value problem

Margin overlap:
1. The margin-top and margin-bottom of
adjacent elements will overlap 2. The margin-right and margin-left of adjacent elements will not overlap.
Negative margin values:
1. Negative margin -top and margin-left Value, the element itself moves up and moves to the left
2. Negative value of margin-right, the right element moves to the left, itself is not affected
3. Negative value of margin-bottom, the element below moves up, itself is not affected

3.BFC

Meaning: block-level formatting context, an independent rendering area, rendering of internal elements will not affect elements outside the boundary
1. Common conditions for triggering BFC

html root element
elements whose float is not none
position is absolute or fixed element
Overflow is not a visible block element
display is an element of flex inline-block and table-cell

2. The role of BFC

Avoid overlapping margins

    < style > .box1 {
             width : 100px ;
             height : 100px ;
             background-color : #07d268 ;
             margin-bottom : 50px ;
        
        }

        .box2 {
             width : 100px ;
             height : 100px ;
             background-color : #833cc9 ;
             margin-top : 20px ;
        }

        .wrap {
             overflow : hidden;
        }  
    </style > 
    < div  class = "box1" > </div > 
    < div  class = "wrap" > < div  class = "box2" > </div > </div > 
Copy code

Clear the float (add overflow: auto to the parent element)
Prevent elements from being covered by floating elements (add overflow: auto to the covered elements)

4. Three-column layout

Holy Grail Layout and Double Flying Wing Layout
Purpose:

Three-column layout, the middle column is loaded and rendered first (content is the most important)
The content on both sides is fixed, the middle content is adaptive with the width
Generally used for PC web pages

Technical summary:

Use float layout
Use negative margins on both sides to overlap the middle content horizontally
To prevent the middle content from being covered on both sides, one uses padding and the other uses margin

the difference:

The double-wing layout uses margin to leave space, while the Holy Grail layout uses padding
After adopting negative margin-left values, the double-wing layout does not need to be positioned according to itself, but the Holy Grail layout requires

Shuangfei wing layout code:

    < style > body {
             min-width : 550px
        
        }

        .column {
             float : left;
        }

        #center {
             width : 100% ;
             height : 200px ;
             background-color : #cccccc ;
        }

        #main {
             margin : 0  190px  0  190px ;
        }

        #left {
             background-color : #ffff00 ;
             width : 190px ;
             height : 200px ;
             margin-left : -100% ;
        }
        #right {
             background-color : red;
             width : 190px ;
             height : 200px ;
             margin-left : -190px ;
        }
    </style >

    < div  id = "center"  class = "column" > 
        < div  id = "main" >
            this is center
        </Div > 
    </div > 
    < div  ID = "left"  class = "column" > the this IS left </div > 
    < div  ID = "right"  class = "column" > the this IS right </div > 
copy the code

Holy Grail layout code:

    < style > body {
             min-width : 550px
        
        }

        #header {
             text-align : center;
        }

        #container {
             padding-left : 200px ;
             padding-right : 150px ;
        }

        #container  .column {
             float : left
        }

        #center {
             background-color : #ccc ;
             width : 100%
        }

        #left {
             position : relative;
             background-color : yellow;
             width : 200px ;
             margin-left : -100% ;
             right : 200px
        }

        #right {
             background-color : red;
             width : 150px ;
             margin-right : -150px ;
        }

        #footer {
             clear : both;
             text-align : center;
             background-color : #f1f1f1
        }
    </style >

    < div  id = "container" > 
        < div  id = "center"  class = "column" > this is center </div > 
        < div  id = "left"  class = "column" > this is left </div > 
        < div  id = "right"  class = "column" > this is right </div > 
    </div >
Copy code

5. Two column layout

Knowing the three-column layout, if you want to come up with a two-column layout, it must be easy for you. Here are three two-column layout methods that must be mastered.

Absolute positioning method

    < style > .wrap {
             position : relative;
             width : 100% ;
             height : 200px ;
        
        }
        .box1 {
             position : absolute;
             width : 150px ;
             height : 200px ;
             background-color : #d43131 ;
        }
        .box2 {
             position : absolute;
             left : 150px ;
             right : 0 ;
             height : 200px ;
             background-color : #07d268 ;
        }
    </style > 
    < div  class = "wrap" > 
        < div  class = "box1" > 1 </div > 
        < div  class = "box2" > 2 </div > 
    </div > 
Copy code

Floating method

    < style > .box1 {
             float : left;
             width : 150px ;
             height : 200px ;
             background-color : #d43131 ;
        
        }
        .box2 {
             margin-left : 150px ;
             height : 200px ;
             background-color : #07d268 ;
        }
    </style > 
    < div  class = "wrap" > 
        < div  class = "box1" > 1 </div > 
        < div  class = "box2" > 2 </div > 
    </div > 
Copy code

flex way

    < style > .wrap {
             display : flex;
             height : 200px ;
        
        }
        .box1 {
             width : 150px ;
             height : 200px ;
             background-color : #d43131 ;
        }
        .box2 {
             flex : 1 ;
             height : 200px ;
             background-color : #07d268 ;
        }
    </style > 
    < div  class = "wrap" > 
        < div  class = "box1" > 1 </div > 
        < div  class = "box2" > 2 </div > 
    </div > 
Copy code

5. About floating

Floating features:
Floating will cause the element to leave the standard flow, do not occupy page space, and will cover the standard flow elements, but the text
elements that will not cover the standard flow elements will be arranged on the left or left of the parent element, or arranged on the already floating The method of clearing the float on the left or right of the element:

Trigger BFC

Add overflow: auto to the parent element

Use pseudo-element (clearfix)

.clearfix ::after {
     content : '' ;
     display : table;
     clear : both;
}
Copy code

Set one more sibling element, plus clear: both, other methods are similar.

6. Positioning

static: default positioning
relative: According to its own positioning
absolute: Positioning based on the positioning element of the nearest layer
fixed: fixed positioning, the position of the element is a fixed position relative to the browser window
inherit: inherit the positioning of the parent element
sticky: sticky positioning
depends on the user's scrolling, switching between position: relative and position: fixed positioning.
It behaves like position: relative; and when the page scrolls beyond the target area, it behaves like position: fixed; and it will be fixed at the target position.

7. Horizontal and vertical centering

Focus, it is recommended to try a variety of methods

Use absolute absolute positioning, top and left: margin-left and margin-top are both negative, which is half of the element's own width and height
Use absolute absolute positioning, top and left: 50%, transform: translate(-50%, -50%)
Use absolute absolute positioning: top, left, bottom, right are all set to 0, margin: auto
Use flex

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

grid

PS
text-align: center
line-height height

8.line-height

line-height 30px ,
2/1.5 font-size
If it is a percentage, such as 200%, the value calculated based on the father's font-size multiplied by the ratio is inherited. (Test site)

9. Length unit

px: Relative length unit. Pixel px is relative to the monitor screen resolution
em: Relative length unit, relative to the parent element, not commonly used
rem: relative length unit, relative to the root element, often used in responsive layout

10. Responsive layout

Meaning: Responsive layout refers to the same page with different layouts under different screen sizes

Method to realize:

1. Media query
2. Percentage layout
Through the percentage unit, the width and height of the components in the browser can be changed with the height of the browser, so as to achieve a responsive effect
3. Rem layout
REM is a new unit of CSS3 , The mobile terminal support is very high, the rem unit is relative to the font-size of the root element html.
4. The
new unit vw/vh in the viewport unit css3
vw is relative to the width of the window, 1vw is equal to the width of the viewport 1% of the window width is 100vw
vh relative to the height of the window, 1vh is equal to 1% of the viewport height, that is, the window height is 100vh
vmin vw and vh, the smaller value
vmax vw and the larger value of vh
rem

The difference between responsive design and adaptive design:

Responsive development
set
Interface, by detecting the resolution of the viewport, and performing code processing on the client for different clients to show different layouts and content
Adaptation needs to be developed
Multiple sets
The interface, by detecting the resolution of the viewport, determines whether the currently accessed device is a PC, tablet, or mobile phone, thereby requesting the service layer and returning a different page.

11. CSS selector:

Class selector: .X
id selector: #X
Tag selector: div
*
X Y
X>Y
[attr] attr
A+B B A B A B
A~B B A B B

:link
:visited
:hover
:active
:first-child

::before
::after

: style="..." 1000
ID #content 100
.content 10
div p 1
* > + 0000
!important

12.@import link

link html @import css style css
link @import
link CSS @import CSS

13.display: none visibility: hidden opacity: 0

display: none
visibility: hidden opacity: 0

display: none reflow repaint
visibility: hidden opacity: 0

display:none
visibility visibility visible name
opacity: 0 opacity: 0

display: none visibility: hidden
opacity: 0

transition display visibility
transition opacity

14.flex

--flex

flex Flex
display: flex

6 :

flex-direction

flex-direction: row | row-reverse | column | column-reverse
flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse
Flex-flow
is the short form of flex-direction property and flex-wrap property, the default value is row nowrap
justify-content
defines the alignment of the item on the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around
align-items
defines how
items are aligned on the cross axis align-items: flex-start | flex-end | center | baseline | stretch (default)
align-content
defines the alignment of multiple axes. If the project has only one axis, this property has no effect.
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

6 attributes of child elements

order
defines the items. The smaller the value, the higher the arrangement, the default is 0
flex-grow
defines the magnification ratio of the item, the default is 0
flex-shrink
defines the reduction ratio of the item, the default is 1
Flex-basis
defines the main size (main size) occupied by the project before the extra space is allocated. The browser calculates whether there is extra space in the main axis based on this attribute. Its default value is auto, which is the original size of the project
flex
is shorthand for flex-grow, flex-shrink and flex-basis, and the default value is 0 1 auto. The last two attributes are optional
align-self
allows a single item to have a different alignment from other items, and can override the align-items attribute. The default value is auto
align-self: auto | flex-start | flex-end | center | baseline | stretch;

15. Draw a triangle or trapezoid

CSS method:

< style > .box {
         width : 0 ;
         height : 0 ;
         border-right : 100px solid transparent;
         border-left : 100px solid transparent;
         border-top : 100px solid #d43131 ;
         border-bottom : 100px solid transparent;
    
    }
</style > 
    < div  class = "box" > </div >

Copy code

If you need to draw a trapezoid, just change the value of width

Canvas method:

<style>
    #box2 {
        width : 300px;
        height: 300px;
    }
</style>
    < canvas  id = "box2" > </canvas >
     const canvas = document .querySelector( '#box2' )
     const ctx = canvas.getContext( '2d' )
    ctx.beginPath()
    ctx.moveTo( 0 , 0 );
    ctx.lineTo( 100 , 0 );
    ctx.lineTo( 0 , 50 );
    ctx.closePath(); 
    ctx.fillStyle= "#8989e7" ;
    ctx.fill();
Copy code

16. z-index

Regarding z-index, at first I only knew that after setting the position, the z-index would be on top, but there were many problems in the actual project.
Recommend a comprehensive article on z-index to thoroughly understand CSS cascade Context, stacking level, stacking order, z-index

1. you need to compare whether the two elements are in the same stacking context. If it is, then compare it according to the following stacking sequence diagram. If not, you need to compare the stacking order of their stacking context.

PS: Cascading order table

17. New Features of CSS3

Border-radius
Shadow box-shadow
Selector:
Attribute selector [attr]: Select the label that contains the attr attribute [attr^=value]: Select the label whose attr attribute value starts with value
Pseudo-class selector first-child, nth-child(n)
Color gradient linear-gradient
2D transformation

translate(): move the element
scale(): zoom the element
rotate(): rotate around the center, positive value is clockwise, negative value is counterclockwise

Transition animation
flex layout

18. DOM tree and CSSOM construction process

The construction process of DOM tree and CSSOM is actually similar

First parse the file (HTML file, CSS file)
Convert bytes to characters
Determine the tokens (label)
Convert tokens into nodes
Finally build a DOM tree according to the node|| CSSOM

PS: The diagram of building the DOM tree and the diagram of CSSOM can be understood at a glance

19. Reflow and redraw

Reflow (rearrangement or layout)

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

Repaint

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

Timing of reflow and redrawing:

First of all, redrawing will definitely occur when reflowing, and redrawing will not necessarily reflow. It will definitely reflow and redraw when the page is loaded for the first time.

Examples where reflow will occur:

When the page is first rendered,
add or delete visible DOM elements
. The position of the
element changes . The size of the element changes. The
content changes. For example, the text changes (the text size and line height change)
. The size of the mouth to calculate the position and size of the element)

List a few element attributes that will be redrawn:

color
background-color
box-shadow
border-radius
visibility

How to reduce reflow and redraw

DOM operation is very expensive, you should operate the DOM as little as possible, and reduce the number of reflows and redraws by merging multiple DOM style modifications
If you need to perform a large number of operations on a DOM, you can use display: none to hide it, and then display it after the operation, so that only two reflows and redraws are caused
For complex animation effects, use absolute positioning to get them out of the document flow
Using css3 hardware acceleration, you can make transform, opacity, filters these animations will not cause reflow and redraw
Browser queue mechanism: The overhead of reflow and redraw is a lot, so the browser maintains a queue. When there is reflow and redraw, it will be put into this queue. It will be triggered when it reaches a certain number or reaches a certain time interval. It will make multiple times become once, but some elements will force the queue to be triggered, so be careful

offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop, scrollLeft, scrollWidth, scrollHeight
clientTop, clientLeft, clientWidth, clientHeight
getComputedStyle()
getBoundingClientRect

Reference article:
Do you really understand reflow and redrawing
thoroughly understand CSS stacking context, stacking level, stacking order, z-index
Ruan Yifeng--flex

Write at the end

Thank you very much until the end of reading. If you think it is helpful to you, I hope you can like it and add a follow-up. Follow-up will summarize the front-end knowledge and post. If you have any questions, you can contact me and hope to make progress together.
Finally, I wish you a bright future, we will climb separately, and see you in high places !