12.16 ~ 12.23 working log, 12.1612.23 working log
2016.12.161. Added touchmove and other events to the function called by the cick event will cause event penetration, details (http://www.tuicool.com/articles/6NfaUnM)
The click event of a mobile device has a latency of MS, which is used to determine whether to double-click 2. the ios device will have a default css style. For example, the input button is square by default on the computer and the circle by default on the iPhone. The default ipone style method is clear: Input {-webkit-appearance: none;} 3. border-radius: 0; the button is right-angle border-radius: 15px; rounded corner 4. when the input text label is clicked in chorm, a yellow border will appear. Solution: input: focus {outline: none ;}
When the input text label is clicked on the mobile phone, a gray background will appear. How can this problem be solved:
Add: <meta name = "msapplication-tap-highlight" content = "no">
5. vw and FLAC are the percentages relative to the screen size, not relative to the parent element.
2016.12.191. solution to browser pull-down rebound: document. querySelector ('body '). addEventListener ('touchstart', function (ev) {event. preventDefault ();}) 2. when the div has no content, the border is a square 3 consisting of four triangles with the same vertex. 1px mobile phone: Reference: http://www.jianshu.com/p/7e63f5a32636 Pseudo-class solution: 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 ';}
<Div class = "clear"> </div> 1 Jun in April 2.960⃣Clear the floating effect and place it below the floating element. 2 rows⃣It can be used to wrap a line, even if the content of the line is not covered with all columns.
A. The margin parameters are alpha and omega;
B. the padding parameters are prefix and suffix;
C. The parameters for moving the stream away from the document are push and pull;
D. clear is the block carriage return line break.
3. Responsive pc screen size and media breakpoint
Http://www.bubuko.com/infodetail-1045273.html4. bootstrap: <meta http-equiv = "X-UA-Compatible" content = "IE = edge"> j is Compatible with I. e. <! -- The following two plug-ins are used to support HTML5 elements and media queries in IE8 and earlier browsers. You can remove them if you do not need them. --> <! -- [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 Tib⃣Add to parent <form> elementRole = "form".
- 2 cores⃣Place tags and controls in a class. Form-groupIn <div>. This is required to obtain the optimal spacing.
- 3 Cores⃣Add a class to all text elements <input>, <textarea>, and <select>. Form-control.
- <Form role = "form">
- <Div class = "form-group">
- <Label for = "name"> name </label>
- <Input type = "text" class = "form-control" id = "name" placeholder = "enter a name">
- </Div> </form>
Inline form: (all elements are inline, left aligned, and labels are side by side) add class to the <form> label
. Form-inline. <Form class = "form-inline" role = "form">
Note:
- By default, input, select, and textarea in Bootstrap are 100% in width. When using an inline form, you must set a width on the Form Control.
- Use class. Sr-onlyTo hide the label of the inline form.
Horizontal form:
- 1 Tib⃣Add a class to the parent <form> element. Form-horizontal.
- 2 cores⃣Place tags and controls in a class. Form-groupIn <div>.
- 3 Cores⃣Add class to label. Control-label.
- <Form class = "form-horizontal" role = "form">
2016.12.21
1. bootstrap: check box and single sector (Radio)
Add checkbox-inline to the labelOr
. Radio-inlineClass inline selection box
<Div class = "checkbox"> <label> <inputtype = "checkbox" value = ""> Option 1 </label> </div> <div class = "checkbox"> <label> <inputtype = "checkbox" value = ""> Option 2 </label> </div> <div class = "radio"> <label> <input type =" radio "name =" optionsRadios "id =" optionsRadios1 "value =" option1 "checked> Option 1 </label> </div> <div class =" radio "> <label> <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2"> Option 2-selecting it will deselect Option 1 </label> </ div> Select box)
- UseMultiple = "multiple"You can 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
When placing plain text behind a form label in a horizontal form, use class on <p>
. Form-control-static.
- <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@example.com </p>
- </Div>
- </Div> <
- /Form>
2. Knowledge Point: Sprite, css naming convention, negative margin value 2016.12.22
1. Background Image Positioning Method http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 2. A picture and a paragraph of text in the same line how vertical center? 1 Tib⃣After the experiment, the text is vertically divided into three parts, and the bottom 1/3 is the baseline. when the text of the element in the row and the image coexist in one line, the text baseline is aligned with the bottom of the image. 3. the spacing is the distance between paragraphs, and the line spacing is the distance between each row in a paragraph. Setting the p element margin and padding value to 0 can eliminate the section spacing that comes with the p tag. 4. the line element and other elements are in the same row, such as span. You cannot set margin-top or margin-bottom, only left and right Padding-left and padding-ringt can be set and the display effect can be set, but it has no effect on other elements and cannot be used to control the distance between upper and lower elements. 5. About flexbox; 6. 2 cores⃣Hr {Color: red; // invalid, color defines the Color of the content} 3 colors⃣Hr {Color: red; // invalid. color defines the Color of the content, which is valid for ie}
4 Cores⃣Hr {background-color: red; // The chrom is invalid}
5 Cores⃣Hr {border: 1px solid # d7d9d9; // valid for chrom}
2016.12.23
1. Display writing-mode: tb-rl vertically from right to left.
Parameter: 1. lr-tb: from left to right, from top down 2. tb-rl: from top down, from right to left
Http://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/, solution (IE does not support): text-orientation: upright 2. border imagehttp: // rewrite
3. problem: the package layer has a width of 100% and contains four sub-divs with a width of 25%. The sub-div is set to display. The fourth div of inline-block overflows to the next row, with margin: 0 and padding: 0: The reason cannot be eliminated: inline elements use spaces between labels as an element to display and occupy a certain width. Solution: 1. use float left 2 instead of inline-block. child div labels do not wrap. The previous closed tag is closely written with the last start tag without spaces. use a negative margin value; 4. the difference between round, repeat, and stretch is that tiled images may change the size of the original image. Repeated images do not change the size of the original image.
Tile is to automatically adjust the image proportion and fill the entire area with a complete unit (each image is completely displayed, not
Duplicate: when the last repeat fails to be placed, the part beyond the container width is not displayed.
