• [2021] Front direction: Review of summer internship Refers to north (middle)
  • [2021] Front: Review of summer internship Refers to north (Second)

Writing in the front

The topic is 22 buPT computer graduates. Spring recruitment is coming. In order to get the ideal offer for summer internship, I began to prepare and record the review outline for you to share. I hope you can point out and discuss in the comments section if you are not clear or wrong. Ps: Now wechat Beijing do front-end daily practice, while moving bricks while review really tired 555…

HTML report

DOCTYPE role

  • Tell the browser’s parser what to useDocumentation standardsParse the document. (General use<! DOCTYPE html>)
  • A nonexistent or incorrectly formatted DOCTYPE can cause the document to be rendered in compatibility mode.

Meta tags

1. The character set

<meta charset="UTF-8">
Copy the code

2. The name attribute

<meta name="keywords" content="Front end">/ / key<meta name="description" content="This is my blog.">/ / description<meta name="viewport" content="width=device-width, initial-scale=1">// Mobile window<meta name="author" content="xxx">/ / the author<meta name="copyright" content="xxx">// Copyright noticeCopy the code

3. Http-equiv – Indicates the HTTP header

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT">
Copy the code

Inline and block-level elements

  • Common inline elements are: a span IMG button Input Label

  • Common block-level elements are: div P H1-6 UL OL Header Footer Nav section

  • The difference between:

    (1) In format, by default, inline elements do not start on a new line, while block-level elements start on a new line. (2) In terms of content, inline elements can only contain text and other inline elements by default. Block-level elements can contain inline elements and other block-level elements. (3) The difference between the attributes of inline elements and block-level elements mainly lies in the attributes of the box model: width and height of inline elements are invalid (line-height can be set), and the upper and lower Settings of margin and padding have no effect on other elements.

Empty elements

  • An HTML tag that has no content inside it is called an empty element. Empty elements are closed in the start tag.
  • Common empty elements are: br hr IMG input link meta

Why is DOM operation slow

Some DOM operations or property access may cause pages to backflow and redraw, resulting in performance costs.

New features of H5

  • <canvas>: canvas
  • <video>.<audio>: Media Label
  • LocalStorage: indicates local offline storage
  • SessionStorage: Data is temporarily stored and automatically deleted after the browser is closed.
  • Article, footer, Header, Nav, Section: Semantic tags
  • Calendar, Date, Time, Email, URL, and Search: Type of form input
  • Webworker, WebSocket: New technology

H5 semantic understanding

I think the main point of semantic HTML is that we should use appropriate tags to divide the structure of web content.

  • Make the HTML structure clearer and more readable with the right tags: nav for the navigation bar, head for the header, and footer for the footer
  • Search engine crawlers also rely on HTML tags to determine the context and the weight of each keyword, which is conducive to SEO

HTML document parsing

  • After the network process receives the response packet, if the response header is content-type: text/ HTML, it indicates that an HTML page is returned. In this case, the network process informs the browser main process to prepare for HTML rendering.

  • After the browser process receives the message, create a new rendering process:

    1. Send a “Submit document” message to the rendering process
    2. After receiving the message, the rendering process receives data from the network process through the resume data transmission pipeline. When the data is downloaded, the rendering process notifies the browser main process of “document submission confirmation.”
    3. After receiving the message, the browser process makes the following updates: a. Update forward (→) and back (←) to switch to the platform b. Update the url in the address bar c. Initialize the page to blank

  • HTML ==> DOM

  • CSS ==> styleSheets

  • Generate layout tree: Generate layout tree from DOM tree and styleSheets

  • layered

  • draw

Rearrange, redraw

  • Rearrange (reflux)

Is the most expensive update: changing the CSSOM tree, triggering layout, layering, and drawing. Common ways to trigger rearrangements width height left right

  • redraw

Changes stylesheets without triggering layout and layering. Common triggers for redrawing: Color background

The head tag is essential

The header of a document describes various properties and information about the document, including the title of the document, its location in the Web, and its relationship to other documents. Most document headers contain data that is not actually shown to the reader as content.

The following tags are available in the head section: , ,
,

defines the title of the document, which is the only required element in the head section.

