HTML and CSS notes:

Meta tags

  1. Meta tags are used to set the metadata of web pages. The metadata is not displayed to users

    • Common syntax:

      charset Specifies the character set for the web page
      name The name of the specified data
      content The content of the specified data

    • The keywords of the name attribute indicate the keywords of the website. Multiple keywords can be specified at the same time, separated by commas

    <meta name="keywords" content="Online shopping, cell phone, laptop.">
Copy the code
    • The description of the name attribute is used to specify the description of the web site
    <meta name="description" content="...">
Copy the code

Semantic tag

hgroup Used to group headings. A group of related headings can be placed at the same time
em italics
strong Add in bold
blockquote Long reference
q Double quotation marks
br Page break
nav Navigation of web pages
aside Additional content related to the topic (sidebar)
article A separate article
section A separate block, used when several labels above cannot represent this label

The list of

There are three types of HTML lists: ordered, unordered, and defined

  1. Ordered list:

    <ul>
	<li></li>
<ul>
Copy the code

  2. Unordered list:

    <ol>
	<li></li>
</ol>

Copy the code

  3. Define a list:

    <dl>
	<dt></li>
	<dd></dd>
</dl>

Copy the code
  • Lists can be nested with each other

hyperlinks

  1. Use the A tag to define hyperlinks

    href You can specify a jump path
    target Specifies where the hyperlink is opened. Optional values: 1. Self Default value, open hyperlink in the current page. Blank opens in a new page
    id The same page is the only one that does not duplicate

  2. You can simply set the herf property of the hyperlink to #, so that the page does not jump after clicking the hyperlink, but instead goes to the top of the current page

  3. You can use JavaScript:; As the href property, click it will not jump to any screen

Image label

  • Use the IMG tag to bring in an external image. The IMG tag is the end tag and is a replacement element (between the block and the inline element, and has the characteristics of both elements).

    • Properties:
    src Specifies the path to the external image
    alt The description of the image, which is not displayed by default, is displayed when the browser cannot load
    width Width of picture
    height Height of picture

    Such as:

<img src-"./img/..." alt=""}>
Copy the code

  • Inline frame for introducing an additional page (iframe) to the current page

    Properties:

    src Specifies the path to the page to import
    frameborder Specifies the border of the inline frame, usually 0 
<iframe src="" frameborder="0"></iframe>
Copy the code

Audio and video playback

  1. The audio tag is used to introduce an external audio and video file to the page. By default, users are not allowed to control the playback stop

  2. Properties:

    controls Whether to allow users to control playback
    autoplay Whether to automatically play audio files
    loop Whether the music is played on a loop 
    <audio  controls>
<source  src="./source/audio.mp3">
</audio>
Copy the code

  3. The video tag is used to introduce a video to a web page in much the same way as audio

    <video  controls>
	<source  src="./source/video.mp4">
</video>
Copy the code

form

  1. Use TR in table to represent a row in the table, and TD in TR to represent a cell

    rowspan Represents vertically merged cells
    colspan Represents horizontal merged cells 
    < td rowspan = "2" > < / td >Copy the code

  2. A table can be divided into three parts:

    Head (theAD) Body (TBody) Bottom (tfoot)

  3. Th represents the header cell and TD is generally used for the body and bottom cell

The form

Use the form tag to create a form, and the action represents the address of the server to submit

<form action="target.html"> <! <input type="text" name="username"> <br> <! <input type="password"> <br> <! -- Radio button -- Like this selector, you must specify the value property, which will eventually be passed to the server as a user-filled value, the name property must be the same, > < Input Type ="radio" name="hello" value="a"> < Input Type ="radio" name="hello" value="b" checked> <br> <! <input type="checkbox" name="test" value="1"> <input type="checkbox" name="test" value="2"> <input type="checkbox" name="test" value="3"> <br> <! <select name="haha"> <option value=" I "> <option > <option selected value="ii"> </option> <option value="iii"> </option> </select> - submit button - > < input type = "submit" value = "registered" > < / form >Copy the code
  • Attribute supplement:
Add form item attributes explain
readonly Set the form entry to read-only
disabled Set the form item to disabled
utofocus Set the form item to automatically get focus

The selector

Common selector
  1. Element selector
    • Syntax: Tag name {}
  2. The id selector
    • Syntax: #id attribute name {}
  3. Class selectors
    • Syntax:.class attribute value {}
  4. Wildcard selector
    • * {}
