Semantic HTML

1. Improve the readability of the code, so that you can learn the layout of the page faster.

2. Make the code easier for search engine crawlers to understand.

Common semantic tags are:


Block-level elements and inline elements

Block-level elements: display:block/table

Features: Exclusive line. div h1(hx) p ul li table form

Inline elements: display:inline/inline-block.

Features: does not monopolize a line, followed closely, until there is not enough space to break the line. span strong a img select iframe

The box model

The box models are: content, padding, margin, border.

Use box-sizing to control the parsing mode of the box model. The default is Content-box (standard box mode) and border-box (IE box mode).

(Box-sizing :border-box)

Width = content width(Content +border+padding)+margin

        .box{
            box-sizing:border-box;
            width:100px; / / on both sidespadding+ on both sides of theborder+content = width
            height:100px;
            background-color: aquamarine;
            padding:10px;
            margin: 20px 50px;
            border: 10px solid black;
        }
Copy the code

W3C (Box-sizing :content-box)

Width = content width +border+padding+margin

        .box{
            box-sizing:content-box;
            width:100px;
            height:100px;
            background-color: aquamarine;
            padding:10px;
            margin: 20px 50px;
            border: 10px solid black;
        }
Copy the code

layout

flex

Flex is a new layout method introduced in CSS3. A container set up as Flex will have two internal axes, the main axis (horizontal left to right by default) and a cross axis, and items inside the box will be arranged according to the main axis. www.bilibili.com/video/BV1Lp…

      
        .container{
            background-color: brown;
            height:500px;
            display: flex;/* Enable flex layout */
            flex-flow: row wrap;/* The main axis is horizontal newline */
            justify-content:center;/* The alignment of items on the spindle */
            /*align-items:center; /* Alignment of single line items across axes */
            align-content:center;/* Alignment of cross axis multi-line items */
        }
        .box{
            background-color: bisque;
            width:50px;
            height:50px;
            margin:10px;
        }
Copy the code

