Summary of knowledge points of css

Preface

css is not only the makeup artist of the page, but also the foundation that every front-end must master. In the work, it is often too frequent for business, so it can't be very good to precipitate the technology. This paper is mainly the notes that the author learned from his spare time. It mainly records the common basis of css, as well as the advanced application of css, such as sprite chart, font icon, etc., as well as the new features of css3, It mainly includes attribute selector, structure pseudo class selector, pseudo element selector, transition, 2d/3d conversion (animation), some standard suggestions, new features of HTML5, etc. it is convenient to check the defects and make up the omissions.

Basics

Font settings

  • All fonts must be separated by commas in English.
  • 14px is now widely used in web pages+
  • Chinese fonts need to be quoted in English, and English fonts generally do not need to be quoted. When you need to set an English font, the English font name must precede the Chinese font name.
  • If the font name contains spaces, ා, $and other symbols, the font must be enclosed with single or double quotation marks in English, such as font fanily: 'Times New Roman';
  • Try to use the default font of the system to ensure that it can be displayed correctly in any user's browser
  • Try not to use Chinese, there are compatibility problems, it is better to use the corresponding English or unicode coding.
* {
   font-family: "Microsoft  YaHei",tahoma,arial,"Hiragino Sans GB"
 }

Font size

 span {
    font-weight:400;
 }

tips: number 400 = > normal (not bold), while 700 = > bold (BOLD), numbers are recommended

font comprehensive settings

 span  {
   font: font-style font-weight font-size/line-height font-family
 }

tips: to write everything in the above order, you can omit it, but you must keep font size and font family, otherwise font attribute will not work

selector

  • id
  • class
  • Hanlin Academician
  • Label
  • Wildcard selector*
  • Link pseudo class selector
    • : linkunreachable links
    • : visited link we have clicked once
    • : hover mouse over link
    • : active the status of the selected link when we click on it and don't release the mouse
  • Structure pseudo class selector (new feature of css3)
    • : first child selects the specified selector for the first child that belongs to the parent element.
    • : last child selects the specified selector for the last child that belongs to its parent
    • : nth child (n) matches the nth child element belonging to its parent element, regardless of the type of element even odd odd odd odd odd, if the formula n starts from 0 (from top to bottom)
    • : the nth last child (n) selector matches each element belonging to the nth child element of its element, counting from the last child element regardless of the type of element. N can be a number, keyword or formula (from bottom to top)
<ul>
  <li>First child</li>
  <li>Second child</li>
  <li>Third child</li>
  <li>Fourth child</li>
  <li>Fifth child</li>
  <li>Sixth child</li>
  <li>Seventh child</li>
 <ul> 
/*li It's ul's child. The next child should be chosen*/

 // Even = > 2n even 2, 4, 6 
 li:nth-child(even) {
     color:red
 }
 // Odd number 1, 3, 5, 7 
 li:nth-child(odd) {
     color:red
 }
  • :target
    Target pseudo class selector: selector can be used to select the target element of the current activity
 :target {
   color: red;
   font-size:3
 } 

tips: do not change the order of link visited hover active. Follow the order of lvha. It can be written simply, only one hover.

css composite selector

  • Intersection selector
    Both p and red
 p.red{
  font-size:    20px;
 }
 <p class='red'>111</p>
 <p >222</p>
  • Union selector
    As long as the selector performs the following style
div,
p,
span {
color:blue;
font-size:18px
}
  • Background selector

Future generations can choose, separated by spaces

div p {
 color:pink;
}
  <p>211</p>
<div>
  <p>
  111
  </p>
</div>

  • Child Selector
    Choose only the son
div > p {
 color:pink;
}
  • Property selector (css3)
 /*Include the attribute title*/
 
 a[title] {
  color:red;   
 }
 
 /*Contains properties equal to*/
 
 input[type='text'] {
      color:red;
 } 
 
 <a href='#'
 title='Test 1'>Test 1</a>
 
 <input
 type="text"
 ></input>

text-indent

p {
   text-indent:2em
}

tips:1em is the width of a word. If it is a paragraph of a Chinese character, 1em is the width of a Chinese character.

Word spacing and word spacing

 div {
    letter-spacing:2px; /* Word spacing*/ 
  }
  
  p {
   word-spacing:10px; /*Word spacing*/
 }

Color translucence (css3)

/*Parameters: r, g, b, a*/
 color:rgba(0,0,0,0.3)

Text shadow (css3)

/*Horizontal position vertical position 
Fuzzy distance
 Shadow color
*/

h1 {
 text-shadow:1px 2px 3px rgba(0,0,0,0.3);
}

Block level elements

  • Each block element usually occupies one or more whole lines on its own. It can be set with width, height, alignment and other attributes. It is often used for building page layout and structure

  • Characteristics of block level elements:

    • Always start with a new line
    • Height, row height, outer margin and inner margin can be controlled.
    • The default width is 100% of the container
    • Can hold inline and other block elements
  • Common block elements are:
    <h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>

Inline element

  • Inline elements (inline elements) do not occupy an independent area, only rely on their own font size and image size to support the structure. Generally, width, height, alignment and other attributes cannot be set, which is commonly used to control the style of text in the page.

  • Common inline elements are:
    <a>,<strong>,<b>,<em>,<i>,<del>,<s>,<span>,<u>,<ins>

  • Characteristics of in-line elements

    • On one line with adjacent line elements.
    • The height and width are invalid, but the padding and margin in the horizontal direction can be set, and those in the vertical direction are invalid.
    • The default width is the width of its own content.
    • Inline elements can only hold text or other inline elements. (a special)

Inline block elements (special inline elements)

  • There are several special tags <img>, <input>, <td> in the line element. You can set the width height and alignment attributes for them. Some data may call them the line block elements

  • Features of block elements in row:

    • It is on the same line with the adjacent inline elements (inline blocks), but there will be a gap between them.
    • The default width is the width inside itself.
    • Height, row height, outer margin and inner margin can be controlled.

Display mode conversion

  • Block level label to inline label mode
 div  {
    display:inline;  
  }
  • In line label mode to block level mode
 span {
   display:block; 
 }
  • In line label mode to in line block mode
  a {
      display:inline-block;  
  } 

Single line text vertical center

Principle: the upper and lower spaces of the line height squeeze the text into the middle. If the line height is less than the box height, the text will be higher. If the line height is less than the box height, the text will be lower, upper and lower spaces and the average distribution

