Work for more than a year, found that bloggers do not write much, in line with the principle of sharing, this year has also accumulated some knowledge, I hope you less trample pits, of course, trampling pits is not necessarily a bad thing, it is a growth.

Front-end production considerations:

• Browser compatibility, IE7, Google, Firefox, 360, Baidu and other browsers compatible;
• Screen adaptation, large screen and small screen width adaptation, minimum width and minimum height limit;
• Consider the situation of too much text;
• Form input setting prompt options, pay attention to the location of error prompts;
• When cutting the page of topic type, we should consider various possible types of questions, such as single-choice, multiple-choice, judgement questions, etc. In the type of questions, words or pictures may be placed.
• Consider the uniformity of the styles of various form controls, such as input boxes, drop-down boxes, radio boxes and multiple check boxes.
• The mobile side avoids using pictures. Round corners, shadows and gradients can be implemented with CSS3.
• APP head and bottom are fixed (position:fixed;bottom:0||top:0);
• If the current type is used to mark the current style in the list selection state, it should be placed in all list items.
• margin-bottom should be set in the content part to avoid covering the bottom.

Some minor problems encountered in front-end production:

• When setting overflow and z-index attributes under IE7, position:relative should be set for elements at the same time.

• Google Incompatible cursor:pointer Problem Solution:

     input[type="file"]::-webkit-file-upload-button{cursor:pointer;}

• CSS vertical centering method:
  
  1. Set display:table for the parent element;
     Disadvantage: Not compatible with IE7
  2. Set positon: absolute | fixed; (recommended fixed)top:0;bottom:0;left:0;right:0;margin:0 auto;
     Disadvantage: IE7 is incompatible, and the shrinkage of the visual window can be problematic.
  3. position:absolute;top:50%;margin-top:-(height/2)px;left:50%;margin-left:-(width/2)px;
     Disadvantage: The width and height of floating layer can not be adapted, so it needs fixed width and height.
  4. Use JS to set the location
     style

.reply_pop {
    margin:0px auto;
    position: absolute;
}

Script

$(function () {
    $(window).resize(function () {
      // Setting the position of the bullet box div
      setPosition($("#reply_pop"));
    }).resize();
  });
function setPosition(pop){
  pop.css("top",($(window).height()-pop.height())/2+'px');
  pop.css("left",($(window).width()-pop.width())/2+'px');  
}

• Elements can be used to modify the root address of all links in a document
• html*{border:1px solid#ccc;} means that all elements inherit the border attribute of html and can be used to view nested relationships of blocks.
• iframe Border Removal is compatible with IE browsers by using style = "height:100%" border = "0" frameborder = "no" scrolling = "auto"
• Hiding iframe scrollbars can set border = "0" frameborder = "0" scrolling = "auto" style = "height:100%"
• Automatically change the height of the Iframe:

function setIFrameHeight(iframe) {
            var ifm_content = document.getElementById("conFrame");
            ifm_content.height = "500px";//The default setting is 500px
            var heightContent = "500px";
            var subContent = document.frames ? document.frames["conFrame"].document : ifm_content.contentDocument;
            if (iframe == "content") {//If the input Ifame Id equals the content reassignment height to iframe
                heightContent = Math.max(subContent.body.scrollHeight, subContent.documentElement.scrollHeight);
                ifm_content.height = heightContent;
            }
        }

Examples show that:
There is an Iframe usage in Html as follows:

<iframe id="conFrame" src="a.html" frameborder="0" scrolling="no"
            width="100%"height="500px"onload="setIFrameHeight('content');"></iframe>

Note: Automatically changing the height of iframe is only to set the height of iframe to the height of content when initializing. When the page dynamically adds tag elements, the height of iframe can not automatically grow, which results in the content of the page being blocked. At present, the better method is to set the height of iframe to the window size and display the scroll bar.

• Notes for using iframe:
  
  1. The iframe can't change automatically with the size of the window, so the code that changes the height of the iframe should be added to the window.resize.
  2. To modify the height of iframe when loading, the height operation should be written in the load method, so that the height can be changed dynamically.
     for example

$(function(){
  $("#content").load(function(){
    var client_h=document.documentElement.clientHeight || document.body.clientHeight;
    var iframe_h=client_h-$(".f_wrap").height();
     $(this).height(iframe_h);
  });
});
$(window).resize(function() {
  var client_h=document.documentElement.clientHeight || document.body.clientHeight;
  var iframe_h=client_h-$(".f_wrap").height()-4;
  $("#content").height(iframe_h);
});

• Modify the input non-editable style

input:disabled{
    background-color: #f5f5f5;
}

input[disabled]{
    background-color: #f5f5f5;
}

• Media query and min-width:0 are compatible with IE9 and above, which can be used to filter IE8 and the following versions.
• Common icons should be written as far as possible, because changing numbers can change icons, and the spacing can also be controlled uniformly (font icons can be used to set icons, refer to the reference reference reference library). Ali Icon Library)；
• position Location Detailed
  static: Default value, elements arranged according to normal document flow planning;
  relative: In the normal document stream, it can be located by left and top.
  Abslute: Departing from the normal document flow, you can set left,top, locate the element whose reference element is the parent and whose location attribute has been set.
  fixed: Departing from the normal document flow, you can set left and top location, and use the four corners of browser as a reference point.
  IE5.5-IE6 does not support
• Three cases are separated from document flow: floating, absolute positioning and fixed positioning.
• Solve the bug of scrollbar flickering

*html{background-image:url(about:blank);background-attachment:fixed;}

• vertical-align:middle; vertical-align:middle for the next element of the current element (vertical-align:middle for webkit browser alignment, line-height: for IE vertical alignment, basically compatible with all browsers);
• Change the input placeholder color without affecting the font color:

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

• CSS3 Vertical Centralization
  Setting the parent element: display:table
  Setting the child elements: vertical-align: middle; display: table-cell;
  Note: The parent element cannot be positioned absolutely.
• Prohibit the default style of input for the iPhone

input[type="button"], input[type="submit"], input[type="reset"] {
    -webkit-appearance: none;
}

textarea {
    -webkit-appearance: none;
}  

• @ font-face uses custom fonts and can compress text using spider. The node command is:
  font-spider ./demo/*.html
• css limits the number of lines in a paragraph and displays an ellipsis

 overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;
-webkit-line-clamp:2; /*Restrict display of two lines*/

• Solving the white edge problem of iframe under IE9/8

    iframe{display:block;}

• Browser default radio box writing specification:

<label class="defaultChex">
    <input type="checkbox" name="default1"> 
    Discount Store
</label>

Okay, so much for this time. There are also some js and jQuery notes, which will be sent back later. If you have any questions, please feel free to discuss them.
Beginning: As long as you're still trying, you won't fail.