Summary of tips for making web pages

/*It depends on your personal preference, but the default attribute of general tags is content-box, except for textarea and select*/
   box-sizing: content-box;
   -moz-box-sizing: content-box; 
   -webkit-box-sizing: content-box;

/*In IE10+ browsers, use CSS to hide the cross on the right side of the input text input box*/
input[type=text]::-ms-clear,::-ms-reveal{display:none;}
input::-ms-clear,::-ms-reveal{display:none;}
input{
  /*Remove the outline color when clicking*/
  outline: none;
  /*The padding has been removed in the reset style. If it is not removed, remember to have padding*/    
}

textarea{
    /*Don't forget that the box-sizing property value of the text area is border-box; all borders and padding are drawn based on your fixed width and height*/
     /*Remove the outline color when clicking*/
      outline: none;    
      /*If necessary, remove the resizable icons and functions in the lower right corner*/
      resize: none;
      /*The padding has been removed in the reset style. If it is not removed, remember to have padding*/
}

input::-webkit-input-placeholder { 
    /* WebKit browsers */ 
    font-size:14px;
    color: #333;
} 
input:-moz-placeholder { 
    /* Mozilla Firefox 4 to 18 */ 
    font-size:14px;
    color: #333;
} 
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */ 
    font-size:14px;
    color: #333;
} 
input:-ms-input-placeholder { 
    /* Internet Explorer 10+ */ 
    font-size:14px;
    color: #333;
}

/* Clear IE's default selection box style and hide the drop-down arrow */
select::-ms-expand { display: none; }
select {
  /*The borders in Chrome and Firefox are different, so I copied them*/
  border: solid 1px #333;

  /*Clear the default select box style*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

  /*Display a small arrow image in the middle of the rightmost selection box*/
  background: url("small arrow image path") no-repeat right center transparent;

  /*Leave some space for the drop-down arrow to avoid being covered by text*/
  padding-right: 14px;

  /*Remove the outline color when clicking*/
  outline: none;
}

button{
    /*It has a 2px border, and ordinary buttons do not need a border*/
    border: none;
    /*The original background color can be replaced by other colors*/
    background: #333;
    /*The padding has been removed in the reset style. If it is not removed, remember to have padding*/
}

/*Because you can't directly change the style of input[type="radio"] and input[type="cheakbox"], you need to use label tag association, then hide the input tag and directly give the label tag style. Selecting label means selecting this label*/
<label for="sex">Male</label>
<input type="radio" id="sex" value="Male" />

white-space: nowrap; /* Force no line break */
overflow:hidden; /*Hide the excess content when the content exceeds the width*/ 
text-overflow:ellipsis;/* Displays an ellipsis mark (...) when the text in the object overflows. It must be used together with overflow:hidden;. */

-moz-user-select: none; /* Firefox*/
-webkit-user-select: none; /* webkit browser */
-ms-user-select: none; /* IE10 */
-khtml-user-select: none; /* Early browsers */
user-select: none;

vertical-align: 30%;
vertical-align: middle;

div{
    width:400px;
    height:300px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-150px 0 0 -200px;
}

// Return key written in js onclick = 'history.go(-1)';

// Force refresh page window.location.reload(true);