//Box height 40px
p {
   line-height:40px 
}

Background picture

  • Application of background attributes
img {

   //Introduce
   background-image:url(images/icon.png);
   //no-repeat
   background-repeat:no-repeat;
   /*Azimuth x, y X are left/right, automatic conversion, top/bottom no matter the order, automatic conversion, one can be omitted, then the other is center */
   
   //background-position:left center
   
   /*It can also be the exact position. If the exact position is written, the first one must be x, and the second one must be y*/
   
   //background-position:20px 20px
   
  /*You can also mix. If you write the mixing position, the first must be x, and the second must be y*/
   background-position:20px center
 
  /*Parameters scroll (default) and fixed (fixed)*/
   background-attachment:fixed //Background image fixed
  
}
  • Shorthand for background

Background: background color, background image address, background tiling background image scrolling, background image location.

body {
 background:black url(images/bg.jpg) no-repeat fixed center top;    
}
 

tips: there is no specific order above, just write according to this habit

  • Translucency of background
img {
  background:rgba(0,0,0,0.3) Must be followed by 4 values
}

Three characteristics of css

  • Stacking
 p {
     color:red;
 }
 
  
 p {
     color:blue;
 }
 //Last p is the color after the blue color over the color before
  • Inheritance

The child element can inherit the style of the parent element (text-,font-,line - the beginning of these elements can inherit, as well as the color attribute) and the text related will inherit

/* /1.5 Then the line height is 12 * 1.5*/
 body {
 font:12px/1.5   
 }

div {
 /*Child element inherits row height 1.5 of parent element body*/
 /*This 1.5 is 1.5 times the text size of the current element font size, so the row height of the current div is 21 elements*/
   font-size:14px;
}

 <body>
   <div></div>
 </body>
  • priority
selector Selector weight
Inherited or* 0,0,0,0
element selector 0,0,0,1
Class selector 0,0,1,0
ID Selector 0,1,0,0
Inline style = "" 1,0,0,0
! important Infinity

tips:

  1. The weight is made up of four sets of numbers, but there is no carry.
  2. It can be understood that the class selector is always greater than the element selector, the id selector is always greater than the class selector, and so on.
  3. The level judgment is from left to right. If one digit value is the same, the next digit value is determined.
  4. Simple memory method: general matching inheritance weight is 0, label selector is 1, class (pseudo class) selector is 10, id selector is 100, style sheet in row is 1000,! important infinite
  5. The inherited weight is 0. If the element is not selected directly, no matter how high the parent element's weight is, the child element's weight is 0
  • Weight superposition

The compound selector will have the problem of weight superposition, but note that there will be no carry

  • div ul li ----> 0,0,0,3
  • .nav ul li ----> 0,0,1,2
  • a:hover ----> 0,0,1,1
  • .nav a ----> 0,0,1,1

Box model

  • Frame

The actual size of the box will be affected by the border. We have two solutions:

  1. When measuring the box size, do not measure the border.
  2. If the measurement includes a border, you need width/height minus the border width
  • padding
/*Three, the first, the middle, the right, the last, the right*/
div {
    padding:10px 20px 30px
}

padding affects the actual size of the box
So we have the following solutions:
If the measurement includes a border, you need width/height minus the border width

  • margin
    A typical application of margin, which is used to align block level boxes horizontally and centrally
div{
    //Must have width
    width:900px;
    height:200px;
    background-color:red;
    //There is no margin between the top and bottom. auto
    margin:0 auto;
}
  • Collapse of nested block elements
    When a box is nested in the box, setting margin in both the inside and outside boxes will merge the margins, making the parent box move together, and the spacing in the box is invisible;
 Solution:
 1. You can define a border for the parent element (it will increase the box);
 2. inner margin can be defined for the parent element (it will increase the box);
 3. You can add overflow:hidden for the parent element. (recommended, do not increase box)
 4. The floating, fixed and absolutely positioned box will not collapse
  • Clear inside and outside margins

Different browser elements and labels have different internal and external spacing. You can use the following methods to clear and solve the problem.

 * {
    padding:0;
    margin:0;
  }

tips:

  1. There is a special case of padding. If the width or height is not specified, padding will not support the width or height of the box. If the child does not specify the width or height, the father has the width or height, and the child sets padding to not open the box. Note that the above horizontal centering method is only a block level method,
  2. To center inline and inline block elements horizontally, use the parent of inline and inline block elements to add text align: Center
  1. In order to take care of compatibility, try to set only the left and right inner and outer margins. Setting up and down does not work, but it can be converted to block level and inline block elements.

Rounded border (css3)

  • Principle: radius (radius of circle) principle: (ellipse) the intersection of circle and border forms fillet effect
  div {
    border-radius:20px;
  }
  • Square rounding
  
  div {
      width:200px;
      height:200px;
      border-radius:50%;
      /*Or change the value to half the height or width*/
      //border-radius:100px;
  }
  • Rectangular circle
  div {
      width:200px;
      height:100px;
      /*If it's a rectangle, set to half the height*/
      border-radius:50px;
  }

Tips: after border radius, the parameter values are abbreviated to represent top left, top right, bottom right and bottom left respectively.

Box shadow (css3)

 div {
      width:200px;
      height:200px;
      box-shadow:10px 10px 
 }
  • 6 parameter values (left to right)
value describe
h-shadow Necessary. The location of the horizontal shadow. Negative values are allowed.
v-shadow Necessary. Position of vertical shadow, negative value allowed.
blur Optional. Blur distance.
spread Optional. The size of the shadow.
color Optional. The color of the shadow. See css color values. You can also use rgba
inset Optional. Change the outer shadow to the inner shadow.

tips:

  1. The default is outer shadow, but you can't write this word, otherwise the shadow will be invalid.
  2. Box shadows do not take up space and do not affect the arrangement of other boxes.

Text shadow (css3)

 span {
      font-size:50px;
      color:red;
      font-weight:700;
      text-shadow:10px 10px;
 }

  • 4 parameter values (left to right)
value describe
h-shadow Necessary. The location of the horizontal shadow. Negative values are allowed.
v-shadow Necessary. Position of vertical shadow, negative value allowed.
blur Optional. Blur distance.
color Optional. The color of the shadow. See css color values. You can also use rgba