Compound selector

  1. Intersection selector

    • Syntax: selector 1 selector 2 selector 3{}
    • The order is:Label idclass
    • Note: If there is an element selector in the middle, the element selector must start

  2. Union selector

    • Function: Selects elements corresponding to multiple selectors simultaneously

    • Syntax: selector 1, selector 2, selector 3, selector n{}

    • H1, span, div. Red,p1{color:red; }Copy the code
Relational selector

Relational elements include: parent element, child element, ancestor element, descendant element, and sibling element

  1. Child element selector:

    • Action: Selects the specified child element of the specified parent element

    • Syntax: Parent element > child element {}

  2. Descendant element selector:

    • Action: Selects the specified descendant element within the specified element

    • Grammar: Ancestor descendants

  3. Select the next adjacent brother:

    • Syntax: previous + next

  4. Select all brothers below:

    • Grammar: brother ~ younger brother
Property selector

  1. [Attribute Name] Selects the element that contains the specified attribute

    p[title]{
	color:red;
}
Copy the code

  2. [Attribute name = Attribute Value] Selects the element that contains the specified attribute and attribute value

    p[title=abc]{
	color:red;
}
Copy the code

  3. [Attribute name ^= attribute value] Selects the element starting with the attribute value

    p[title^=abc]{
	color:red;
}
Copy the code

  4. [Attribute name $= attribute value] Selects the element whose attribute value ends

    p[title$=abc]{
	color:red;
}
Copy the code

  5. [Attribute name *= attribute value] Selects the element of the element whose attribute value contains a value

    p[title*=abc]{
	color:red;
}
Copy the code
Pseudo class selector

Pseudo classes (classes that do not exist)

  • Pseudoclasses are used to describe the special state of a child element, usually beginning with:

    • : first-child The first child element
    u1>li:first-child{ 
    color:red;
}
Copy the code

    • : last-child Specifies the last child element

    • : nth-child (n) Select the NTH child

      • Special values:

        n The NTH element
        2 n or even Select elements with even digits
        2 n + 1 or odd Select elements with odd digits

    • :first-of-type, :last-of-type, and :nth-of-type(), these pseudo-classes have similar functionality, except that they sort elements of the same type

    • :not () removes qualifying elements from the selector

Pseudo elements

A pseudo-element is a special element (special location) on a page that does not really exist, starting with: :

: : first – letter Style the first letter
: : first – line Style the first line
: : selection Style the mouse selected content
: : before Style the beginning of the element
: : after Style the end of the element
  • Before and after Must and content propertyIn combination, their content is unselectable
<style> p: : first-letter{font-size: 50px; } p: : first-line{background-color: yellow; } p: : selection{background-color: greenyellow; } div: : before{content: 'ABC'; Color: red; } </style>Copy the code

Hyperlinked pseudo-classes

  1. : link is used to indicate a link that is not visited (a normal link)

    A: link{color: red; }Copy the code

  2. : hover is used to indicate the hover state

    A: hover{color: aqua; }Copy the code

  3. : active indicates when the mouse is clicked (clicked but not released)

  4. Remove underscores from hyperlinks:

    a{text-decoration:none};
Copy the code

The box model

CSS sets up all elements in a page as a rectangular box, each box consisting of the following parts:

  • Content border padding Margin

First, frame:

  1. Border width:

    • Border-width can be used to specify the width of the border in four directions

      • Value case:

        The four values On the lower left
        Three values On about the
        Two values The up and down or so
        A value The up and down or so

  2. Border color:

    • Border-color is used in the same way as border-width, if you do not want one side to be colorednone

2. The rules for inner margins are the same as for borders

The rules for margins are the same as for borders

  1. Margins do not affect the size of the box visible box, but will affect the position of the box, which will affect the actual space occupied by the box

  2. Margin can also be set to negative values

Four, horizontal layout:

  1. The horizontal position of the element in the parent element has the following equation:

    Margin-left +border-left+padding-left+width+padding-right+border-right+margin-right= parent element content area width

    • Width, margin-leift, margin-right

      Some value is auto Automatically adjust the value of auto
      Set a width and a margin to Auto The width will be adjusted to the maximum
      Set all three values to auto The margins are all 0 and the width is maximum
      Set both margins to auto with a fixed width Take the average of the two margins

