1. HTML5

Meta tags

 <meta name="keywords" content="HTML 5, front-end, CSS 3">
 <meta name="description" content="This is a great site.">
  
Copy the code

Semantic tag

<! Title - the title tag: < h1 > level < / h1 > < h2 > secondary title < / h2 > < h3 > 3 title < / h3 > < h4 > level 4 title < / h4 > < h5 > 5 title < / h5 > < h6 > 6 title < / h6 > -- > <! Inline elements - Inline elements are used to wrap text <p></p> --> <! Layout tag (structured semantic tag) : Header represents the header of the page. Main represents the body of the page (there is only one main on a page). Footer represents the bottom of the page Div is the main layout element. For now, div is the span line element. It does not have any semantics, and is usually used to select text in web pages.Copy the code

Three HTML lists

1. Ordered list 2. Unordered list 3Copy the code
 <ul>
        <li>structure</li>
        <li>performance</li>
        <li>behavior</li>
    </ul>

    <ol>
        <li>structure</li>
        <li>performance</li>
        <li>behavior</li>
    </ol>

    <dl>
        <dt>structure</dt>
        <dd>Structure refers to the structure of the page, and structure is used to determine where the headings and paragraphs are in the page</dd>
    </dl>
Copy the code

Hyperlinks, images, inline frames, audio and video

     <a href="https://www.baidu.com">hyperlinks</a>
     <img src="./img/1.gif" alt="Squirrel">
    <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
<! SRC = "SRC" SRC = "source" SRC = "SRC" SRC = "source" SRC = "SRC" SRC = "source" SRC = "SRC" SRC = "source"
    <audio controls>
        <! Sorry, your browser does not support playback audio! Please upgrade your browser! -->
        <source src="./source/audio.mp3">
        <source src="./source/audio.ogg">
        <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
    </audio>
Copy the code

Entities (escape characters)

& have spent Space & gt; > & lt; The < & copy; The copyright symbolCopy the code

2. CSS3

Use CSS to change the style of an element (3 ways) : 1. Inline styles (Note: never use inline styles when developing)Copy the code
 <p style="color:red; font-size: 60px;" "> < p style =" max-width: 100%; clear: both; min-height: 1emp>
Copy the code
2. Internal style sheetsCopy the code
<style>
    p{
      color: blue;
      font-size: 20px;
    }
  </style>
  <body>
  <p< p style = "max-width: 100%; clear: both; min-height: 1emp>
</body>
Copy the code
3. External stylesheets (best practice)Copy the code
  <link rel="stylesheet" href="./style.css">
Copy the code

1 selector

Compound selector

Intersection selector: selector 1, selector 2, selector 3, selector n{} #b1.p1h1.red{} Union selector: selector 1, selector 2, selector 3, selector n{} #b1,.p1,h1,span,div. Red {}Copy the code

Relational selector

Child selector: Parent > child {} Descendant selector: ancestor descendant {} Select next sibling: previous + next sibling {} Select all siblings below: elder ~ younger {}Copy the code

Pseudo class selector A pseudo class

Nth-child () :nth-child(even){} :nth-child(odd){} : odd child :not() Link {} a:visited{} a:hover{} a:active{} clickCopy the code

Pseudo-element: a special element (special location) on a page that does not really exist

Pseudo-elements use ::before at the beginning of the element ::after at the end of the element - before and after must be used in conjunction with the content attributeCopy the code
        div::before{
            content: 'abc';
            color: red;
        }
Copy the code

The weight of the selector

Inline style 1,0,0,0 id selector 0,1,0,0 | # id name {} and pseudo class selector 0,0,1,0 |. The class selector {} element 0,0,0,1 | p {} h1 {} wildcard selector 0,0,0,0 | * {} the style of the inheritance No priority Can be added after a style! Important, this style will get the highest priority, even more than inline style, note: in the development of this thing must be careful! Class is a tag attribute, which is similar to ID, except that class can be reusedCopy the code

The length of the unit