Float

  • Floating grammar
 div {
   float:left //Or right
 }
  • Sets the most important properties of floating elements:

    • To move (float) away from the control of a standard normal flow to a specified location (move), (commonly known as the off label / off document flow)
    • The floating box no longer retains its original position
    • The label of any attribute becomes a property with an inline block element
    • After floating, the width of the parent class is not inherited, which is determined by the content
    • There is no gap between the floating boxes. They are close together
    • Floating box only affects the standard flow behind the floating box, not the standard flow in front
    • There are multiple boxes in a box. If one of the boxes floats, other brothers should also float to prevent problems.
    • The floating element will not press the text in the standard flow box below, but it will press the box below. The purpose of floating is to make text wrapping effect initially
  • Clear floating

In many cases, it is not convenient to give height to the parent box, but the child box floats, departs from the document flow and does not occupy a position. Finally, when the height of the parent box is 0, the following standard flow boxes will be affected, so the floating needs to be cleared.

 /*1.Additional label method, also known as partition method, must be a block level element label after finding the last floating element and adding a label*/
  .clear {
    clear:both; 
  }
  
 /*2.Overflow can be added to the parent. The defect is that overflow cannot be displayed*/
 .box{
    overflow:hidden;
 }
 
 /*3.Can add to parent: after*/
 .clearfix:after {
    //Attributes that pseudo elements must write
    content:'';
    //The inserted element must be block level and the pseudo element must be in line
    display:block;
    //Don't see this element
    height:0;
    //Core code clear float
    clear:both;
    //Don't see this element
    visibility:hidden;
 }
 
 /*4.Double pseudo element clear float*/
 .clearfix:before,
 .clearfix:after 
 {
   content:'';
   display:table;//Convert to block level and display on the same line
 }
 
 .clearfix:after {
     clear:both;
 }
 
 <div class='box clearfix'>
   <div class='item1'>item1</div>
   <div class='item2'>item2</div>
   <div class='clear'>item2</div>
 <div>

tips:

  1. The floating elements are often used in combination with the standard flow. The standard flow is used to arrange the upper and lower positions, and then the internal elements are floating to arrange the left and right positions, which conforms to the first rule of web page layout.
  2. The reasons for floating need to be cleared: the parent level is not high; the child box is floating; affecting the following layout, we should clear the floating.

ps cut graph

  • Map cut
    Right click layer - > export png quickly

tips: if you need to export multiple layers, you need to merge the layers and then convert them to png.

  • Slicing tool
    File menu - > export - > store in web format - > select the image format we want - > store.

  • ps plug-in cutout
    Cutter man is a plug-in running in photoshop, which can be installed and used for better cutting

tips:

  1. The cutter man plug-in requires that your ps must be the full version, not the green version, so you need to install the full version. How to judge: look at the window menu extension function, if it is not gray, it can be used, it is the full version.
  2. Click to enter cutter man website

Location

  • Relative positioning refers to the characteristics of an element when it moves to its original position
    • It moves relative to its original position (when moving the position, the reference point is its original position)
    • The original position of the standard flow continues to be occupied, and the box behind still treats it in the way of the standard flow. (do not de label, keep the original position) therefore, relative positioning does not de label. Its most typical application is to be a father of absolute positioning.
 div {
    position:relative;  
    
 }
  • Absolute positioning refers to the characteristics of elements relative to their ancestors when they move

    • If there is no ancestor element or the ancestor element is not located, the browser shall prevail
    • If the ancestor element has positioning (relative, absolute, fixed positioning), then the most recent positioning ancestor element is used as the reference point to move.
    • Absolute positioning no longer occupies the original position (de labeling)
 div {
    position:absolute;  
    
 }
  • Child absolute parent phase: if the child is absolutely positioned, the parent should use relative positioning.

    • The child is absolutely positioned. It will not occupy a position. It can be placed anywhere in the parent box and will not affect other brother boxes.
    • The parent box needs to be positioned to limit the display of the child box in the parent box.
    • The parent box layout needs to occupy a position, so the father can only be relative positioning.

tips: because the parent needs to occupy a position, it is relative positioning. If the child box does not need to occupy a position, it is absolute positioning.

 .father{
     positon:relative;
 }
 
 .child {
    position:absolute;  
 }
 
  • Fixed (important)
    Fixed positioning is the location of the element fixed in the browser's visual area. It is mainly used in the scene: when the browser page can be scrolled, the location of the element will not change.
  div {
    positon:fixed; 
  }
  

Fixed positioning features:

  1. Move elements with the browser's visible window as a reference point.
  2. It has nothing to do with the parent element.
  3. Does not scroll with the scroll bar.
  4. Fixed positioning does not occupy the original position (out of document flow).
  • Viscous positioning: it can be considered as a mixture of relative positioning and fixed positioning. sticky syntax:
  div {
    position:sticky;
    /*Use sticky positioning when the viewing area of the current element is flush with the scroll bar*/
    top:0;
  }

tips: characteristics of viscous positioning:

  1. Moving elements (fixed positioning feature) with browser's visible window as reference point
  2. Viscous positioning occupies the original position (relative positioning feature)
  3. One of top, left, right, and bottom must be added to be valid.
  4. It is used with page scrolling, but has poor compatibility. IE does not support it.
  • Vertical horizontal center of absolute positioning
 div {
   position:absolute;
   /*Move the left side of the box to the horizontal center of the parent element*/
   left:50%;
   top:50%;
   margin-left:-100px;/*Move the box half its width to the left*/
   margin-top:-100px;/*Let the box move up half its height*/
   width:200px;
   height:200px;
   background-color:black;
 }

Special features of positioning

  1. Add absolute or fixed positioning to the elements in the row, and you can directly set the height or width.
  2. Block level elements add absolute or fixed positioning. If width and height are not given, the default size is the size of content
  3. Floating element and absolute positioning (fixed positioning) element will not trigger the problem of outer margin merging.
  4. Absolute positioning (fixed positioning) will hold all contents of the standard flow below.
  5. When you detach from the document stream, the margin is invalid.

Positioning stacking order

When using a positioning layout, boxes may overlap. At this point, you can use z-index to control the front and back order of the box (z axis)

 div {
    z-index:1;
 }
  1. The value can be positive integer, negative integer or 0. The default value is auto. The larger the value is, the higher the box is
  2. If the values of the attributes are the same, they are written in the order in which they are written
  3. Number cannot be followed by unit
  4. Only the located box has the z-index attribute

Show hidden elements

  • display show hide
 div {
    display:none;//hidden object
   //display:block;//Display objects
 }