Vertical center

        .container{
            width:100%;
            height:400px;
            background-color:antiquewhite;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .element{
            width:100px;
            height:100px;
            background-color:red;
        }
Copy the code

Navigation Layout

header{ width:100%; height:100px; background-color: palevioletred; color:white; display:flex; flex-direction:row; align-items:center; } nav,ul{ display:flex; flex-direction:row; align-items:center; } nav { margin-right:auto; } li{list-style-type: none; background-color: palevioletred; margin:5px 10px; } span{ padding:10px; background-color: pink; border-radius:25%; } <header> <nav> <a><img width="50px" height=" 50px" src="https://mt.lenovo.com.cn/c/114/1542708313996.png"/></a> <ul> < li > home page < / li > < li > blog < / li > < li > other < / li > < / ul > < nav > < div > < span > login < / span > < span > register < / span > < / div > < header >Copy the code

A two-column layout

header{ width:100%; height:100px; background-color: palevioletred; color:white; display:flex; flex-direction:row; flex-wrap:wrap; }. Left {flex: 00 300px; /* background-color: pink; } .right{ flex: 1 0 0; /* The rest of the page to the right */ background-color: powderblue; }Copy the code

The holy grail layout

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta "> <title>Document</title> <style> body{display: flex; flex-direction:column; height:100vh; /* Adaptive screen height */} header,footer{width:100%; height:50px; background-color: palevioletred; } section{ flex-grow:1; /* Extend height as a child of body */ display:flex; flex-direction:row; } .main{ background-color: pink; flex:1; }. Left,. Right {flex:0 0 100px; background-color: skyblue; } .left{ order:-1; / / @media(max-width:768px){section{flex:1; flex-direction: column; </style> </head> <body> <header> This is the top </header> <section> <div class="main"> this is the middle </div> <div class="left"> this is the left </div> <div class="right"> This is the right part </div> </section> <footer> this is the tail </footer> </body> </ HTML >Copy the code

Extensional subelement

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, "> < span style> < span style> < span style> } body{ display: flex; flex-direction:column; } section{ background-color: skyblue; flex:1; display: flex; flex-direction:column; justify-content:center; align-items:center; } .content{ width:100%; height:250px; /* Given the height of the parent element */ border:1px solid black; display:flex; flex-wrap:wrap; justify-content: space-around; align-items:center; } .content > div{ flex: 0 0 200px; /* background-color: pink; border-radius:10%; } .content > div:hover{ align-self: stretch; /* Extension of a single child element */} header,footer{height:50px; background-color: palevioletred; } </style> </head> <body> <header> This is the top </header> <section> <h1> This is a title </h1> <div class="content"> <div> This is the first block </div> <div> this is the second block </div> <div> this is the third block </div> </div> </section> <footer> this is the tail </footer> </body> </ HTML >Copy the code

A two-column layout

Fixed width on the left, adaptive on the right

<style> header{ width:100%; height:100px; background-color: bisque; } .container{ overflow:hidden; }. Left {float:left; float:left; width:100px; height:400px; background-color: cadetblue; } .right{ margin-left:110px; height:400px; background-color: darkgray; } footer{ /*clear:both; */ width:100%; height:100px; background-color: grey; } </style> </head> <body> <header> This is the header </header> <div class="container"> <div class="left"> This is the left </div> <div Class = "right" > this is the right < / div > < / div > < footer > this is the tail < footer > < / body > < / HTML >Copy the code

Three column layout

  • Set the relative positioning of the Container and use the absolute positioning for the three columns in the container
<style> header{ width:100%; height:50px; background-color: aquamarine; } main{ width:100%; height:500px; position:relative; /* Set position */} main. leftNav{position:absolute; top:0; left:0; width:50px; height:100%; background-color: brown; } main .middleNav{ margin-left:60px; margin-right:60px; background-color: bisque; height:100%; } main .rightNav{ position:absolute; top:0; right:0; height:100%; width:50px; background-color:brown; } footer{ width:100%; height:50px; background-color: aquamarine; } </style> </head> <body> <header> This is the header </header> <main> <div class="leftNav"></div> <div class="middleNav"></div> <div Class = "rightNav" > < / div > < / main > < footer > this is the tail < footer > < / body > < / HTML >Copy the code
  • With the left float, the parent element turns on the BFC
header{ width:100%; height:50px; background-color: aquamarine; } main{ width:100%; height:500px; overflow:hidden; } main .leftNav{ float:left; width:50px; height:100%; background-color: brown; } main .middleNav{ margin-left:60px; margin-right:60px; background-color: bisque; height:100%; } main .rightNav{ float:right; height:100%; width:50px; background-color:brown; } footer{ width:100%; height:50px; background-color: aquamarine; } </style> </head> <body> <header> This is the header </header> <main> <div class="leftNav"></div> <div class="rightNav"></div> <div Class = "middleNav" > < / div > < / main > < footer > this is the tail < footer > < / body > < / HTML >Copy the code
  • The parent opens the Flex layout and the middle sets flex:1
<! DOCTYPE html> <html> <title></title> <style> header,footer{ width:100%; height:50px; background-color: beige; } .container{ width:100%; display:flex; /*flex layout */}. Middle {flex:1; height:400px; background-color: cadetblue; } .left{ width:50px; height:400px; background-color: gray; } .right{ width:50px; height:400px; background-color: gray; } </style> <body> <header> This is the header </header> <div class="container"> <div class="left"> this is the left </div> <div Class ="middle"> this is the middle </div> <div class="right"> this is the right </div> </div> <footer> this is the tail </footer> </body> </ HTML >Copy the code

Grail layout (middle bar should start rendering first)

Note :(floating negative margin inside margin positioning)

  • Structurally, you need to outsource a layer of containers in three columns
  • CSS first add the float on the outermost layer of the pseudo-element, set the padding
  • Middle left right float left, middle width 100% of the other two fixed width
  • Left marign-left:-100%, then set the relative positioning left to shift their width.
  • Right margin-left:- Your width, then set relative positioning, right shift your width

<! DOCTYPE html> <html> <title></title> <style> header,footer{ width:100%; height:50px; background-color: beige; } .container{ padding: 0 50px; Float :left; float:left; float:left; float:left; float:left; width:100%; /* Height :400px; background-color: cadetblue; } .left{ float:left; width:50px; height:400px; background-color: gray; margin-left: -100%; /* move to the left */ position:relative; /* middle*/ left:-50px; } .right{ float:left; width:50px; height:400px; background-color: gray; margin-left:-50px; /* Move your width */ position:relative; right:-50px; } .clearfix::after{ display:block; /* Clear float */ content:""; clear:both; } </style> <body> <header> This is the header </header> <div class="container clearfix"> <div class="middle"> This is the middle </div> <div Class ="left"> this is left </div> <div class="right"> this is right </div> </div> <footer> this is tail </footer> </body> </ HTML >Copy the code

Twin wing layout (floating negative margin)

Note:

  • The overall layout is to outsource a layer of Containers in the middle, and then set the left float for the container left right
  • Container Set the width to 100%,left and right (the left margin is the same as above).
  • Margin: 0 50px;
  • Clear float added to footer
<! DOCTYPE html> <html> <title></title> <style> header,footer{ width:100%; height:50px; background-color: beige; } .container{ float:left; width:100%; } /* all three float left */. Middle {height:400px; margin: 0 50px; /* prevent blocking */ background-color: cadetblue; } .left{ float:left; width:50px; height:400px; background-color: gray; margin-left: -100%; /* move to the left */}. Right {float:left; width:50px; height:400px; background-color: gray; margin-left:-50px; } footer{clear:both; </style> <body> <header> This is the header </header> <div class="container"> <div class="middle"> This is the middle </div> </div> <div Class ="left"> this is left </div> <div class="right"> this is right </div> <footer> this is tail </footer> </body> </ HTML >Copy the code

Such as the layout

Intermediate method

Horizontal center

Horizontal center of normal document flow (set width and margin)

        .box{
            width:100px;
            height:100px;
            margin: 0 auto;
            background-color: black;
        }
Copy the code

Absolutely positioned element horizontally centered (set width margin left right)

        .box{
            position:absolute;
            width:100px;
            height:100px;
            margin:auto;
            left:0;
            right:0;
            background-color: black;
        }
Copy the code

Vertical center

Known height of elements: absolute positioning + top + margin

        .box{
            position:absolute; // Absolute positionwidth:100px;
            height:100px;
            top: 50%; // From the top of the parent element50%
            left:50%;
            margin: -50px 0 0 -50px; // Move up half the height againbackground-color: black;
        }
Copy the code

Unknown element height: Absolute position + top+ transform

        .box{
            position:absolute;
            width:100px;
            height:100px;
            top: 50%;
            left:50%;
            transform:translate(-50%, -50%);
            background-color: black;
        }
Copy the code

flex

        .container{
            height:500px;
            display:flex;
            align-items:center; // Vertical centerjustify-content:center; // Horizontal center}.box{
            width:100px;
            height:100px;
            background-color: black;
        }
Copy the code

Text is centered vertically and horizontally.

        .box{
            width:100px;
            height:100px;
            text-align:center;
            line-height:100px;
            background-color: black;
            color:white; 
        }
Copy the code

Line-height + vertical-align

BFC(Block Formatting Context)

Create a separate rendering area where elements are not affected by the outside world.

Trigger condition of BFC

1. Root element (HTML), a root element is itself a BFC area.

2. Don’t float to none

3. The overflow is not visible

4. Position is not static or relative

5. Display inline-block, table-cell, table-caption,flex.

The characteristics of landing

1. Inside BFC, boxes are arranged in order from top to bottom, and the gap is determined by the outer margin of the box. And when two adjacent boxes in the same BFC have relative direction margins, the margins will fold.

2. The left side of the BFC, whether floating box or ordinary box, is in contact with the left side of the containing block.

3. The BFC area does not overlap with the float area.

4. The internal and external layout of BFC will not affect each other.

5. Height leaves of floating elements are taken into account when calculating the height of BFC.

Can solve the problem

Juejin. Cn/post / 684490…

Floating coverage problem

If a floating element is followed by a non-floating element, an overlay is created, as many adaptive two-column layouts do.

<style>
    body {
        width: 300px;
        position: relative;
    }

    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }

    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"> < /div>
    <div class="main"> < /div>
</body>

Copy the code

Aside and.mian. Since both boxes are in the same BFC, starting from the BFC boundary, if both boxes have BFC themselves, they will be arranged one by one. Now. Main does not have BFC, according to BFC feature 2: The left side of the margin box of each element touches the left side of the border box containing the block. This is true even if there is a float.

Although there is a floating element aslide, the left side of main still touches the left side of the containing block

According to BFC feature 3: The BFC region does not overlap with the float box

We can implement an adaptive two-column layout by triggering Main to generate a BFC.

.main {
    overflow: hidden;
Copy the code

Float makes parent element height collapse problem

The child element floats away from the standard flow, and the parent element does not set the height, so that the parent container height cannot be stretched.

    <style>
        *{
            margin:0;
            padding:0;
        }
        .container{
            background-color: brown;/* Height is only supported by p */
        }
        .container img{
            float:left;/* Left float out of document flow */
            width:200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="C:/Users/86188/Desktop/222.png"/> 
 This is a text 
 Copy the code

Solutions:

1. Add an empty tag to the end of the parent element with style clear:both. This is easier to write, but adds meaningless labels and makes structuring poor.

    <style>
        *{
            margin:0;
            padding:0;
        }
        .container{
            background-color: brown;/* Height is only supported by p */
        }
        .container img{
            float:left;/* Left float out of document flow */
            width:200px;
        }
        .container .clear{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="C:/Users/86188/Desktop/222.png"/> 
 
clear">
 Copy the code

2. Open the BFC with overflow: hidden. The code is concise, but it does not wrap child elements to hide overflow elements.

        .bfc{
            overflow: hidden;/* Overflow part hidden enable BFC */
        }
Copy the code

3. Add a pseudo-element to the parent ::after.

   <style>
        *{
            margin:0;
            padding:0;
        }
        .container{
            background-color: brown;/* Height is only supported by p */
        }
        .container img{
            float:left;/* Left float out of document flow */
            width:200px;
        }
        .container::after{
            content:"";
            clear:both;
            display:block;
        }

    </style>
</head>
<body>
    <div class="container">
        <img src="C:/Users/86188/Desktop/222.png"/> 
 This is a text 
 Copy the code

Margin folding problem

Sibling folding: the bottom margin of box1 is merged with the top margin of box2, so that the distance between the two boxes is larger.

  <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            background-color: bisque;
            margin-top:10px;
            margin-bottom: 20px;
        }

    </style>
</head>
<body>
    <div class="container">
        <divClass = "box" > hi, this is box1 < /div>
        <divClass = "box" > hi, this is box2 < /div>
    </div>
    
</body>
Copy the code

The solution is to add a parent element to the element that does not need to merge margins, and then turn on the BFC so that the element is not in the same BFC as another element and does not merge margins.

Parent and child foldingThe child element’s margin-top is passed to the parent element, and the parent element’s margin-top is the maximum between the child element and the parent element, while the child element is immobile relative to the parent element.

    <style>
        *{
            margin:0;
            padding:0;
        }
        .container{
            height:100px;
            background-color: brown;
        }
        .box{
            background-color: bisque;
            margin-top:40px;
            margin-bottom: 20px;
        }

    </style>
</head>
<body>
    <div class="container">
        <divClass ="box">hi this is the first </div>
    </div>
Copy the code

The solution parent opens the BFC so that the layout inside the BFC does not affect the layout outside.

   <style>
        *{
            margin:0;
            padding:0;
        }
        .container{
            height:100px;
            background-color: brown;
        }
        .box{
            background-color: bisque;
            margin-top:40px;
            margin-bottom: 20px;
        }
        .bfc{
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container bfc">
        <divClass ="box">hi this is the first </div>
    </div>
Copy the code

You can also use pseudo-elements to precede the parent element with a blank element so that the child element is not the first.

        .container::before{
            content:"";
            display: table;
        }
Copy the code

Element hiding method

What is responsive design? What are the fundamentals of responsive design? How to compatibility with earlier Versions of IE?

Responsive Web Design is a website that is compatible with multiple terminals, rather than making a specific version for each terminal. The basic principle is to detect different device screen sizes through media query to do processing. The page header must have a meta declared viewport.

< meta name = "viewport"content="width=device-width.initial- scale = 1. Maximum - scale = 1, the user - scalable = no ">Copy the code

Percentage of CSS

When the width of an element is set as a percentage, it is calculated relative to the width of the parent container.

However, for attributes that represent vertical distance, such as padding-top, padding-bottom, margin-top, margin-bottom, etc., when setting them in percentage terms, they are also based on the width of the parent container, not the height.

How do browsers parse CSS selectors

CSS selectors parse from right to left.

If left-to-right matching is found to be inconsistent with the rules, you need to backtrack, which will lose a lot of performance.

If matching from right to left, all the rightmost nodes are found first. For each node, the parent node is searched up until the root element is found or the matching rule meets the condition, then the branch is traversed.

The performance of the two matching rules is very different, because the right-to-left matching rules filter out a large number of unqualified right-most nodes (leaf nodes) in the first step, while the performance of the left-to-right matching rules is wasted on failed look-up.

After the CSS is parsed, the results need to be analyzed together with the content of the DOM Tree to establish a Render Tree, which is finally used for drawing.

When creating a Render Tree (WebKit’s “Attachment” process), the browser needs to determine what Render Tree to generate for each DOM Tree element according to CSS Style Rules.

What is the difference between writing the style tag after the body and before it?

Page loading from top to bottom is, of course, style loading first. Since the browser parses the HTML document line by line, parsing to the style sheet written at the end (either inline or in the style tag) causes the browser to stop rendering, wait to load and re-render after parsing the style sheet. In IE on Windows, you can get FOUC (page flicker caused by style failure)

What CSS selectors are and what properties can be inherited

  • Id selector (#myId)
  • Class selector (.myClass)
  • Tag selector (P div H1)
  • Adjacent selector (H1 + P)
  • Child selector (UL > LI)
  • Descendant selector (Li A)
  • Wildcard selector (*)
  • Property selector (a[rel = ‘external’])
  • Pseudoclass selector (A :hover, Li :nth-child)

Background-color background-color background-color background-color background-color background-color background-color background-color background-color background-color background-color background-color background-color background-color background-color

Calculates the CSS priority

Element selector div,input, SPAN: 1

Class selectors.box,.content: 10

Id selector #box,#content: 100

Some rules:

  • Priorities can be calculated in a stack
  • If the priority is the same, select the style that appears last
  • The inherited value has the lowest priority

CSS pseudo-classes and pseudo-elements

The difference between pseudo-classes and pseudo-elements: pseudo-elements (::) create new objects, while pseudo-classes only select existing objects.

What’s the difference between a double colon and a single colon in ::before and :after? Explain what these two pseudo-elements do.

The single colon (:) is used for CSS3 pseudo-classes, and the double colon (::) is used for CSS3 pseudo-elements.

::before is a pseudo-element defined in the presence of a child element before the body content of the element. It doesn’t exist in the DOM, it exists only in the page.

The pseudo-elements :before and :after are new to CSS2.1. At first, the pseudo-element prefix used a single colon syntax, but as the Web evolved, the CSS3 specification changed the pseudo-element syntax to use double colons, becoming ::before ::after

CSS preprocessor

less,sass(scss)

CSS preprocessing is a browser-compatible page style file that takes CSS as the target file and uses variables, functions and their simple logic to achieve more concise, more adaptable, better readability and easier code maintenance.

It expands the CSS language, adding functions such as variables, mixing, functions and so on, making CSS easier to maintain, easy to make themes, expansion.

Common properties

position

Absolute Generates an absolutely positioned element relative to the first parent element whose value is not static. Fixed (not supported by old IE) generates an absolutely positioned element, positioned relative to the browser window. Relative Generates an element that is positioned relative to its normal position. Static Default value. Without positioning, the element appears in the normal stream (ignoring the top, bottom, left, right Z-index declarations). Inherit specifies that the value of the position property be inherited from the parent element. - static(default)-> Arrange according to normal document flowCopy the code

overflow

Hidden: part of the overflow is hidden scroll: scroll bar appears Visiblity: default is normal Auto: scroll bar appears when overflow occurs.Copy the code

display

Block Indicates the block type. The default width is the width of the parent element. The width and height can be set. The None element is not displayed and is removed from the document stream. Inline inline element type. The default width is the content width. The width and height cannot be set. The default width of inline-block is the width of the content, and the width height can be set. List-items are displayed as block type elements, and style list tags are added. The table element is displayed as a block-level table. Inherit specifies that the display property value should be inherited from the parent element.Copy the code

Range of new features

Added various CSS selectors (: Not (input) : All nodes whose class is not "input") border-radius:8px Multi-column layout Text-shadow, linear gradient rotation For example :transform: scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:Copy the code

px em rem

'REM' is a new unit of relative length added to 'Css3' to address the shortcoming of EM, which is essentially the font size relative to the parent element, which must be recalculated when the font size of the parent element changes. This problem can be solved with the advent of REM, which is only relative to the root directory, the HTML element. With rem, all we need to do is adjust the font size of the root HTML element to achieve dynamic adaptation of all elements. Logical pixel (CSS PX) = device pixel × scaling factor In order to better fit the mobile terminal, we introduce em and REM, two dynamic units. The size of EM is related to the font size of the parent element. Rem size is related to the font size of the root element HTML. Generally, on the mobile end, we will use JS to dynamically calculate the font size of the node HTML to achieve the purpose of self-adaptation.Copy the code

Links: juejin. Cn/post / 684490…

Animation and transitions

Write a topic

CSS creates a triangle

When the content part of the figure above is set to 0, the div is made up of four triangles (quadrilateral if the border width varies). Show only one triangle, and make the top left and right borders transparent

        .box{
            width:0;
            height:0;
            border:100px solid transparent;
            border-bottom-color: black;
        }
Copy the code

An equilateral triangle

        .box{
            width:0;
            height:0;
            border:100px solid transparent;
            border-bottom: 173px solid black;
        }
Copy the code

A right triangle

Pull the middle node to the upper right corner, that is, set top and right to 0.

        .box{
            width:0;
            height:0;
            border-left:100px solid transparent;
            border-bottom:100px solid black;
        }
Copy the code

Overflow text becomes…

.left{ width:50px; overflow:hidden; text-overflow: ellipsis; /* replace with ellipsis */ white-space: nowrap; /* Force no line breaks */}Copy the code