Five, vertical layout

  1. If the size of the child element exceeds the parent element, the child element will overflow from the parent element. Use the overflow attribute to set how the parent element will handle this

    • Optional value:

      The visible default values Child elements overflow from the parent and are displayed outside the parent
      hidden Overflow content will be clipped
      scrool Generate two scroll bars through which to view the content
      auto Generate scrollbars as needed

Display is used to set the display type of the element

inline Set to inline element
block Set to block element
inline-block Inline block elements can be set to both width and height and do not monopolize a row
table Set to a table
none The element is not displayed on the page
flex Setting the elastic box

Visibility is used to set the display state of an element

hidden Elements are hidden from view but still occupy the page
visible By default, the element is displayed normally on the page

Silhouettes, shadows, rounded corners

  1. outline

    Outline is used to set the outline of the element, as is border

    Outlines are similar to borders, except that they do not affect the size of the visible box

    .box1{
	outline:10px red solid;
}
Copy the code

  2. Shadow box – shadow)

    .box1{
	box-shadow:20px 20px 20px red;
}
Copy the code
    The first value Horizontal offset, positive offset to the right
    The second value Vertical offset, positive downward offset
    The third value The blur radius of the shadow
    The fourth value Shadow color

  3. Rounded corner (border-radius, unit: px)

    The four values Left up right up right down left down
    Three values Top left, top right, bottom left, bottom right
    Two values Top left, bottom right, top left, bottom right

Float

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

    • Optional value:

      none By default, the element does not float
      left Element floats to the left
      right Element floats to the right

    • When an element floats, it is completely removed from the document flow and no longer occupies its place in the document flow, so elements that are still in the document flow below the element are automatically moved up

  2. Out-of-document flow features:

    A block element Instead of monopolizing a page line, the width and height are spread out by content by default
    Inline elements Becomes a block element, which has the same properties as a block element

The problem of height collapse and its solution

The Clearfix style solves both height collapse and margin overlap:

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

Position

Optional value:

static By default, the element is stationary and unpositioned
relative Turns on the relative positioning of elements
absolute Enable absolute positioning of elements
fixed Turns on the fixed positioning of elements
sticky Turn on the sticky orientation of the element

  1. Relative positioning (the reference is relative to the unopened positioning itself) :

    • Features:

      • Relative positioning refers to the position of an element in the document flow
      • Relative positioning raises the level of an element
      • Relative positioning does not take elements out of the document flow
      • Relative positioning does not change the nature of the element (block or block, in-line or in-line)
      • Other elements that are not positioned do not change with the position of the element that is positioned

    • Set offset

      • When relative positioning is enabled on the element, the offset must be set (element starting position is set to (0,0), right-down is positive) :

        top Position the distance above the element and position
        bottom The distance below the positioning element and the positioning position
        left Position the distance to the left of the element and position
        right The distance to the right of the positioning element and the positioning position 
    • .box1{ position:relative; left:200px; top:-200px; } // Right down direction is positiveCopy the code

  2. Absolute positioning:

    • Features:

      • When turned on, elements are removed from the document flow so they don’t hog page content
      • Absolute positioning changes the nature of the element (the line becomes a block, and the width and height of the block are spread out by the content)
      • Raise an element to a higher level
      • It’s relative to thetaIts containing blockPositioning of the

    • Contain block

      • In general, the containing block is the closest ancestor block element to the current element
      • After enabled, if setLeft: 0 Top: 0Then locate the elementDefaults to the top left corner of the contain block
      • If all ancestor elements are not positioned, then the HTML (root element) is its containing block (the upper left corner of the browser page)

    • When it’s on,

      • The horizontal layout equation needs to be addedLeft and rightTwo values, then the rule andBefore the contentI just added more left and right
      • When an overconstraint occurs, the right value is automatically adjusted to satisfy the equation if there is no auto among the nine values
      • The auto value can be set to: margin width left right
      • The equation for the vertical layout must also be satisfied

  3. Fixed positioning:

    • Fixed positioning has most of the same characteristics as absolute positioning
    • The only difference is the fixed positioningAlways refer to the viewport of the language browser(visible area) to position, that is, the fixed positioning element does not change as the page scroll bar

  4. Viscous positioning:

    • The characteristics of viscous positioning and relative positioning are basically the same
    • The difference is that viscous positioning can be atThe element is fixed when it reaches a position

  5. Element hierarchy

    • For positioning elements that are enabled, you can passZ - the index attributeTo specify the level of the element
      • Z-index takes an integer as an argument,The higher the value, the higher the level of the element
      • If the elements have the same hierarchy, the elements lower down are shown first
      • Ancestral elements are no higher in hierarchy than descendant elements

