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

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)

1:

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

  1. First parse the file (HTML file, CSS file)
  2. Convert bytes to characters
  3. Determine the tokens (label)
  4. Convert tokens into nodes
  5. 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
  1. 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
  2. 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
  3. For complex animation effects, use absolute positioning to get them out of the document flow
  4. Using css3 hardware acceleration, you can make transform, opacity, filters these animations will not cause reflow and redraw
  5. 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 !