Href and SRC

  • SRC: a reference to a resource that is embedded in the current tag. SRC downloads the resource it points to and applies it to the document, such as a request JS script. When the browser parses this element, it suspends the downloading and processing of other resources until the resource is loaded, compiled, and executed, so the js script is usually placed at the bottom of the page.
  • Href: a hypertext reference that points to a web resource and links it to the current element or document. When the browser recognizes the file it is pointing to, it downloads the resources in parallel and does not stop processing the current document. This parameter is used on labels such as A and link.

SRC blocking, href parallel.

CSS article

The box model

  • The box model is composed of four parts, namely margin, border, padding and content.
  • The difference between:
    • The width and height range of the standard box model only contains content
    • The width and height range of IE box model includes border, padding and content.

CSS selectors

  1. Id selector (#myid)

  2. Class selector (.classname)

  3. Tag selectors (div,h1,p)

  4. Descendant selector (H1 div)

  5. Adjacent descendant selector (child) selector (ul > LI)

  6. Brother selector (li~a) : Under the same parent element, select the element a that appears after the li tag (not immediately following)

  7. Adjacent sibling selector (li+a) : Under the same parent element, select the element A that appears immediately after the li tag

  8. A :hover, li:nth-child(n

    <style>
    li:first-child{
        color: red;
    }
</style>
<body>
	<ul>
        <li> 1 </li>
        <li> 2 </li>
        <li> 3 </li>
    </ul>
</body>
Copy the code

  9. Pseudo-element selectors (::before, ::after) :

     .clearfix:after{
     content: ' ';
     display: block; / * or table * /
     clear: both;
 }
Copy the code

  10. Wildcard selector (*)

Pseudo-classes and pseudo-elements

  • In CSS3, single colons are used for pseudo-classes and double colons for pseudo-elements.

  • Pseudo-classes generally match some special states of elements, such as hover, link, etc.

  • Pseudo-elements usually match special locations, such as after, befor, etc.

CSS priority

  • ! Import has the highest priority
  • Inline styles are second
  • Id > class > Element/pseudo-element selector

In the middle

  1. Horizontal center

    div {
  width: 200px;
  margin: 0 auto;
}
Copy the code

  2. Single-line text

    #wrapper{// Parent elementwidth: 500px;
            height: 500px;
}
 
#wrapper div{// child elementsline-height: 500px; // Row height = parentheight, vertical center.text-align: center; // The level is in the middle}Copy the code

  3. Absolute positioning

    • Known height

              #wrapper{
            position: relative; / / parentwidth: 500px;
            height: 500px;
        }
 
        #wrapper p{
            position: absolute; // Use absolute positioning for childrentop: 50%; // First locate50%The location of theleft: 50%;
            height: 300px; // The known heightwidth: 400px;
            margin-top: -150px; // Lift up by half of your heightmargin-left: -200px;
        }
Copy the code

    • The unknown height

      #wrapper{
            position: relative; / / parentwidth: 500px;
            height: 500px;
        }
 
        #wrapper p{
            position: absolute; // Use absolute positioning for childrenheight: 300px; // The known heighttop: 50%; // First locate50%The location of theleft: 50%;
            transform: translate(-50%, -50%);
        }
Copy the code

  4. Flex center

    .container {/* Parent element */
  display: flex;
  align-items: center; /* Vertical center */
  justify-content: center; /* Level in the middle */
}
.div {/* Child element */
  width: 100px;
  height: 100px;
}
Copy the code

  • conclusion

    The common intermediate methods are:

    For elements with fixed width and height
    1. We can use margin:0 auto to achieve the horizontal center of the element.
    2. Using absolute positioning, first positioning the upper left corner of the element to the center of the page through top:50% and left:50%, and then adjusting the center point of the element to the center of the page through the negative margin.
    3. To use absolute positioning, first position the upper left corner of the element to the center of the page by using top:50% and left:50%, and then translate to adjust the center point of the element to the center of the page.
    4. Using flex layout, you can use the align-items:center and justify-content: Center to center the container vertically and horizontally, and then its children can be centered vertically and horizontally.
    For elements of variable width and height

    The latter two methods above can be used to center elements vertically and horizontally.

The values of display

  • The None element is not displayed and is removed from the document flow.
  • Block Block level elements. The default width is the width of the parent element, width and height can be set, and the display is newline.
  • Inline elements. The default width is the content width. The width and height cannot be set.
  • Inline-block Specifies an inline block element. This is equivalent to an inline element where the width and height can be set.
  • Table form.