Pixels -- screens (displays) are actually made up of little dots one by one -- pixel sizes vary from screen to screen, The effect of the screen display pixels, the smaller the clearer - so the same 200 px under different devices display effect is not the same Percentage - attribute value can be set to the percentage of the relative to the parent element properties can teach child elements with the parent element set percentage change with the change of the em - em is calculated relative to the element's font size -1em = 1font size-em ReM-REM is calculated relative to the font size of the root elementCopy the code

2 box model

CSS sets all elements in a page to a rectangular box

A box includes: content padding border margin marginCopy the code

1.border : border-style border-width  border-color
Copy the code

  

2. If you set a background to an element, the areas of the background (the visible box of the box) are: content, padding, and border.

  1. Padding:

    The inside margin will affect the size of the box and the background color will extend over the inside marginCopy the code

4. Margin will affect the position of the box

 

Margin can also be set to negative values, moving elements in the opposite direction. Elements are sorted from left to right on the page, so by default left and top margins move elements and bottom and right margins move other elementsCopy the code

Horizontal layout of 5 elements:

                        margin-left

                        border-left

                        padding-left

                        width

                        padding-right

                        border-right

                        margin-right

 

The horizontal layout of an element in its parent must satisfy the following equation

Margin-left +border-left+padding-left+width+padding-right+border-right+margin-right = the width of the parent element's content areaCopy the code

 

– Adjustment conditions:

  • If none of the seven values is auto, the browser automatically adjusts the margin-right value so that the equation is satisfied

  • If you set a width and a margin to auto, the width is adjusted to the maximum and the margin set to auto is automatically 0

  • If all three values are set to auto, the margin is 0 and the width is maximum

  • If you set both margins to auto with a fixed width, the margins are set to the same value

So we often use this feature to center an element horizontally in its parent


width:xxxpx;

margin:0 auto;

Copy the code

The vertical layout of elements

By default, the height of the parent element is stretched by the content

If the size of the child element exceeds the parent element, the child element overflows from the parent element

Use the overflow property to set how the parent handles overflow child elements. Optional value:

Visible, hidden Scroll autoCopy the code

 

Overlap (fold) of vertical margins

  • Adjacent vertical margins overlap

  • Sibling elements:

    • Adjacent vertical margins between siblings take on the greater value between them (both are positive)
    • The overlap of margins between sibling elements is good for development, so we don’t need to deal with it

  • Special circumstances:

    • If the adjacent margins are positive and negative, the sum of the two is taken

    • If both adjacent margins are negative, the greater absolute value of the two is taken

 

  • Father and son elements

    • Adjacent margins between parent and child elements. Child elements are passed to parent elements (upper margins).

    • Folding of parent and child margins affects the layout of the page and must be addressed

        

 

Box model for inline elements:

– Width and height cannot be set for inline elements

  • Padding, border, and margin can be set for inline elements, but the vertical padding, border, and margin does not affect the layout of the page

Display sets the type of element to display

Optional: Inline sets an element as an inline element block sets an element as a block element inline-block sets an element as an inline block element. Inline block, you can set the width and height without monopolizing a table and set the element to a table and none is not displayed on the pageCopy the code

 

Visibility is used to set the display state of an element

Optional values: Visible default, element is normally displayed in the page Hidden Elements are hidden in the page, but still occupy the page positionCopy the code

 

 

The box size

By default, box-sizing: border-box; The size of the box visible box is determined by the content area, the inner margin, and the border

 

Width +padding+border+margin in weird mode: Width = padding + border + content;Copy the code

Box-sizing is used to set the calculation of box size

Border-box Border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-box border-boxCopy the code

           

      

Silhouettes and rounded corners

Box-shadow sets the shadow effect of elements. The shadow does not affect the layout of the page

Border-radius: set the radius of the circle set by the rounded corners


/* Sets the element to a circle */

border-radius: 50%;
Copy the code

3 float float

You can float an element to the left or right of its parent.

Float property Optional value: None left rightCopy the code

 

