Common CSS layout of | common units | horizontal and vertical centering

Common layout:

　　1. Fluid layout: Percentage layout, width and height, margin, pinding are percentages

　　2. Fixed layout: box width and height fixed, such as: margin, padding, etc.

　　3. Floating layout: float

　　4. Flexible layout: flex (Webkit core browser, -webkit prefix must be added.)

　　5. Response layout: media queries, such as &: hover

　　6. Positioning layout: position

 

　　Elastic layout:

　　　　The concept: The Flex layout elements, called Flex container, all the elements of his child automatically becomes a member, become a Flex project

　　　　Exemplified by the role:

　　　　　　* May be achieved by automatically retractable flex value items (child elements flex vessel) of

　　　　　　· By setting justify-content (spindle arrangement) or align-items (cross-axis arrangement) to achieve the level of vertical center to center

　　　　Container properties:　　

 　　direction-Flex: Row | Row-Reverse | column | column-Reverse; // direction is determined spindle (ie, the arrangement direction of the project). 
    row (default value): The spindle is horizontal, the starting point at the left end. 
    Row - Reverse: spindle horizontal direction, the starting point at the right end. 
    column: main vertical direction, the starting point on the edge. 
    column - Reverse: spindle in the vertical direction, along the lower starting point. 


    Flex -wrap // default, all items in a row line (also known as "axis") on. flex-wrap property definition, if the row axis less than one, how wrap. 
    nowrap (default): Do not wrap. 
    wrap: wrap, over the first line. 
    wrap - Reverse: wrap, below the first row. 


    Flex -flow: <flex-direction> || <flex-wrap>; // is shorthand flex-direction property and flex-wrap property, the default value row nowrap. 


    The justify -content: Flex-Start | Flex-End | Center | Space-the BETWEEN | Space-around;// attribute defines the project is aligned on the spindle. 
    DETAILED alignment with the direction of the shaft concerned. The following assumptions spindle from left to right. 
    Flex - Start (default): Left 
    Flex - End: right alignment 
    center: center 
    Space - BETWEEN: justification, the spacing between the items are equal. 
    Space - around: at equal intervals on both sides of each item. Therefore, the gap between the project twice the size of the project and the interval of the border. 


    align = left -items: Start-Flex | Flex-End | Center | Baseline | Stretch; // define how to align the cross shaft projects. 
    It may take five values. DETAILED alignment direction intersecting the axis-related, cross-axis from top to bottom the following assumptions       
    Flex - Start: start point of the cross-axis alignment. 
    Flex - End: end cross-axis alignment. 
    center: the midpoint of cross-axis alignment. 
    baseline: first line of text of the project baseline alignment. 
    stretch (default): If the project height is not set or set to auto, occupies the entire height of the container.


    align = left -content // defines a plurality of axes alignment. If the project is only one axis, the property does not work. 
    FLEX- Start: start point is aligned with the cross shaft. 
    Flex - End: aligned with the end of the cross shaft. 
    center: the cross-axis aligned with the midpoint. 
    Space - BETWEEN: both ends of the cross-axis alignment, the average spacing between the axes of the distribution. 
    Space - around: the axis of each of both edges are equal. Therefore, the spacing between the axes twice the size of the interval axis border. 
    Stretch (default): axis occupies the entire cross-axis.

 

　　　Project properties:

// the order defined in the project. The smaller the value, the more forward arrangement, the default is 0. 
Order: <Integer> // enlarged scale defined project, the default is 0, i.e., if there is free space, not enlarged 
Flex-Grow: <Number> // defines the reduction ratio of the program, the default is 1, i.e. if the space is insufficient the project will be reduced. 
Shrink-Flex: <Number> ;
 // defines the space of the spindle prior to dispensing of extra space occupied by the item (main size). // browser based on this property, calculate the spindle if there is extra space. The default is auto, that the original size of the project. 
flex-basis: <length> | Auto
 // is flex-grow, flex-shrink and flex-basis shorthand, the default value 0 1 auto. After two optional attributes. // This property has two quick values: auto (1 1 auto) and none (0 0 auto). 
Flex: none | [< ' Flex-Grow ' > < ' Flex-Shrink ' > || <? ' Flex-Basis '



// allows a single item with other items has a different alignment, may cover the align-items property. The default value is Auto, 
// inherited parent element represents align-items attributes, if no parent, is equivalent to the stretch. 
align-self: auto | flex- start | flex-end | center | baseline | stretch;

 

Centered manner to achieve horizontal and vertical

　　Unknown box width and height

　　　　1. inline-block and the text-align and vertical-align

　　　　2. Use the table-cell (analog form), inline-block implementation (provided mainly text-align / vertical-align property)

　　　　3. Horizontal and vertical layout implementing elastic centering ( The justify-Content: Center; align = left-items: Center;)

　　　　4. Vertical Centering transform

　　2. using absolute positioning and margins manner (known box width and height)

 

And the difference between common units

　　px: relative length unit. Relative to the screen resolution

　　em: value is not fixed , inherit the  parent element  's font size

　　rem: The value of  the root element (html) in terms of the font size

　　Rem moving end unit size adaptive control of the code (62.5% will be directly provided some small bug)

/ * Mobile adaptive * / 
(function (DOC, win) { 
    the let docEl = doc.documentElement // root element HTML 
     // window has no orientationchange Analyzing this method, it is assigned to a variable has not returned resize method. 
     The let ? resizeEvt = 'orientationChange' in window 'orientationChange': 'a resize'          
     the let Recalc = function () { 
          the let the clientWidth = docEl.clientWidth; IF (the clientWidth!) return; 
         // IF (the clientWidth> = 560.) { 
         // = the clientWidth 560; 
         // fontSize size of the document to be provided with a certain proportion of the size of the window, in order to achieve responsive results. 
         @} 
        docEl.style.fontSize = 100 * (the clientWidth / 750) + 'PX'; 
    }; 
    IF ( ! doc.addEventListener) return; 
    Recalc ();
    // addEventListener event method accepts three parameters:
    // The first is the name of the event, such as a click event onclick, the second is the function to be performed, and the third is a Boolean 
    win.addEventListener (resizeEvt, Recalc, false); 
　　// bind the browser zoom and loading time 
    doc. the addEventListener ( 'the DOMContentLoaded', Recalc, to false); 
}) (Document, window);

　　

 

Never self-righteous, before God you're just lengtouqing