Tips: after the display hides the element, it no longer occupies the original position.

  • The visibility property specifies whether an element should be visible or hidden
 div {
      visibility:visible; //Element visibility
     //visibility:hidden; //Element hiding
 }

tips: visibility hides the element and continues to occupy the original position

  • overflow
 div {
     overflow:hidden; //Element hiding
 }

overflow

Attribute value describe
visible Don't cut content or add scrollbars
hidden Don't show the content beyond the object size, and hide the exceeded part
scroll Scroll bar is always displayed no matter what is exceeded
auto Beyond auto show scroll bar, not beyond don't show scroll bar

tips: in general, we don't want the overflow content to be displayed, because the overflow part will affect the layout.
But if you have a box for positioning, use overflow:hidden carefully because it hides the extra parts.

Advanced application

Sprite (Sprite)

  • Sprite map is mainly to effectively reduce the number of requests received and sent by the server, and improve the loading speed of the page. css sprite Technology (also known as css Sprites, css Sprite) appears

  • Sprite features:

    • Sprite image is mainly used for small background image.
    • The background position is realized by the background position.
    • In general, sprites are negative. (be sure to pay attention to the coordinates in the web page: the right side of the x axis is positive, the left side is negative, and the same is true for the y axis. )
 .box1 {
   width: 60px;
   height: 60px;
   margin: 100px auto;
   background: url(images/sprites.png) no-repeat -100px 0;
 }
 
  .box2 {
   width: 20px;
   height: 20px;
   margin: 200px;
   background: url(images/sprites.png) no-repeat -150px -106px;
 }
  • Disadvantages of Sprite chart:
    • The picture file is still relatively large.
    • The picture itself can be distorted by zooming in and out.
    • It's very complicated to change the picture once it's finished

tips: the background image is aligned in the upper left corner by default

Font Icon

The appearance of Font Icon mainly solves the above problems of Sprite map. It can provide a convenient and efficient way for front-end engineers to use icons. It shows icons, which are essentially fonts

  • Advantages of Sprite map:
  1. Lightweight: an icon font is smaller than a series of images. Once the font is loaded, the icon will be rendered immediately, reducing server requests.
  2. Flexibility: the essence is actually text, which can change color, produce shadow, transparent effect, rotate, etc
  3. Compatibility: almost all browsers are supported
 //Font declaration 
 @font-face {
   //1. Put the downloaded fonts into our project.
   //2. Open the downloaded style.css and copy the @ font face section.
 }
 
 //Use
 span {
     font-family:'icomoon';
     color:black;
     font-size:12px;
 }
  • Append Font Icon

Upload the selection.json in the downloaded package

tips: font icons can't replace sprite technology, but improve and optimize some technologies of icons in work.

  1. If you encounter some small icons with simple structure and style, use font icons.
  2. If you encounter some small pictures with a little more complicated structure and style, use sprite.

css triangle

  • Some trigonometric forms are common in web pages. You can draw them directly using css without making pictures or font icons.
 div {
  width:0;
  height:0;
  line-height:0;
  font-size:0;
  border:50px solid transparent;
  border-left-color:red;
 }

  • Clever use of css triangle

Make a direct triangle

 div {
    width:0;
    height:0;
    /*1.Keep only the border on the right with color*/
    border-color:transparent red transparent transparent;
    /*2.Style is solid*/
    border-style:solid;
    /*3.The width of the top border should be large, the width of the right border should be small, and the rest borders should be 0*/
    border-width:100px 50px 0 0;
   /*border-width=>border-top,border-right,border-bottom,border-left*/
 }

user interface

  • Mouse style
  <ul>
   < Li style ='cursor: default '> I'm the default small white mouse style</li>
   
   < Li style ='cursor: pointer '> I'm a mouse hand style</li>    
    
   < Li style ='cursor: move '> I'm a mouse movement style</li>    
   
   < Li style ='cursor: text '> I'm a mouse text style</li>     
    
   < Li style ='cursor: not allowed '> I'm a mouse forbidden style</li>       
    
  </ul>
 
  • Cancel form outline and prevent dragging
  input,textarea {
   //Cancel form outline
   outline:none;
  }
 
  textarea {
   //Prevent dragging text fields
   resize:none; 
  }

tips: the open and close labels of the text field should be in one line to prevent the cursor in the text field from misplacing.

vertical-align

Realize the vertical center between the line block (pictures and forms belong to the line block 3) and the text. If other types of elements are used, they can be converted to the line block first

 div {
    display:inline-block;
    vertical-align:middle;
 }
  • Solve the blank gap at the bottom of the picture
    • Add a border to the father of the picture, you will find a blank gap at the bottom of the picture, because the picture is aligned with the baseline of our text by default.
    • Transform the image into a block level element display:block;

Text overflow ellipsis display

  • Single line text overflow ellipsis display
 div {
     width:150px;
     height:80px;
     background-color:red;
     margin:100px auto;
     //The following conditions must be met
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis;
 }
  • Multiline text overflow ellipsis display
 /*It is suitable for webkit browser or mobile terminal. pc can also be used without considering ie*/
 div {
     width:150px;
     height:80px;
     background-color:red;
     margin:100px auto;
     //The following conditions must be met
     overflow:hidden;
     text-overflow:ellipsis;
     /*Elastic expansion box model display*/
     display:-webkit-box;
     /*Limit the number of lines of text displayed in a block element*/
     -webkit-line-clamp:2;
    /*Sets or retrieves the arrangement of child elements of a scale object*/
     -webkit-box-orient:vertical;
 }

Layout tips

  • Clever use of margin negative value

    • Move the margin of each box to the left - 1px just to press the border of the adjacent box, and the border of the adjacent box can be removed.
    • If it is necessary to display the pressed border when the mouse passes a box under certain conditions, it is enough to raise the level of the current box (if there is no positioning, add relative positioning (reserved position)), if there is positioning, add z-index)
  • Clever use of text around floating elements

Using floating will not hold the text, realize the left figure and right text

  • The ingenious use of inner block

    Use the characteristics of block elements in the row to display buttons in one row, and use text align: Center in the parent class to horizontally center the child class;

  • css initialization code

Common compatible codes

* {
//Clear all our internal and external margins
 margin:0;
 padding:0;
 /*css3 The box model of can make border and padding not support big box.*/
 box-sizing:border-box;
}

//em and i coordinate text without skew
em,i {
 font-style:normal
}

