15. Floating issue supplement

table can also have beautiful appearance in layout, but it has the following disadvantages:

• Too deep nesting, such as Table > tbody > tr > td > H3, will make it difficult for search engines to read, and the most direct loss is to greatly increase the amount of code
• Poor flexibility, such as setting tr to border and other attributes, is not feasible. You have to pass td
• The code is bloated. When applying table to table, reading the code will be very chaotic
• Chaotic colspan and rowspan. When used for layout, frequent use of them will cause confusion in the order of the whole document
• table needs multiple calculations to determine the attributes of its nodes in the rendering tree. It usually takes three times as long as the same elements
• Not enough semantics, both computers and code readers find it very difficult to read

16. Style initialization

1. Many tags, especially text tags, have default styles, and some default styles will display different effects in different browsers. In order to unify the styles, you need to initialize the browser default styles
2. Check whether the element has a default style through the layout in the browser viewer, which is our common default style
   • Outer margin of elements such as body, p, ul, ol, dl, h1-h6, etc
   • Inner margin of elements such as ul, ol, dl, etc
   • Bold of h1-h6, b, strong and other elements
   • i. em and other elements in italics
   • a color and dash pattern of each state of element
   • List style of li element
3. Predefined styles, which are used in almost most pages, are suitable for the location where we initialize the browser:
   • Set all element box model types, font sizes, and font colors
   • Disable the browser from displaying horizontal scroll bars
   • Closed floating class
   • Sets the alignment of inline elements with height to text

*{
    box-sizing: border-box;
    /* The amount of retrieval is relatively large, which consumes performance */
}

body{
    font-size: 14px;
    /* Font style inheritance */

    line-height: 1.2;

    font-family: "Microsoft YaHei "，"Blackbody",Arial, Verdana;

    color: #000; 
    /* Hexadecimal can be abbreviated */

    overflow-x: hidden;
    /* Horizontal scroll bar clear */
}

body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl{
    margin: 0;
}

/* Default infill */
ul,ol{
    padding: 0;
    /* inherit */
    list-style: none;
}

/* The default is bold */
h1,h2,h3,h4,h5,h6,b,strong{
    font-weight: normal;
}

/* Italics */
i,em{
    font-style: normal;
}

/* Clear the default style for a tag */
a{
    color: black;
}

a:link{
    color: black;
    text-decoration: none;
}

a:visited{
    color: black;
    text-decoration: none;
}

a:hover{
    color: black;
    text-decoration: none;
}

a:active{
    color: black;
    text-decoration: none;
}

/* Clear float */
.clearfix::after{
    display: block;
    content: "";
    clear: both;
}

17. Method of hiding elements

• display:none/block； Hide elements by leaving them out of position on the page (hover state cannot be obtained)
• visibility:hidden/visible； Hide the element by making it invisible (the element still occupies a place in the page, but the hover state cannot be obtained)
• opacity:0-1; Change the transparency of the element. 0 is completely transparent and 1 is opaque (hover state can be obtained when it is completely transparent)

<div class="hidden1">123</div>
<div class="hidden2">456</div>

.hidden1{
    width: 200px;
    height: 200px;
    background-color: rgb(255,0,0);
    /* Non occupancy */
    display: none; 
}
.hidden2{
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
}
.hidden1:hover{
    display: block;
    /* No space, no touch */
}

.hidden1{
    width: 200px;
    height: 200px;
    background-color: rgb(255,0,0);
   /* Invisible, still occupied */
   visibility: hidden;
}
.hidden2{
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
}
.hidden1:hover{
    display: block;
    /* Occupied, can't touch */
}

.hidden1{
    width: 200px;
    height: 200px;
    background-color: rgba(255,0,0,0);
}
.hidden2{
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
}
.hidden1:hover{
    display: block;
    /* Space occupying, touch it */
}

.hidden1{
    width: 200px;
    height: 200px;
    background-color: rgb(255,0,0);
    opacity: 0.5;
}
.hidden2{
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
}
.hidden1:hover{
    display: block;
    /* Space occupying, touch it */
}

18. Percentage units

• The line height of the font uses a percentage to indicate what percentage of the font size is

  p{
      font-size: 16px;
      /* Refers to the proportion of font size */
      line-height: 1.2em;
  }
  

• The percentages of width and height are the percentages of the width and height of the parent element (the height of the parent element must be fixed and cannot be extended by the content)

  p{
      /* Refers to 50% of the width of the parent element */
      width: 50%;
      /* Refers to 50% of the height of the parent element */
      height: 80%;
  }
  

• The percentages of padding and margin are the percentages of the width of the parent element

  p{
      /* 20% of the width of the parent element */
      padding-top: 20%;
  }
  

• Background position the percentage of background positioning is the percentage of the remaining size of element width / height - picture width / height

  div{
      width: 800px;
      height: 800px;
  
      /* background Is a composite style */
      background: url(../20200710/img/first.jpg) no-repeat yellow 50% 0;
      /* 
      50% 0
      Parent element div picture width
      */
  }
  

19. Maximum and minimum width and height

When the width and height dimensions of an element are variable, the maximum and minimum width and height control range can be used. For example, it can be used together with the above percentage width and height to make a change with the effect of range:

• Max width
• Min width
• Max height
• Min height

p{
    /* width: 300px; */
    width: 70%;
    max-width: 400px;
    background-color: yellowgreen;
	
    /* max-height: 300px;
    overflow: auto; */

    min-height: 300px;
}