Font, line height

  1. Font related styles:

  • Font family (font format)

    Optional value:

    serif Serif fonts
    sans-serif Non-serif fonts
    monospace Monospaced font

  • Font-face specifies the name of the font

    @font-face { font-family:'myfont'; SRC: url(' path '); }Copy the code

  • Font-weight Indicates the weight of a font

    Optional value:

    normal The default value is not bold characters
    bold Bold characters
    bolder Thicker characters
    lighter Finer characters

  1. There are several ways to introduce icon fonts:

    • The first way: using ICONS, we can passfont-face“To introduce the font
    < p style="... ></i>Copy the code
    • Second: usePseudo classes:
    li::before{ content:'\f1b0'; Word-wrap: break-word! Important; "> < span style =" max-width: 100%;Copy the code
    • The third:Encoded by the entity: &#x icon;
      • For example: class = “fas”>of3;
      • If the icon is from Aliyun, replace fas with iconfont

  2. Horizontal and vertical alignment:

    • Text-align Indicates the horizontal alignment of the text

      left The left
      right Align right
      center In the middle
      justify full-justified

    • Vertical-align Indicates the vertical alignment of the text

      baseline Default baseline alignment
      top At the top of the alignment
      bottom At the bottom of the alignment
      middle Align center

  3. Other text styles:

    • Text-decoration Sets text decoration

      Optional value:

      none Default value: none
      underline The underline
      line-through Delete the line
      overline Delete the line

    • White-space Settings How do pages handle white space

      normal normal
      mowrap Don’t wrap
      pre Leave blank

  4. Line height: Refers to the actual height of the text.

    • Line height can be specified as a size (px em)

      You can also set the line height directly to an integer (the line height is the specified multiple of the font)

      Line spacing = line height – font size

    • The line height is set to center the font

Image flicker problem (Sprite)

Solve image flicker problem:

  • Multiple small images can be saved into a single large image and then adjustedbackground-positionTo display the
  • This technique is calledCSS-SpriteWe call it Sprite

How to use Sprite:

1. Determine the icon to use 2. Measure the size of the icon 3. 5. Set a background-position to display the correct imageCopy the code

Background, gradient

  1. background-imageSetting the background image

  • If the background image is smaller than the element, the background image automatically fills the element

  • If the background image is larger than the element, part of the image cannot be displayed

    Background-image: url ("./img/1.png ");Copy the code
  1. background-repeat Used to set the repetition of the background

  • Optional value:

    repeat By default, the background repeats bidirectionally along the x and y axes
    repeat-x Repeat only along the x axis
    repeat-y Repeat only along the Y-axis
    no-repeat Don’t repeat
  1. background-positionUsed to set the position of the background image

  • Setting Mode:

    • Go to the Top Left Right Bottom Center
    • Both values must be set at the same time. If only one value is written, the second value defaults to Center

  • The position can also be set by offsets

    Background-position: 50px 50px; // Represents the offset in horizontal and vertical directions respectively (positive for right and positive for down)Copy the code
  1. Setting the background range

  • backround-clip

    Optional value:

    border-box By default, the background appears below the border
    padding-box The background does not appear in the border, only in the content area and inside margins
    content-box The background will only appear in the content area

  • Background-origin Specifies the origin for calculating the offset of a background image

    Optional value:

    • Padding-box Default value, background-position computed from inside margin

    • The offset of the content-box background image is calculated from the content area

    • Border-box Variables for the background image are computed from the border

      padding-box The default value, background-position, is calculated from the inside margin
      content-box The offset of the background image is calculated from the content area
      border-box Background image variables are computed from the border
  1. background-size Sets the size of the background image

  • The first value represents the width, the second value represents the height, and if you write only the first value, the second value defaults to auto

    cover The scale of the image remains the same. Fill the image with elements
    contain Image proportions remain unchanged, leaving the image intact in the element
  1. background-attachment

  • Whether the background image moves with the element

    scroll By default, the background image moves with the element
    fixed Views are fixed in the page and do not move with elements

  1. Background Is the shorthand property for background. All background styles can be set using this style. There are no order requirements and no mandatory properties

    • Note:
      • Background-size must be written after background-position and used/separated
      • Background-origin Background-clip two styles, orgin must be before clip

  2. Linear gradient

  • Some complex background colors can be set with linear gradients

  • Inear-gradient (Red yellow) Red is at the beginning, yellow is at the end, and the middle is a transition, which can also specify the direction

    45deg Represents a 45 degree gradient
    The to… (Example: left) To the… Gradient (example: left)

  • Repeat gradient: repeating-Linear-gradient

Transition

transition-property All if all attributes are transitioned, none if none
transition-duration Specifies the duration of transition effects (in s and ms)
transition-timing-function A timing function for transitions that specifies how transitions are executed
transition-delay Delay the transition effect, wait a period of time before performing the transition
transiotion All transition-related properties can be set at the same time, with only one requirement, if you want to write delay, in two timesThe first is duration and the second is delay

  • Transition-timing-function optional values:

    ease Default, slow start, speed up, then slow down
    linear Uniform motion
    ease-in Accelerated motion
    ease-out Slow motion
    ease-in-out Speed up first, then slow down
    cubic-bezier() Specify timing function
    steps The transition effect is performed step by step, with the end argument performing the transition at the end of time (the default) and the start argument at the beginning of time

animation

Animation is similar to transition, both can achieve some dynamic effects, but the difference is that transition needs to be triggered when a property changes, animation can be triggered automatically

To set the animation effect, you must first set a keyframe, which sets the animation to perform each step

@keyframes test{from{margin-left: 0; } to{margin-left: 700px; }}Copy the code

Set animation:

animation-name The name of the keyframe in which the current element is active
animation-duration Animation execution time
animation-delay Animation delay
animation-timing-function The timing function of an animation is used in the same way as a transition
animation-iteration-count The number of times the animation was executed. Optional value: 1. 2. Infinite execution
animation-direction Specifies the direction in which the animation runs
animatio-play-state Sets the execution state of the animation. Optional values :1. Running Default value, animation execution; 2. Paused animation
animation-fill-mode Fill mode for animation

  • Optional values of animation-fill-mode:

    none By default, the element returns to its original position after animation
    forwards The element stops at the end of the animation
    backwards The element is in the starting position while the animation waits
    both It’s a combination of forwards and forwards

  • Optional values of animation-direction:

    normal The default value runs from from to
    reverse Run from to to from
    alternate Run from from to and reverse when repeated
    alternate-reserve Run from to to from and reverse on repeat

Deformation, translation, rotation

  1. The distortion does not affect the layout of the page

    • Transform: Sets the morphing effect of an element

      • Translation:

        translateX() It’s shifted along the X-axis
        translateY() It’s shifted along the Y-axis
        translateZ() It’s shifted along the z-axis

  2. Z-axis translation:

    • The normal situation is to adjust the distance between the element and the human eye, the greater the distance, the closer to the person

    • Z-axis translation is a stereo effect. By default, web pages do not support perspective. If you want to see the effect, you must set the page (HTML) distance

      HTML {perspective: ××px; }. Box1 {transform: translateZ ((px); }Copy the code

  3. Rotation: Rotates an element by a specified Angle along x, y, or z

    rotateX() Rotate the specified Angle along the X-axis
    rotateY() Rotate the specified Angle along the y axis
    rotateZ() Rotate the specified Angle along the Z axis
    • Such as:Rotate 180 degrees along the y axis:
    Transform: rotateY (180deg); Backface - visibility: hidden; // Sets whether to display the back of the elementCopy the code

  4. Zoom:

    • Functions that scale elements:

      scaleX() Horizontal scaling
      scaleY() Vertical scaling
      scaleZ() Scaling in both directions

Less usage

  1. Less is a CSS preprocessor language

    • It is the CSSEnhanced versionWith less, you can write less code to achieve more powerful styles
    • A lot of new features have been added to less, like support for variables, support for mixins…
    • The syntax of less is roughly the same as that of CSS, but there are many extensions to CSS in less, so the browser cannot execute less code directly. To execute less code, the browser must first convert it to CSS

  2. Such as:

    html{ --color:#bfa; } .box1{ color:var(--color); } // Set a function about the color, convenient to use calc (100px/2) // set a calculation function div{width: 200px; Height: $width; } // make height and width the sameCopy the code

  3. Single-line comments in less // are not parsed to CSS

  4. Variables:

    • Any value can be stored in a variable, and we can change the value of the variable as needed
    • Syntax: @ variable name
    • For example: @a: 200px;
    • If the variable is a class name, or part of the value must be used as @{variable name}
    • When variables have the same name, the nearest variable is preferred (proximity principle)

  5. Common variables use:

    • & Represents the outer parent element
    .box1{&:hover{}} // represents the hover attribute of box1Copy the code
    • The extend ()Specifies the selector style for the current selector extension (selector grouping)
    p2:extend(.p1){ color:red; } // indicates that P2 not only has all the styles of P1, but also has the color attributeCopy the code
    • Copy style:
    .p3{ .p1(); } // indicates that P3 copies all the styles of P1 // mixinCopy the code
    • With class selectors you can add a parenthesis to the end of the selectors, so we’ve actually created onemixins
    .p4(){
     width:100px;
     height:100px;
}
.p5{
	.p4;
}
Copy the code
    • averageThe color function averages the two color parameters:
    Span {color: average (red, blue); }Copy the code
    • darkenYou can combine existingColor burn:
    Background-color: darken (#bfa, 10%);Copy the code
    • All data can be computed directly in LESS:
    Width: 100px + 100px;Copy the code
    • Can be achieved by@importTo add other LESS files to the current LESS file:
    @ import "xx. Less";Copy the code

Elastic box

  1. Flex (elastic box)

    • CSS is a layout method, it is mainly used instead of floating to complete the layout of the page
  • Flex makes elements elastic, allowing them to change with the size of the page

  1. Elastic container:

    • To use an elastic box, you must first set an element to be an elastic container

    • We set the elastic container with display

      Display: flex Set it to a block-level elastic container
      Display: inline – flex Set to an elastic container in the row

  2. Elastic element:

    • The children of an elastic container are elastic elements

    • An element can be both an elastic container and an elastic element

  3. Flex-direction specifies the arrangement of elastic elements in the container

    • Optional value:

      row By default, elastic elements are in the containerHorizontal arrangement
      row-reverse The elastic element is in the containerReverse horizontal arrangement
      column The elastic elementVertical alignment
      column-reverse The elastic elements are arranged in reverse longitudinal directions

  4. Principal axis: The orientation of the elastic elements is called the principal axis

    Side axis: perpendicular to the main axis is called the side axis

  5. Attributes of elastic elements:

    flex-grow If you specify the stretch factor for the elastic element, the remaining space of the parent element is allocated proportionally
    flex-shrink Specifies the shrinkage factor of an elastic element that shrinks children when there is not enough space in the parent element to hold all of them

    Such as:

    The flex - turns up: 1; The flex - the shrink: 0;Copy the code

  6. The flex – wrap:

    Sets whether the elastic element wraps when the child element overflows

    • Optional value:

      nowrap By default, elements are not wrapped
      wrap The element wraps along the secondary axis
      wrap-reverse The element winds in reverse along the auxiliary axis

  7. Illustration-content sets how elements on the spindle are arranged (how white space on the spindle is allocated)

    • Optional value:

      flex-start The elements are edged along the principal axis
      flex-end The elements are arranged along the terminal edge of the principal axis
      center The elements are centered
      space-around White space is distributed on both sides of the element
      space-between White space is evenly distributed between elements
      space-evenly Whitespace is distributed to one side of the element

  8. How are the align-items elements aligned on the secondary axis

    • Optional value:

      stretch Default value that sets the length of the element to the same value
      flex-start Elements do not stretch and are aligned along the secondary axis
      flex-end Align along the final edge of the secondary
      center Align center
      baseline Baseline alignment

  9. Align-self overrides the align-items on the current elastic element

    The align - self: stretch;Copy the code

  10. Flex can set all three styles of elastic elements: grow shrink base

    • Optional value:

      initial growth
      auto cut
      none basis

  11. The order style sets the order of several of the same elements:

    li:nth-child(1){ order:2; } li:nth-child(2){ order:1; } li:nth-child(3){ order:3; } // the sequence is second, first, and thirdCopy the code


The last

If it helps you, please like and bookmark this article and let more people see it ~ (“▔□▔)/

If you have any objections, please leave them in the comments section and I will reply one by one

If you are interested, please visitA blogger with a light in his eyes