//Remove the small dots of li
li {
 list-style:none
}

img {
/*border:0 Take care of the low version browser. If the picture contains links, there will be border problems*/
 border:0;
 //Remove the problem that there is a gap at the bottom of the picture
 vertical-align:middle
}

button {
/*When we mouse past the button button, the mouse will become a small hand*/
 cursor:pointer  
}

a {
 color:#666;
 //Hide blue lines
 text-decoration:none
}

a:hover {
 color:#c81623
}

button,input {
 font-family:Microsoft YaHei,Heiti   SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
 /*We need to remove the gray border manually*/
 border: 0;
 outline: none;
}


body {
  //css3 anti aliasing makes the text display clearer
 -webkit-font-smoothing:antialiased;
 background-color:#fff;
 font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans
 /*"\5B8B\4F53" It means "Song typeface". It's less compatible to encode browsers in Unicode*/
 GB,"\5B8B\4F53",sans-serif;
 color:#666
}

.hide,.none{
 display:none
}

/*Clear floating*/
.clearfix:after { 
 visibility:hidden;
 clear:both;
 display:block;
 content:".";
 height:0
}

.clearfix {
  *zoom:1
}

//Converting semantic tags to block level, compatible with ie9
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary
{
 display:block
}

New features of css3

attribute selectors

 <input type="text" value="enter one user name">

 <input type="password" value="enter one user name" name="">
 
  /*attribute selectors */
  /*It must be input, but it also has the attribute value to select this element*/
  input[value] {
    color:red    
  }
  /*The attribute selector can also select certain elements of the attribute = value*/
  input[type='text'] {
    color:red    
  }
  
selector brief introduction
E[att] Select E element with att attribute
E[att="val"] Select E element with att attribute and attribute value equal to val
E[att^="val"] Match E element with att attribute and value starting with val
E[att$="val"] Match E element with att attribute and value ending with val
E[att*="val"] Match E element with att attribute and val in value

tips: class selector, attribute selector, pseudo class selector, weight is 10.

Structure pseudo class selector

The structure pseudo class selector mainly selects elements according to the document structure, which is often used to select the child elements in the parent selector

selector brief introduction
E:first-child Match the first child element E in the parent element
E:last-child Match the last E element in the parent element
E:nth-child(n) Match the nth child element E in the parent element
E:first-of-type Specify the first of type E
E:last-of-type Specify the last of type E
E:nth-of-type(n) Specify the n th of type E
 <ul>
   <li>I'm the first child</li>
   <li>I'm the second child</li>
   <li>I'm the third child</li>
   <li>I'm the fourth child</li>
   <li>I'm the fifth child</li>
   <li>I'm the sixth child</li>
   <li>I'm the seventh child</li>
   <li>I'm the eighth child</li>
   <li>I'm the ninth child </li>
   <li>I'm the 10th child</li>
 <ul>
 
 <section>
   <p>First</p>
   <div>The second</div>
   <div>Third</div>
 </section>
 
 /*Select the first child of ul, and this child must be li, so specify li in the offspring*/
 ul li:first-child {
     background:pink;
 }
 
 //Choose the last child in ul
 ul li:last-child {
     background:pink;
 }

/*
1. n It can be numbers, keywords and formulas;
2. If it is a number, it is to select the nth sub element, where the number starts from 1
3. n Can be Keywords: even even, odd odd.
4. n It can be a formula: the common formula is as follows (if n is a formula, it starts from 0, but the number of elements 0 or beyond will be ignored).
*/

/* When executing, first look at: nth child (n), then look at the previous li */
ul li:nth-child(n) {
     background:blue;
 }
 
 /* When executing, first look at: div, then go back to nth of type (n)*/
section div:nth-of-type(n) {
     background:blue;
 }
 
 
/* nth-child(n) Different from nth of type (n)*/
/* nth-child(n)All boxes under the father will be numbered, not only the specified selector; nth of type (n) will be numbered for the boxes of the specified elements under the father*/
 
formula Value
2n Even numbers
2n+1 Odd number
5n 5 10 15...
n+5 From the 5th (including the 5th) to the last
-n+5 Top 5 (including 5)

tips:

  1. Nth child (n) formula value n is calculated from 0
  2. Structure pseudo class selector is generally used to select the first child in the parent
  3. Nth child sorts all the children in the parent element (the sequence number is fixed). First find the nth child, and then see if it matches E
  4. Nth of type sorts and selects the specified child elements in the parent element. First match E, then find the nth child according to E
  5. If it's an unordered list, Nth child, use more.
  6. Class selector, attribute selector, pseudo class selector, weight is 10.

Pseudo element selector

Pseudo element selector can help us to create new tag elements with css without HTML tags, thus simplifying the HTML structure. The first two::, single colon is only used to support ie8.

selector brief introduction
::before Insert content before the inside of the element
::after Insert content after the inside of the element

tips:

  1. before and after create an element that belongs to the line element
  2. The newly created element cannot be found in the document tree, so we call it a pseudo element.
  3. Syntax: element::before {}
  4. before and after must have content attribute
  5. before and after are boxes. before and after are created in the parent element. before creates the element in front of the parent element content, and after inserts the element after the parent element content,.
  6. The pseudo element selector, like the label selector, has a weight of 1

css3 box model

In css3, box sizing can be used to specify the box model. There are two values: content box and border box. This changes the way we calculate the box size.

There are two situations:
1. Box sizing: content box box box box size is width + padding + border (previously default)
2. Box sizing: border box box box size is width

If we change the box model to box sizing: border box, the padding and border will not support the box (provided that the padding and border do not exceed the width)
  • Filter filter

The filter, css attribute applies graphic effects such as blur or color offset to elements.

 /* filter:Function (); for example: filter:blur(5px); blur blur processing, the larger the value, the more blur*/
 img {
     filter:blur(5px)
 }
  • calc function

calc() this function allows you to perform some calculations when declaring css property values

  //It requires that the width of our child box is always 30 pixels smaller than that of the parent box
  .father
    {
     width:300px;
     height:200px;
     background-color:red
   }
   
  .son {
      //The child inherits the width of the parent and then subtracts 30px
      width:calc(100%-30px);
      height:30px;
      background-color:yellow;
  }
  <div class="father">
    <div class="son">
  </div>

transition

Transition: when does the attribute to transition take time for the motion curve to start;

