Mobile-side layout, C3 new properties

"HTML5 Drag and Pull"
1, the element is set draggable= "true" property, this element can be dragged

Drag element Event

2, ondragstart before the event triggered by dragging
Example: Div1.ondragstart=function () {//before drag
Div1.style.background= "Blue";
}

3, Ondrag Drag before to drag the end of continuous trigger
Example: Div1.ondrag=function () {//drag in
Div1.style.bordercolor= "Blue";
}

3, ondragend drag end Trigger
Example: Div1.ondragend=function () {//after dragging
Div1.style.background= "#fff";
}

"Target Element Event"

1, ondragenter into the target element trigger

2, ondragover into the target to leave the target, continuous triggering

3. OnDragLeave leave target element trigger

4. OnDrop release mouse trigger on target element

"DataTransfer Object"

1, solve the problem under Firefox
Firefox must have a DataTransfer object in order to drag and drop a tag other than the image.

2, SetData () Set data GetData () Get Data
E.datatransfer.setdata ("id", e.target.id) setting data
E.datatransfer.getdata ("id") Get Data
"Note": Set the data in the drag element, get the data in the target file
3, Setdragimage in the drag and drop elements temporarily into a picture
E.datatransfer.setdragimage (img,50,50)
Three parameters: specified element, coordinate x, coordinate y
4. Files Get External drag-and-drop file, set in Target element
Example: E.datatransfer.files;

"FileReader Read file Information"
1. The Readasdataurl parameter is the file object to read, and the file is read as Dataurl
Example: Var f=new filereader ()
F.readasdataurl (Fils[i])

2.onload
This event is triggered when the read file is successfully completed. result,
To get the read file data, if it is a picture, it will return the picture data in base64 format

"Local Storage"
1, localstorage.name= "XXX"; The first method of setting up local data storage

2, Localstorage.setitem ("Set", "XX"); The second method of setting up local data storage

3, Localstorage.removeitem ("name"); Delete locally stored data

4. Alert (localstorage.name)//Get Local Data
Alert (Localstorage.getitem ("set"))//Another way to get local data

5. Alert (Localstorage.key (0))//Get the name of the previous saved data in parentheses the values and arrays are the same

6, Localstorage.clear ()//clear all locally stored data

7, Localstorage.setitem ("Set1", "{' Name ': ' Xiao Li ', ' age ': ' 1314 '}")//Save as Jameser format

8, Zhi=localstorage.getitem ("Set1")//Get saved Local data
Zh=eval (' (' +zhi+ ') ')//convert the placeholder format to an object
Alert (zh.age)//Call the value in it

"CSS3 Selector"

　　1. Attribute Selector

1, P+a + indicates the same parent element followed by the matching element immediately after the specified element (match only the first one following)

2. P~a ~ line represents all matching elements following the specified element under the same parent element

3, A[href] matches only the property, which is the label that matches the specified attribute only for the specified label.

4, a[href= "a"] matches attributes and attribute values, and can only match the label in the specified label that must be exactly the same as the property and attribute values in the [].

5, a[href~ = "A"] such as with the ~ match attribute can be matched such as a class with two values so that the band ~ can match one of the
The

6. A[href ^ = "A"] matches attributes and attribute values but the property value is a label that starts with the property value in ""

7, A[href $ = "a"] matches attributes and property values but the property value is the label that ends with the property value in ""

8, A[href * = "a"] match attributes and property values can be matched as long as the value of the attribute contains the values in "".

9, A[href | = "a"] match attributes and property values so that the property value is "A-B" label, so write can be written without writing-;

2. Pseudo-Class Selector

1,: Active mouse Click and release occurs, that is, when the mouse click on the time will occur, release and then restore.

2,: Hover mouse move into a change or event, when the mouse left back to revert to the state before the move in.

3.: Link sets the link style that is not visited, and when clicked it will return to the original or set state.

4: Visited set the style after the link is accessed.

3. Structural pseudo-Class selector

1.: root is used to match the roots of the document;

2, Div>:not (p) does not operate/match the non-specified element within the parentheses; what element under which element must be written does not operate on it

3,: Empty matches No child elements no text even spaces are not elements

4.: Target selects the object element of the current activity;
This is to set the href attribute to the tag to be clicked by the href attribute on the line anchor link; manipulate the label that the stroke points to

4. Child element operation under parent element "Note" Specifies that the element must be written to match the element that cannot be its parent element
1,: First-child matches the first element in the parent element is the element of the specified label to operate;
Example: P:first-child means that the first child element under all parent elements is a P-tag element.

2,: Last-child match the last element in the parent element is the element of the specified label to operate;
Example: P:last-child means that the last child element under all parent elements is a P-tag element.

3: Only-child matches only one of the specified child elements under the parent element; Action on matching child elements
Example: P:only-child means matching all parent elements with only one P tag; the matching specified element

5. The action element specifies the same element in the parent element as the element where it matches the element

1,: Nth-child (1) matches the first child element of all child elements belonging to its parent element, the element that matches the specified element
Here, as long as the child element under the parent element and the parentheses value want to wait for a different position than the specified element.
Example: P:nth-child (1) means that the first child element in the matching parent element is the element of the P tag, and the P tag is manipulated

2,: Nth-of-child () matches the specified element in the parent element in the first occurrence of the element to operate,
This means that the number of labels specified will match as long as they are not smaller than the values in parentheses.
Example: P:nth-of-child (1) matches the first occurrence of the P label in the parent element