Floating features:

  • Floating elements are completely removed from the document flow and no longer occupy a position in the document flow
  • 2. The float element moves to the left or right of the parent element, not out of the parent element, or past other floating elements in front of it
    1. The floating element does not cover up the text and has the effect of the text wrapping around the image

3 Features of document flow separation:

  • Block elements:

    Block elements do not occupy a single line of the page. 2. After leaving the document flow, the width and height of block elements are by default separated by the contentCopy the code

  • Inline elements:

    When an element in line 1 leaves the flow, it becomes a block element, just like a block element. When an element in line 2 leaves the flow, there is no need to distinguish between a block and a lineCopy the code

BFC/Height collapse

In a floating layout, the height of the parent element is by default the height of the quilt element. When the child element is floated, it will be completely separated from the document flow. The child element removed from the document flow will not be able to support the height of the parent element, causing the height of the parent element to be lost.

When the height of the parent element is lost, the elements below it will automatically move up, causing the layout of the page to be confused, so the height of the collapse

 

Block Formatting Context (BFC) Block Formatting environment

This element becomes a separate layout area when BFC is enabled

Set Overflow: Hidden for the element to turn on its BFC so that it can contain floating elements

  • clear

clear: both;

Action: Removes the influence of floating elements on the current element

How it works: After setting clear float, the browser automatically adds an upper margin to the element so that its position is not affected by other elements

- Optional values: left Clears the influence of the left floating element on the current element. Right Clears the influence of the right floating element on the current element. Both Clears the most influential side on both sidesCopy the code

 

  • Cleanfix Height Collapse solution:

The ClearFix style can solve both height collapse and margin overlap. When you encounter these problems, you can use the ClearFix class directly

 

.clearfix::before..clearfix::after{

            content: ' ';

            display: table;

            clear: both;

        }


Copy the code

Opacity: 0, visibility: hidden, display: none and their application scenarios are compared

  • Display: none (does not take up space, cannot be clicked)

  • Visibility: hidden (Occupy space, cannot be clicked) (Scene: display will not change the page structure, will not be opened)

  • Opacity: 0 (occupying space, click)

4  flex

Elastic box

- Flex is another CSS layout method that is used instead of floating to complete the layout of a page - Flex makes elements flexible, allowing them to change with the size of the pageCopy the code
  • Elastic container

To use an elastic box, you must first set an element as an elastic container, which we set with display

Display :flex is set to the block-level elastic container display:inline-flex is set to the inline elastic containerCopy the code

Context-content: How are elements aligned on the main axis

Align-items: How are elements aligned on the secondary axis

 display:flex
 
justify-content: center;
align-items: center;
Copy the code

Difference between Flex and Box

  • Display: Box is the old specification, to take care of antique machines to add it;

    • The parent element has display:box and then the child element has box-Flex. Child elements can be proportionally allocated to the width of their parent.

  • Flex is the latest;

    • When the parent element sets display:flex, the child element width changes with the parent element width, but display:box does not.

  • The Android UC browser supports only the display: box syntax. The iOS UC browser supports two methods.

5 positioning(position)

Optional value: Static Default, Elements are static and not enabled. Relative: relative to the element's position in the ** document flow ** Absolute: relative to its containing block ** Fixed: relative to the ** browser viewport ** Sticky: Element ** is fixed when it reaches a position **Copy the code

– Fixed position: position: fixed;

- Fixed positioning is also absolute positioning, so most of the features of fixed positioning are the same as absolute positioning, the only difference is that fixed positioning is always referenced to the viewport of the browser - fixed positioning elements do not scroll with the web page's scroll barCopy the code

  • Sticky position: position: sticky;

    • The characteristics of viscous positioning and relative positioning are basically the same. The difference is that viscous positioning can fix elements when they reach a certain position

 

  • A. relative B. relative C. relative D. relative

Characteristics of relative positioning:

