12.16~12.23 Weekday Log

2016.12.16Event traversal occurs when events such as Touchmove are added to the function called by the 1.cick event, details (Http://www.tuicool.com/articles/6NfaUnM)
the mobile device's Click event has a 300ms delay to determine whether to double-click2.ios devices will have a default CSS style, such as the input button on the computer default to square, and on the iphone default is a circle, clear Ipone Default style method:Input{-webkit-appearance:none;} 3.border-radius:0; the button is right-angled border-radius:15px; rounded corners4.input text tags when clicked in Chorm, a yellow border appears, eliminating the method:Input:focus {Outline:none;   }
when the input text tag is clicked on the phone, a gray background will appear, eliminating the way:
Add in HTML:<meta name= "msapplication-tap-highlight" content= "no" >
5.VW, VH is a percentage relative to the screen size, not relative to the parent element. 2016.12.191. Browser Pull-back solution: Document.queryselector (' body '). AddEventListener (' Touchstart ', function (EV) {Event.preventdefault ();    }) 2. When the div has no content, the border is a square of four triangles of the same vertex 3. Mobile 1px problem: reference: http://www.jianshu.com/p/7e63f5a32636The pseudo-class has been used to resolve:CSS Code:. Hairlines1,. hairlines2 {position:relative;Border:none;}. hairlines1:after {content: ";Position:absolute;top:0;left:0;border:1px solid #ececec;Box-sizing:border-box;width:200%;height:200%;Transform:scale (0.5);transform-origin:left top;}. hairlines2:after {content: ";Position:absolute;top:0;left:0;border:1px solid #ececec;Box-sizing:border-box;width:200%;height:200%;Transform:scale (1/3);transform-origin:left top;}
JS Code:if (3>window.devicepixelratio && devicepixelratio >= 2) {document.getElementById ("wrap"). ClassName = ' hairlines1 ';}if (window.devicepixelratio && devicepixelratio >= 3) {document.getElementById ("wrap"). ClassName = ' hairlines2 ';}

2016.12.201.960GS Chinese Information http://blog.chinaunix.net/uid-22414998-id-2878529.html960css Download Http://cdn.bootcss.com/960gs/0/960.css2.960 in<div class= "clear" ></div>1. Clear floating effects placed below floating elements2. Can be used for wrapping, even if the contents of the bank are not covered by all columns A, the margin parameter is Alpha and Omega; B, padding parameters are prefix and suffix; C, the moving parameters of the out-of-document flow are push and pull; D, Clear is the block carriage return line.   3. Responsive PC-side screen size and media breakpoints . http://www.bubuko.com/infodetail-1045273.html 4.bootstrap: <meta http-equiv= "x-ua-compatible" content= "Ie=edge" >j compatible i.e. <!--The following two plugins are used to support HTML5 elements and media queries in IE8 and the following versions of browsers, if not required. With can be removed --<!--[if Lt IE 9]><script src= "Https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" ></script><script src= "Https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" ></script><! [endif]->
5.bootstrap Form Implementation steps:Vertical form:

• 1?? Add a role= "form"to the parent <form> element.
• 2?? Place the labels and controls in a <div> with class . Form-group . This is required to get the best spacing.
• 3?? Add Class . Form-controlto all text elements <input>, <textarea>, and <select>.
• <form role= "Form" >
• <div class= "Form-group" >
• <label for= "name" > Name </label>
• <input type= "text" class= "Form-control" id= "name" placeholder= "Please enter name" >
• </div ></form>

Inline form: (all elements are inline, left-aligned, label side-by)Add Class . form-inlineto the <form> tag. <form class= "Form-inline" role= "Form" >
Attention:

• By default, input, select, and textarea in Bootstrap have a width of 100%. When using inline forms, you need to set a width on the form controls.
• Using Class . sr-only, you can hide labels for inline forms.

Level form:

• 1?? Adds class . form-horizontalto the parent <form> element.
• 2?? Place the labels and controls in a <div> with class . Form-group .
• 3?? Add Class . Control-labelto the label.
• <form class= "form-horizontal" role= "form" >
  

  2016.12.21
1.bootstrap:check box (checkbox) and Radio Box (Radio) Add the Checkbox-inline or . radio-inline class inline selection box to the label
<div class= "checkbox"><label><inputtype= "checkbox" Value= "" > Options 1</label></div><div class= "checkbox" ><label><inputtype= "checkbox" Value= "" > Options 2</label></div><div class= "Radio" ><label><input type= "Radio" name= "Optionsradios" id= "optionsRadios1" value= "Option1" checked> options 1</label></div><div class= "Radio" ><label><input type= "Radio" name= " Optionsradios "id=" OptionsRadios2 "value=" option2 "> option 2-select it will deselect option 1</label></div> selection box (select)

• use   multiple= "multiple"   allows the user to select multiple options. <select multiple class= "Form-control";
• <form role= "form";
• <divclass= "Form-group";
• <label for= "name" > select list </label>
• <selectclass= "Form-control";
• <option>1</option>
• <option>2</option>
• <option>3</option>
• <option>4</option>
• <option>5</option>
• </select>
  
• </form>
• static controls

Use class . form-control-static on <p> When you place plain text after a form label in a horizontal form.

• <form class= "form-horizontal" role= "form" >
• <div class= "Form-group" >
• <label class= "Col-sm-2 Control-label" >Email</label>
• <div class= "Col-sm-10" >
• <p class= "form-control-static" >[email protected]</p>
• </div>
• </div><
• /form>
  

2. Knowledge Points: Sprite chart, CSS naming specification, negative margin value 2016.12.22
1. Background image positioning method http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 2. How is a picture and a piece of text centered vertically on the same line? 1?? After the experiment, you should:The text is evenly divided into three points, the bottom one-third is the baseline, when the text of the elements in the line and the picture together, the baseline of the text is aligned with the bottom of the picture; 3. Spacing is the distance between paragraphs, and line spacing is the distance between each row in a paragraphset P element margin, padding value of 0 to eliminate the upper and lower spacing of the P tag's paragraph; 4. Inline elements and other elements on the same line, such as span, can not be set margin-top and Margin-bottom, only setPlace left and rightPadding-left and Padding-ringt can be set and can display effects, but no effect on other elements and cannot besufficient to control the distance between the upper and lower elements.  5. About Flexbox; 6. 1?? <HR color= "Red"/> Valid
 2?? hr{color:red;//is not valid, color defines the colors of the content} 3?? hr{color:red;//Invalid, color defines the colors of the content, ie is valid}
 4?? hr{Background-color:red;//chrom Invalid}
 5?? hr{border:1px solid #d7d9d9;//chrom effective}
2016.12.23
1. Text is displayed vertically from right to leftWRITING-MODE:TB-RL
Parameters:1, LR-TB: From left to right, from top to bottom 2, Tb-rl: From top down, right to left
http://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/English characters horizontal, solution (ie not supported): Text-orientation:upright2.border Imagehttp://www.zhangxinxu.com/wordpress/2010/01/css3-border-image/Http://www.w3cplus.com/content/css3-border-image
 3. Question:Wrapping Layer Width 100%, contains four 25%-width sub-div, sub-div are set Display;inline-blockFourth Div overflow to the next line, margin:0, padding:0 cannot eliminateReason:inline elements display spaces between labels as an element to occupy a certain widthWorkaround:1. Do not use Inline-block, use float left2. Child div tag does not wrap, previous closed tag and next start tag tightly written, no spaces3. Use a negative margin value;                     4.round (tiled), repeat (repeat), stretch (stretched)picture tiling differs from repetition: Tiling may change the size of the original picture display, repeat does not change the size of the picture display
  Tiling is the automatic adjustment of the proportions of the picture, the entire area is covered with a complete unit (each picture is displayed completely, not
will appear half a piece of the case) Repeat: the part that exceeds the width of the container does not appear when the last repetition is not placed
 

12.16~12.23 Weekday Log