3.: Nth-last-child () same as above (1) just the first one is the one that was previously forgotten,
This is a forward-to-back match (1) in parentheses, 1 represents the last; Unlike the 1 above, it represents the first one.
Example: P:nth-last-child (1) means that the last child element in the matching parent element is the element of the P tag; operate on the P tag

4.: Nth-last-of-child () same as the second above, just from the last one.
Example: P:nth-last-of-child (1) matches the first occurrence of the P label in the parent element from the backward forward

5, even even odd odd 1n: Numbers plus n means multiples of numbers
These fill in the brackets above for better labeling operations.

6. Element State pseudo-class selector
1: Focus selects input to get the focus of the element, loses focus will return to the state before the focus

2,: Enabled select the available elements

3.:d Isabled Select an element that is not available

4.: Read-only Select elements in read-only state

5.: Read-write Select readable and writable elements

6.: Checked match check box or single box selected element

7.:d Efault When the page is open check box or radio box is selected by default

8,:: Selection when the element is able to allow the selected state

9.: Indeterminate the whole set of radio boxes when the page is open the style of the whole set of radio boxes is not selected by default

7. Pseudo Element Selector
1,: First-line Select the first line of the specified selector

2,: First-letter Select to specify the first letter or the first word of a selector

"Mobile Head Layout"
1. Refresh
<meta http-equiv= "Refresh" content= "3" >
| |
Restore, refresh for how long

2. Document Type
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">

3. Language
<meta http-equiv= "Content-language" content= "ZH-CN" >

4. Page description
<meta name= "description" content= "Test" >

5, keyword search: to the browser search engine use, can be improved priority search level
<meta name= "keywords" charset= "Meta,meta Properties, Heroes" >

6, preferred to use the latest IE browser eage and Google 1
<meta http-equiv= "x-ua-compatible" content= "ie=edae,chome=1" >

7, mobile phone with a wide range of mobile phone height is the maximum and minimum scale of the initial size scaling
<meta name= "viewport" content= "width=device-width,height=device-height,
Display device wide display device high
User-scalable=no,initial-scale:0.5,maximum-scale=3,minimum-scale=1 ">
Whether the user can scale the initial zoom multiplier maximum zoom factor minimum zoom factor

"standard box and Weird box"

1, the box model has two kinds of 1, the Standard Model 2, the Strange Box

2, the Standard box: He will be the border is also counted as a placeholder width;
Weird box: After adding a property like a 300-plus 2-pixel border, does his placeholder width or 300 not be 304
And the inner margin is the same; a weird box with a border plus an inner margin does not change the width of the box's initial setting

3, Box=sizing
He has two attributes of Box-sizing:content-box; Use standard box metering
Box-sizing:border-box; Use weird box metering
The "note" property is written in the element you want to set.

"Elastic box"

1, Flexible box: is to adapt to different screen size of the device to ensure that the elements have the appropriate behavior of the layout method
Elastic boxes are made up of elastic containers and elastic sub-elements

2, Display:flex; and Inline:flex;
Elastic container by setting element properties to Display:flex (block-level element layout)

3, the flex-direction spindle arrangement direction
Flex-direction:row; The spindle is in the horizontal direction, starting at the left end, which is the default of the elastic box
Flex-direction:row-reverse; The spindle is in the horizontal direction, starting at the right end, that is, the last row is the first, and the second is
Second, arrange in sequence
Flex-direction:column; The spindle is in a vertical direction and the starting point is the first child element
Flex-direction:column-reverse; The spindle is in the vertical direction, the starting point is the last child element, and the reverse

4, Flex-wrap The main axis of the line will not be squeezed in a piece
Flex-wrap:nowrap; (default) No line break, no break, no wrapping.
Flex-wrap:wrap; Line break, first line above
Flex-wrap:wrap-reverse; Line break, first line at the bottom

5, Flex-flow spindle direction and line
Default Flex-flow:row nowrap

6. Justify-content the alignment of the elastic element on the spindle
Justify-content:flex-start; Align left on the spindle
Justify-content:flex-end; Right alignment on the spindle
Justify-content:center; Center alignment on the spindle
Justify-content:space-between; Justify on the spindle, the spacing between elements is equal
Justify-content:space-around; Aligned on the spindle, spaced equally between the elements, one-fold between elements and border intervals

7. Align-items Cross axis alignment (i.e. vertical alignment)
Align-items:flex-start; Start alignment of the intersection axis
Align-items:flex-end; End alignment of the intersection axis
Align-items:center; Center alignment of Cross axes
Align-items:baseline; The baseline alignment of the first line of text for the item
Align-items:stretch; (default) The item is not set to height or height to auto and will fill the height of the entire container

8. Align-content to modify the behavior of properties after Flex-wrap wrapping
Align-content:flex-start; Start alignment of the intersection axis
Align-content:flex-end; End alignment of the intersection axis
Align-content:center; Center alignment of Cross axes
Align-content:space-between; Cross axes are justified; distance between elements is evenly distributed
Align-content:space-round; The intersection axis is equal between rows and rows, and the elements are one-fold between the elements and the border.
Align-content:stretch; The axis (default) fills the entire cross axis.

9. How flex allocates space for elastic child elements
Flex-grow:2; Define the expansion ratio of elastic box sub-elements
Flex-shrink:1; Define the shrinkage ratio of the elastic box
Flex-basis: Defines the default base value for elastic boxes

From the usual summary, if the similarities are purely coincidental.

Mobile-side layout, C3 new properties