Relative, positive, fixed positioning origin

  • Relative Positioned elements are positioned relative to their normal position (without leaving the flow of the document)

  • An element is positioned relative to its nearest ancestor whose position is not static. If there is no element whose position is not static, it is positioned relative to the browser window.

  • Fixed: Positioned relative to the browser window.

  • Sticky: Compatibility is very poor, did not understand.

Range of features

  • El :nth-child(n); li~a

  • The rounded border – the radius

  • Shadow box – shadow

  • Elastic box Flex

  • Transform: Scale, position, and tilt

    Example: transform: translate(-10px,-10px)/scaleX(2)/rotateZ(45deg)

  • Transition transition: Attribute name length transition mode delay

    Transition: left 1s linear 1s, top1s linear 2s

    Note: display: none => display:block cannot transition, generally use visibility:hidden => visibility:visible

  • Animation animation

Understanding of BFC?

More: www.yuque.com/hvvsva/gifi…

  • BFC refers to the block-level formatting context, and how elements are arranged in the BFC does not affect elements outside the BFC.
  • Method to create a BFC
    1. float
    2. Position: absolute
    3. Display: inline – block
    4. Display: flex
    5. Overflow: hidden

Margin Merge and collapse

Margin overlap refers to the situation where margins of two adjacent elements overlap in the vertical direction [in the same BFC].

  • Margin-merge: The marin-bottom and margin-top values of neighboring sibling elements overlap.

    1. Set adjacent brothers to BFC respectively (float: left)
    2. Set the BFC for the brother below

  • Margin collapse: The margin-top of the parent element overlaps the margin-top of the child element. We can:

    1. Set the border-top and padding-top values for the parent to separate them (not recommended).

    2. Set the parent element to BFC.

Remove the floating

Floating is cleared to clear the effects of using floating elements. Floating elements, the height of the collapse, and the collapse of the height of our layout at the back of the page does not display properly.

 .clearfix:after{
     content: ' ';
     display: block; / * or table * /
     clear: both;	/* The clear CSS property specifies whether an element must be moved below the floating element before it. * /
 }
 .clearfix{
     zoom: 1; /* IE compatible */
 }
Copy the code

Is the percentage of the element portrait set relative to the height of the container?

  • If height, it’s the height relative to the container.

  • If it’s padding or margin the vertical property is relative to the width of the container.

The difference between transition and animation

Transition focuses on changes in CSS properties.

The animation works on the element itself rather than the style attribute. The concept of keyframes can be used to achieve freer animation effects.

CSS and JS animation

  • CSS animation: Triggers GPU acceleration, calls GPU capabilities, and has a high frame rate (60). Difficult to set dynamically.

  • JS animation: occupies JavaScript engine, uses CPU calculation, low frame rate (30-50). Easy to set dynamically.

Flex layout

Reference: www.cnblogs.com/echolun/p/1…

flex-direction// The main axis directionflex-wrap// Whether to wrap the item: nowrap will force the width of the item; Wrap will wrap the lineflex-flow(flex-directionwithflex-wrapCombined with)justify-content// Align the item on the main axis align-item // align the item on the secondary axisalign-content// Alternate axis alignment of multi-line itemCopy the code
order: / / orderalign-self: flex-start; // Alternate axis alignment of individual elementsflex-grow:1// The scale to be scaled when space is availableflex-shrink:0// When the page is too small, the corresponding element compression ratio (flex-shrinkThe bigger it is, the narrower it is squeezed.)flex: the default0 1 auto//flex-grow flex-shrink flex-basis)Copy the code

Multi-column layouts

  • Flex unified solution: fixed length column: fixed length variable length column: Flex-grow :1

  • Fixed length bar: fixed length bar: no width or height, stretch with top bottom left right.

    body {
  padding: 0;
  margin: 0;
}

.header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  background: red;
}

.container {
  position: absolute;
  top: 100px;
  bottom: 100px;
  width: 100%;
  background: green;
}

.footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: red;
}
Copy the code

Implementing a triangle

.triangle {
  width: 0;
  height: 0;
  border-width: 100px;
  border-style: solid;
  border-color: tomato transparent transparent transparent;
}
Copy the code