1. After relative positioning is enabled, elements will not change if the offset is not set. 2. Relative positioning refers to the position of an element in the document flow 3. Relative positioning elevates the element 4. 5. Relative positioning does not change the nature of an element: block or inlineCopy the code

 

  • Absolute positioning position: absolute;

– Absolute positioning features:

1. After absolute location is enabled, the position of the element will not change if the offset is not set. 2. When absolute positioning is enabled, elements are removed from the flow of the document. 3. Absolute positioning changes the nature of the element, making the line into blocks whose width and height are stretched by the content. Absolute positioning raises an element by one level. 5. An absolute positioning element is ** positioned relative to its containing blockCopy the code

  

  • Absolute positioning layout

    • Horizontal layout: The layout equation needs to add left and right values.

    Left + margin-left/right + border-left/right + padding-left/right + width + right = the width of the content area containing the block

    • The vertical layout equation must also be satisfied

    Top + margin-top/bottom + padding-top/bottom + border-top/bottom + height +bottom= contains the block height

    When excessive constraint occurs: if there is no auto among the 9 values, the right value is automatically adjusted to make the equation satisfied; If auto is present, auto is automatically adjusted so that the equation satisfies the value of auto that can be set: margin width left right If the equation is not satisfied, the two values will be adjusted automaticallyCopy the code

 

  • Element hierarchy

For positioned elements, you can specify the level of the element through the Z-index attribute. Z-index takes an integer as an argument. The larger the value, the higher the level of the element. The higher the level of the element, the higher the priority

If the elements are of the same hierarchy, the hierarchy of the element that shows the ancestor of the element below first does not override the descendant elementCopy the code

  • Containing blocks

    - An absolutely positioned containing block: the containing block is the nearest positioned parent element. If all ancestors are not positioned, the root element is its containing block. - HTML (root element, initial containing block)Copy the code
 left: 100px;

 top: -200px;
Copy the code

  • Offset

    • When positioning is enabled on an element, the position of the element can be set by an offset

      The vertical position of the positioning element is controlled by the top and bottom attributes. Normally we only use one of the left-positioned elements and the left distance of the positioned element and the right-positioned element and the right-positioned distance of the positioned element. The horizontal position of the positioned element is controlled by two attributes, left and right. Usually only one is used.Copy the code

                 

6 Vertically centered and horizontally centered

Center the element in line 1

<div class="box1">
  <span class="box2">content</span>
</div>
Copy the code
  • Horizontal center setting:

Text-align :center;

.box1{
  background-color: red;
}

.box2{
    text-align:center
    background-color: white;
}
Copy the code

Second method: display:flex; justify-content: center;

.box2{
  display: flex;
  justify-content: center;
}
Copy the code

Width: fit-content

.box1{
  width: fit-content;
  margin: auto;
}

.box2{
  background-color: white;
}

Copy the code
  • Vertical center setting:

Single-line text (inline element) setting with parent element height determined: height = line-height;

Multi-line text (inline element) with a parent element height determined:

· Insert the table (insert method like horizontal center) and set vertical-align:middle;

· Set display:table-cell and then vertical-align:middle;

 

Centering scheme of 2 block level elements:

<div class="box1">
  <div class="box2" >content</div>
</div>
Copy the code

  • Horizontal center setting:

    • Set left and right margin to Auto for fixed-width block elements;
      .box1{
    background-color: burlywood;
  }
  .box2{
    width: 100px;
    margin: 0 auto;/*margin left/right adaptive */
    background-color: yellow;
  }
Copy the code

    • Variable width block element:

      · Add the table tag (complete, including table, tbody, tr, TD) outside the element, write the element inside TD, then set the margin value to auto;

      · Set the display:inline method for the element;

      · Set position:relative and left:50% for the parent element, position: Absolute and left:50% for the child element;

  • Vertical center setting

<div class='box'>

    <div class='content'>Vertical center</div>

</div>

Copy the code
  • 1. Set the left, top, margin-left, and margin-top attributes using position: Absolute (fixed);
.box{

position:absolute;/ * or fixed * /

top:50%;

left:50%;

margin-top: -100px;

margin-left: -200px;

}