parameter Explain
Properties to transition Want to change the css attribute, width height background color inside and outside margins can be. If you want all the properties to change, write an all
Spend time Unit is second (must write unit), for example 0.5s
Motion curve Default is ease (can be omitted)
When does it start? The unit is second (the unit must be written). You can set the delay trigger time to 0s by default (it can be omitted)
 div
 {
    width: 200px;
    height: 100px;
    background-color: red;
    //Can be separated by commas and write multiple attributes
    transition: width .5s ease 1s,height .5s ease 1s;
    //You can use all to represent multiple properties
    //transition: all .5s 
  }
  
  div:hover{
        width: 400px;
  }
  

tips: animation is written on itself, and who makes animation adds it to who

2d transform

2D movement is a function of 2D conversion, which can change the position of elements in the page, similar to positioning.

 
 div {
    width:200px;
    height:200px;
     //x,y
    transform:translate(30px,40px);
    //transverse 
    transform:translateX(30px);
    //portrait
    transform:translateY(40px);
    /*
    The 50% here is 100px, because the percentage unit in translate is relative to its own element, and the width of the box is 200px
    */
    transform:translateX(50%);
 }

  • Practical application: vertical center
 .father {
     position:relative;
     width:400px;
     height:400px
 }
 
 .son {
     position:absolute;
     width:200px;
     height:200px;
     left:50%;
     top:50%;
     transform:translate(-50%,-50%)
     /*The following is equivalent to the above transform
      margin-left:-100px; 
      margin-top:-100px; 
     */
 }

tips:

  1. Defines the movement in a 2D transformation, moving elements along the X and Y axes.
  2. The biggest advantage of translate is that it doesn't affect the location of other elements.
  3. The percentage unit in translate is translate(50%,50%) relative to its own elements
  4. No effect on inline labels

2d conversion rotate

 div {
     width:150px;
     //45 degrees clockwise
     transform:rotate(45deg)
 }
  • Practical application - small triangle
  
  div {
      width:249px;
      height:35px;
      border: 1px solid #000;
  }
 
  div::after {
    content:"";
    position:absolute;
    top:8px;
    right:15px;
    width:10px
    height:10px;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    transform:rotate(45deg);
    transition:all 0.4s
 }
 
  div:hover::after {
    transform:rotate(225deg);
  }
 
  • Set conversion center point
 div {
    transform-origin:x y;
 }
  • Practical application - center point setting lower left corner rotation
 .div {
     width:200px;
     height:20px;
     border:1px solid pink;
     margin:100px auto;
     overflow:hidden;
 }
 
 div::before {
     content:"Fucking great";
     display:block;
     width:100%;
     height:100%;
     background-color:red;
     transform:rotate(180deg);
     //Lower left quarter
     transform-origin:left bottom;
     transition:all 0.4s;
 }

 div:hover::before {
     //Mouse up, restore
     transform:rotate(0deg);
 }
 <div></div>

tips:

  1. Notice that the following parameters x and y are separated by spaces
  2. The center of the x y default transformation is the center of the element (50% 50%)
  3. You can set the top bottom left right center for x y

2d conversion scale

Zoom, as the name suggests, can zoom in and out.

 
  div {
      width:200px;
      height:200px;
      background-color:red;
      margin:100px auto;
      transform-origin:left bottom;
  }
  

  div:hover {
    /*
       1.The number in it doesn't follow the unit, which means multiple,
       1 It's one time, two times
      */
     //transform:scale(x,y);
     //The width is changed to 2 times of the original, and the height is unchanged.
     transform:scale(2,1)
     /*
       Zoom in at the same time
       transform:scale(2)
     */ 
    
     /*
       Width and height decrease at the same time
       transform:scale(0.5)
     */ 
  }

tips:

  1. We can zoom out less than 1, which is zoom out
  2. It does not affect other boxes. The previous control of width and height will affect other boxes.
  3. You can set the center point of the scale.
  • Practical use - picture enlargement
 div {
     //Do not let the zoom out of range
     overflow:hidden
     float:left;
     margin:10px;
 }
 
 div img {
     transition: all .4s
 }
 
 div img:hover {
     transform:scale(1,1);
 }
  • 2D rotation synthesis
  
  div {
      width: 200px;
      height: 200px;
      background-color: pink;
      transition: all .5s;
  }
 
 div:hover {
  /*We have displacement and other properties at the same time. We need to put displacement first.
  
  */
    transform: translate(150px,50px) rotate(180deg);
 }

tips:

  1. Use multiple transforms at the same time, in the format: transform:translate() rotate() scale() etc.
  2. Its order affects the effect of the transformation. (rotate first to change the direction of the axis)
  3. When we have displacement and other attributes at the same time, remember to put displacement at the top.

Animation

Animation is one of the most subversive features in css3. It can accurately control one or a group of animations by setting multiple nodes. It is often used to achieve complex animation effects.
Compared with filtering, animation can achieve more changes, more control, continuous automatic playback and other effects.

  • Basic use of animation
    • Define animation first
    • Reuse (call) animation
/*Requirement: once the page is opened, a box will go from left to right
1.Defining animation
*/
 
 @keyframes move {
  /*Start state can be omitted*/
   0% {
     transform:translate(0,0 );
   }
  /*First state*/    
   25% {
     transform:translate(1000px,0);
    }
  /*Second state*/   
    50% {
    transform:translate(1000px,500px);
    }
  /*the third status*/ 
    75% {
     transform:translate(0,500px);   
    }
  /*End state fourth*/
   100% {
    transform:translate(0,0);
   }  
 
 }
 
 div {
    width: 200px;
    height: 200px;
    background-color:pink;
    /*2.Call animation*/
    /* Animation name */
    animation-name:move;
    /* Animation duration */
    animation-duration:10s
 }
 

tips:

  1. 0% is the beginning of animation, 100% is the completion of animation. Such rules are animation sequences.
  2. By specifying a css style in @ keyframes, you can create animation effects that gradually change from the current style to the new one.
  3. Animation is the effect of gradually changing elements from one style to another. You can change as many styles as you want.
  4. Please use the percentage to specify the time of change generation, or use the keywords "from" and "to", equivalent to 0% and 100%
  5. Percentage is the division of total time (10s in our case) 25%*10=2.5s
  • Animation common properties
 div {
     width: 100px;
     height: 100px;
     background-color:pink;
     /*Animation name*/
     animation-name:move;
     /*Duration*/
     animation-duration:2s;
     /*Motion curve*/
     animation-timing-function:ease;
     /*When does it start?*/
     animation-delay:1s;
     /*Number of iterations count number of iterations infinite  */
     animation-iteration-count:infinite;
     /*Whether to play in the opposite direction is normal by default. If you play in the opposite direction, write alternate*/
     animation-direction:alternate;
     /*The transition state after the end of the animation is back to the starting transition state by default. We can let him stay in the ending state, forwards*/
     animation-fill-mode:forwards;
 }

 div:hover {
  /*After the mouse passes through the div to stop the animation of the div, the mouse leaves to continue the animation*/
  animation-play-state:paused;
 }