Copy the code
  • 2. Using position:fixed (absolute) attribute, margin:auto this must not be forgotten;

.box2{

    position: absolute; Or fixedtop:0;

    right:0;

    bottom:0;

    left:0;

    margin: auto;

}
Copy the code
  • 3. The highest type, using before and after pseudo-elements;
.box{

    position:fixed;

    display:block;

    background:rgba(0.0.0.5);

}

.box:before{

    content:' ';

    display:inline-block;

    vertical-align:middle;

    height:100%;

}

.box:after{

    content:' ';

    display:inline-block;

    vertical-align:middle;

    height:100%;

}

.box .content{

    width:60px;

    height:60px;

    line-height:60px;

    color:red;

}

 
Copy the code

6. The Flex layout;

.box{

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -moz-flex;

    display: -ms-flexbox;

    display: flex; Webkit-box-align: center; -moz-box-align: center; -ms-flex-pack:center;

    -webkit-justify-content: center;

    -moz-justify-content: center;

    justify-content: center; Vertical center -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-align:center;

    -webkit-align-items: center;

    -moz-align-items: center;

    align-items: center;

}

Copy the code

7 animation

The transition transition

Transitions allow you to specify how to switch when a property changes

  • Transition-property: Specifies the property to perform the transition

If all attributes need to be transitioned, use the all keyword transition-property: all;

  • Transition-duration: specifies the duration of the transition effecttransition-duration: 100ms;

          

  • Transition-timing -function: specifies how transitions are executed

    Optional value: Ease defaults, slow start, speed up first, Ease-out Ease-in-out Quickening and then decelerating cubic-bezier() steps() to specify the timing function steps() to execute the transition effect :end : Performs a transition at the end of time (default); Start: Performs the transition at the beginning of timeCopy the code

The transition - the timing - function: cubic - the bezier (. 24,. 95,. 82, 0.88);

transition-timing-function: steps(2, start);  

  • Transition-delay: the transition delay is 2s.

  • Transition allows you to set all of the transition properties at the same time, with only one requirement: if you want to write delay, the first time is duration, and the second time is delay

The transition: 2 s margin – left 1 s cubic – the bezier (. 24,. 95,. 82, 0.88);

Animation animation

Animation: a keyframe Animation that works on elements rather than style properties. Animation is used instead of purely expressive javascript code to animate, and can explicitly control the property values of the current frame via @keyFrame

Animation-name specifies the name of the Keyframe to bind to the selector. Animation-duration Specifies how long it takes to complete the animation, in seconds or milliseconds. Animation-timing-function Specifies the speed curve of the animation. Animation-delay Specifies the delay in animation. Animation-rotund-count specifies the number of times an animation should play. Animation-direction Specifies whether the animation should be rotated backwards. Animation - play - state: set animation execution state running | pausedCopy the code
 /* Create an animation of the ball falling */
   @keyframes ball {
           from{
                margin-top: 0;
            }
            to{
                margin-top: 400px;
            }
Copy the code

     

The transform deformation

Transform: Changes the shape or position of an element using CSS

  • The distortion does not affect the layout of the page

  • Transform is used to set the morphing effect of the element

TranslateX () moves along the X-axis

TranslateY () moves along the y axis

TranslateZ () moves along the z-axis

  • Shifting elements, percentages are calculated relative to themselves

Z-axis translation belongs to the stereo effect (near large and far small), by default, the page does not support perspective, if you need to see the effect must set the page distance

body:hover .box1{
            transform: translateZ(800px);
        }
Copy the code
  • Transform: Translate (x,y) property; Center the block-level elements vertically
.box{

    position: absolute;

    top:50%;

    left:50%;

    transform: translate(-50%, -50%);

    -webkit-transform:translate(-50%, -50%);

    -moz-transform:translate(-50%, -50%);

    -ms-transform:translate(-50%, -50%);

}

Copy the code
-webKit is supported for Safari and Chrome, -moz /* Firefox */; -ms Indicates that Internet Explorer is supported. -o /* Opera */Copy the code

The rotate rotating

The element can be rotated by a specified Angle along x, y, or z by rotation

                    rotateX()

                    rotateY()

                    rotateZ()
Copy the code

 

Scale zooming

The default origin of the deformation is center

ScaleX () horizontal scaleY() vertical scaleY() scale in both directionsCopy the code

8 Font and background

The font

  • Font related styles

Color is used to set the font color

Font-size Specifies the font size

Em is the font size of the current element: **em is the font size of rem relative to the root elementCopy the code

  

  • ** Line heightline-height: 200px;

– Line height refers to the actual height that text occupies

  • Font sets all the properties of the font

font-weight: bold;

Font: Bold italic 50px/2 Microsoft Ya-hei, 'Times New Roman', Times, Serif;

  •  Iconfont (iconfont)

The icon font is set with a pseudo-element

 i::before{/* Find the element to set the icon on by selecting */ before or after

            content: '\f1b0';/* Set the font encoding in content */
            
            font-family: 'Font Awesome 5 Free';

            font-weight: 900;

            color: blue;

            margin-right: 10px;

        }

Copy the code
  • Text-align Indicates the horizontal alignment of the text

Optional value:

Left align left

Right right aligned

Center and align

Justify both ends

  • Vertical-align Sets the vertical alignment of elements

Optional value:

Baseline Default Value Baseline alignment

Top top alignment

Bottom aligned

Middle is centered and aligned

  • Text-decoration Sets text decoration

Optional value:

none

Underline the underline

The line – through deleting lines

On the overline crossed

  • White-space Settings How do pages handle white space

Optional value:

Normal normal

Nowrap non-breaking

Pre leaves blank **

background

 

  • 1 background-color: #bfa;

  • 2 background-image Background-image: URL (“./img/1.png”);

    - can also set the background image and background color, background color of this background color will be a picture - if the background image is less than the elements, the background image will automatically in the element tile elements covered - if the background image is greater than the elements, will be a part of the background can't fully display - if the background image as big as elements, It is displayed normallyCopy the code

  • 3 Background-repeat Used to set the background repeat mode background-repeat: no-repeat;

    Optional value: repeat Default, the background is repeated in both directions along the X-axis and Y-axisCopy the code

           

  • 4 Background-position Sets the position of the background image. Background-position: Center;

    · Set the position of the background image through top Left right Bottom Center; · Specify the position of the background image by offset: the offset of the horizontal direction and the variable of the vertical directionCopy the code

        

  • 5 Background-clip Sets the background range

    Optional value: Border-box by default, the background will appear below the border and the padding-box background will not appear in the border, It's only going to be in the content area and it's only going to be in the content area and the content-box background is only going to be in the content area and the offset of the background-origin background image and the default value of the origin padding-box, Background-position Calculates the offset of the Content-box background image from the inside margin. Calculates the variable of the border-box background image from the border areaCopy the code

        

    background-origin: border-box;

    background-clip: content-box; 
Copy the code

  • 6 background-size Sets the size of the background image

    The first value indicates the width and the second value indicates the height - if you write only one value, the second value defaults to auto cover, cover the element with the same proportion, and contain the image in its entiretyCopy the code

Sets the properties of the gradient

!!!!! The gradient is an image and needs to be set using background-image

- ** Linear-gradient (), ** color changes along a straight lineCopy the code

   background-image: repeating-linear-gradient(to right ,red, yellow 50px);

- **radial gradient() **(Radioactive effect)Copy the code

 background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa)

Border-image: graphic Border

CSS sprites

CSS Sprites is actually to integrate some background images in the web page into a picture file, and then use the combination of “background-image”, “background-repeat”, and “background-position” of CSS for background positioning. Background-position can be used to accurately locate the position of the background image.

This can reduce the overhead of many image requests, because the request takes a long time;

Requests can be concurrent, but they are limited to six in most browsers.