attribute describe
@keyframes Prescribed animation
animation Shorthand attribute for all animation attributes except animation play state attribute
animation-name Specify the name of @ keyframes animation (required)
animation-duration Specifies the seconds or milliseconds it takes for an animation to complete a cycle. The default is 0. (required)
animation-timing-function Specify the speed curve of animation, default is "ease", and linear, which means uniform speed
animation-delay Specifies when the animation starts. The default is 0
animation-iteration-count Specifies the number of times the animation will be played. The default is 1, and infinite: infinite
animation-direction Specifies whether the animation will play backward in the next cycle. The default is "normal" and "alternate"
animation-play-state Specifies whether the animation is running or paused. The default is "running" and "paused"
animation-fill-mode Specify the state after the animation ends, keep forwards and return to the starting backwards
  • Animation shorthand

Animation: animation name, duration, when the motion curve starts to play, and whether the animation starts or ends in the opposite direction;

div {
animation:move 2s linear 0s 1 alternate forwards  
}

/*Omit writing -- order is optional except when the duration must be before*/

div {
 animation: move 2s   linear alternate forwards 
}

tips:

  1. The above abbreviations should be separated by spaces, and the duration must be before when to start.
  2. The first two attributes must be written, others can be omitted, and the order is uncertain
  • Practical application - ripple (big data map location)
 map {
     position: relative;
     width: 747px;
     height: 616px;
     //map of China
     background:url(media/map.png) no-repeat
     margin 0 auto;
 }
 
 .city {
   position: absolute;
   top:100px;
   right:100px;
   color:#fff;
 }
 
 
 .dotted {
    width: 8px;
    height: 8px;
    background-color: #09f;
    border-radius: 50%;
 }

 .city div[class^='pulse'] {
   /*Make sure that our small ripples are horizontally and vertically centered in the parent box, and the center will diverge to all sides after amplification*/
    position:absolute;
    top:50%
    left:50%
    transform:translate(-50%,-50%);
    width: 8px;
    height: 8px;
    //Shadow ripples will look better
    box-shadow: 0 0 12px #009dfd; 
    border-radius:50%;
 }
 
 .city div.pulse2 {
    animation-delay:0.4s;
 }

 .city div.pulse3 {
    animation-delay:0.8s;
 }


 @keyframes pulse {
    0% { } 
    70% {
     /*
     transform:scale(5);Let's not use scale, because it will make the shadow bigger;
     */
     width:40px;
     height:40px;
     opacity:1;
    }
    100% {
     width:70px;
     width:70px;
     opacity:0;
    }
 }
<div class='map'>
 <div class='city'>
  <div class='dotted'></div>
  <div class='pulse1'></div>
  <div class='pulse2'></div>
  <div class='pulse3'></div>
 </div>
</div>
  • Speed curve details

Animation timing function: Specifies the speed curve of the animation. The default is "ease"

value describe
linear The speed of animation is the same from beginning to end. Uniform speed
ease Default. The animation starts at a low speed, then speeds up, and slows down before it ends.
ease-in The animation starts at a low speed.
ease-out The animation ends at a low speed.
ease-in-out Animation starts and ends at low speed
steps() Specifies the number of intervals (in steps) in the time function
  /*Demand: typewriter effect*/
 div {
     overflow:hidden;
     width:0;
     height:30px;
     background-color:pink;
     white-space:nowrap;
    /*steps It's just a few steps to finish our animation. If we have steps, we don't need to write ease or linear anymore*/     
     animation:w 4s steps(10) forwards;
     
 }
 
 @keyframes w {
 
     0% {
         width: 0;
     }
     
     100%{
         width: 200px;
     }
 }
  /*Need: running bear
   1.Prepare various action background pictures of bear's running, and put them in one picture (type wizard picture)
   2.Using the position of the background map, change the position to make it feel like running in a box. */

 body {
    background-color: #ccc;
 }

 div {
    position:absolute;
    width: 200px;
    height: 100px;
    background: url(media/bear.png) no-repeat;
     /*Our element can add multiple animations, separated by commas*/
    animation: bear 1s steps(8) infinite, move 3s forwards;
 }
 
 @keyframes bear {
     0% {
       background-position:0,0;
     }
     
     100%{
       background-position:-1600px 0
     }
 }
 
 @keyframes move {
 
    0% {
       left:0;
     }
 
    100%{
      /*left 50% Will run half the width*/
       left:50%;
       //margin-left:-100px;
       transform:translateX(-50%)
    }
 }

tips: our element can add multiple animations, separated by commas

3D conversion

  • Three dimensional coordinate system

The three-dimensional coordinate system actually refers to the three-dimensional space, which is composed of three axes.

x axis: horizontal right note: x right is positive, left is negative

Y axis: vertical downward note: y is positive below and negative above

z axis: vertical screen note: positive outside, negative inside
  • 3D mobile translate3d

3D movement adds an additional direction that can be moved on the basis of 2D movement, namely z-axis direction.

/*Syntax: transform:translate3d(x,y,z)*/ ;
 div {
     width: 200px;
     height: 200px;
     background-color:pink;
    /*translateZ(100px) Move 100 PX outward (towards our eyes)*/ 
    transform:translate3d(100px,100px,100px)
   }

tips:

  1. transform:translateZ(100px):Just in Z Axial movement,translateZGeneral usepxCompany
  2. xyzIt can't be omitted. If not, write 0;
  • 3D perspective

Perspective is written on the parent box of the observed element, which is a kind of observation distance. The larger the Z axis is (positive value), the larger the object we see, the larger the near, the far and the small;

  body {
     //With perspective,  transform:translateZ It works. The smaller the perspective is, the more three-dimensional the object you see, the larger the box is
     perspective: 500px;
  }
  
  div {
     width: 100px;
     height: 200px;
     background-color: pink;
     margin: 100px auto;
     transform:translateZ(0)
  }
  • 3D rotation rotateX
 body {
     perspective: 300px;
  }
  
 img {
   display: block;
   margin: 100px auto;
   transition: all 1s;
 }
 

 img:hover {
    //transform:rotateX(180deg);
    //transform:rotateY(180deg);
    //transform:rotateZ(180deg);
    //Parameter x,y,z that has a value is to rotate along this axis, and the last one is the angle of rotation.   
    //transform:rotate3d(1,0,0,45deg);
    //The vector of x and y rotates 45 DEG diagonally
    transform:rotate3d(1,1,0,45deg);
 }
 

  <img src="media/pig.jpg">

tips: the direction of element rotation can be determined according to the left-hand rule

  1. X-axis rotation: the thumb of the left hand points to the positive direction of the x-axis (pointing to the right-hand side), and the bending direction of the other fingers is the direction of the element's rotation along the x-axis.
  2. Y-axis rotation: the thumb of the left hand points to the positive direction of the y-axis (pointing to its own direction),
    The bending direction of the remaining fingers is the direction (positive) in which the element rotates along the y axis.
  • 3D rendering transfrom style
    • Controls whether child elements turn on the 3D environment.
    • Transform style: flat sub element does not turn on 3d stereo space default
    • Transform style: preserve-3d; child elements open up the three-dimensional space
    • The code is written to the parent, but it affects the child box
 /*
  Requirement: two boxes Cross (cross) three-dimensional rotation
 */
 
 body{
    //body is the grandparent of div.
    perspective:500px;
 }

 .box {
    width: 200px;
    height: 200px;
    margin: 100px auto;
    transition:all 2s;
    /*Keep the sub elements in 3d space*/
    transform-style:preserve-3d;
 }
  
 .box:hover {
    transform:rotateY(60deg);
 }   
  
 .box div {
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
     background-color:red;
 }
 
 .box div:last-child {
     background-color:blue;
     transform:rotateX(90deg);
 }

  <div class="box">
    <div></div>
    <div></div>
  <div>
  • Actual case - two side flipped box
 
   body {
      //perspective
      perspective:400px;
   }
 
  .box {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 100px auto;
      transition: all .6s;
      /*Keep the sub elements in 3d space*/
      transform-style:preserve-3d;
  }
  
  .box:hover {
     transform:rotateY(180deg);
  }

  .front,
  .back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      font-size: 30px;
      color: #fff;
      text-align: center;
      line-height: 300px;
  }

  .front {
      background-color:red;
      z-index:1;
  }
  
  .back {
      background-color:blue;
      transform:rotateY(180deg);
  }

 <div class="box">
  <div class="front">I am positive.</div>
  <div class="back">I am negative.</div>
 </div>

//The box parent box contains two child boxes, the box is the flipped box, the front box is the front box, and the back box is the back box.

miscellaneous

css writing specification

  • The following sequence is recommended
 1. Layout location attribute: display / position / float / clear / visibility / overflow
 2. Self attribute: width/height/margin/padding/border/background
 3. Text attribute: color / font / text decoration / text align / vertical align / white space / break word
 4. Other attributes (CSS3): content / cursor / border radius / box shadow / text shadow / background: linear gradient
  • Example
 div {
    //layout
    display:block;
    position:relative;
    float:left;
    //Self attribute
    width:100px;
    height:100px;
    margin:0 10px;
    padding:20px 0;
    //Text attribute
    font-family:Arial,'Helvetica Neue', Helvetica,sans-sefif;
    color:#333;
    //New in css3
    background:rgba(0,0,0,.5);
    border-radius:10px;
 }

Overall idea of page layout

In order to improve the efficiency of web page production, the layout usually has the following overall ideas

  1. It is necessary to determine the version center of the page (viewable area / safe distance), which can be known by our measurement.
  2. Analyze the row modules in the page, as well as the column modules in each row module. It is the first principle of page layout.
  3. The column module in a row often floats the layout. First, determine the size of each column, and then determine the position of the column. The second principle of page layout.
  4. To make HTML structure, we still follow the principle of "structure first, then style". Structure is always the most important.

Page layout summary

Through the box model, it is clear that most html tags are a box.
Through css floating and positioning, each box can be arranged into a web page.
A complete web page is designed with standard flow, floating and positioning, each with its own special usage.

  1. Standard flow:
    The box can be arranged up and down or left and right. The vertical block level box display uses standard flow layout.
  2. Float:
    You can have multiple block level elements display in one row or align boxes left and right, and multiple block level boxes display horizontally in floating layout.
  3. Location:
    The biggest feature of positioning is the concept of layering, that is, multiple boxes can be displayed in front of and behind. Use the positioning layout if the element moves freely within a box.

New features of html5

  • Semantic label
 <header></header>
 <article></article>
 <aside></aside>
 <details></details>
 <figcaption></figcaption>
 <footer></footer>
 <hgroup></hgroup>
 <main></main>
 <menu></menu>
 <nav></nav>
 <section></section>
 <summary></summary>
  • Audio and Video Tags
 <audio> </audio>
 <video> </video>
  • New input type
Attribute value Explain
type="email" Limit user input must be of Email type
type="url" Restrict user input must be of URL type
type="date" Restrict user input must be of date type
type="time" Time type required to restrict user input
type="month" Limit user input to required month type
type="week" Limit user input must be of week type
type="number" Limit user input must be numeric type
type="tel" Phone number
type="search" Search box
type="color" Generate a color selection form
  • New form properties
attribute value Explain
required required If the form has this attribute, its content cannot be empty and is required
placeholder Prompt text Prompt information of the form. If there is a default value, it will not be displayed
autofocus autofocus Auto focus attribute, automatically focus to the specified form after page loading
autocomplete off/on When the user starts typing in a field, the browser should display the options to fill in the field based on the previously typed values. It has been opened by default, such as autocomplete = "on". To close autocomplete="off", you need to put it in the form, add the name attribute, and submit it successfully
multiple multiple Multiple files can be submitted

Reference material

https://www.bilibili.com/video/av80149248?from=search&seid=8416252108771814025

Recommend

If you want to know other front-end knowledge, you can look at it

To be continued~~~

Published 4 original articles, won praise 63, visited 4543
Private letter follow

Tags: Attribute css3 less html5

Posted on Fri, 07 Feb 2020 01:24:07 -0800 by nawhaley2265