HTML and CSS Layout tips

First, single-row layout

　1. Center Horizontally: (Note: The following example implements the child element's alignment operation, the child element's parent container is the parend element)

1-1: Implemented using Inline-block and text-align:

. Parent{text-align:center;}

. Child{display:inline-block;}

Advantages: good compatibility;

Insufficient: You need to set both parent and child elements;

1-2: Use margin:0 Auto to implement

. child{width:200px;margin:0 Auto;}

Advantages: good compatibility;

Insufficient: need to develop width;

1-3: Using Table implementation:

. child{display:table;margin:0 Auto;}

Advantages: Only need to set itself;

Insufficient: ie6,7 need to adjust the structure;

1-4: Use absolute positioning to achieve:

. parent{position:relative;}

/* or the negative value of the utility Margin-left is half the width of the box can be achieved, but this must know the box section, but good compatibility */

. Child{position:absolute;left:50%;transform:translate (-50%)}

Insufficient: Poor compatibility, IE9 and above available

1-5: Practical Flex Layout Implementation:

/* First Method */

. Parent{display:flex;justify-content:center;}

/* The second method */

. Parent{display:flex;}

. child{margin:0 Auto;}

Insufficient: Poor compatibility, if a large area of layout may affect efficiency

2. Vertical Center: vertical-align (called "Inline-block dependent element", that is, only one element belongs to inline or Inline-block,table-cell can also be understood as Inlin-block, The Vertical-align property of the body will only work)

When using vertical-align, it is necessary to set the Line-height or set the Display:table-call because the baseline of the row is used as the baseline for its baselines;

/* First Method */

. parent{display:table-cell;vertical-align:middle;height:20px;}

/* The second method */

. parent{display:inline-block;vertical-align:middle;inline-height:20px;}

2-1: Practical Absolute positioning:

. parent{position:relative;}

. Child{position:absolute;top:50%;transform:translate (0,-50%);}

2-2: Practical Flex implementation:

. Parent{display:flex;align-items:center;}

3. Horizontal Vertical Center:

3-1: Using Vertial-align,text-align,inline-block to achieve

. Parent{display:table-cell;vertial-align:middle;text-align:center;}

. Child{display:inline-block;}

3-2: Use absolute positioning to achieve:

. parent{position:relative;}

. Child{position:absolute;top:50%;left:50%;transform:translate ( -50%,-50%);}

3-3: Using Flex implementation:

. Parent{display:flex;justify-content:center;align-items:center;}

Second, multi-column layout

1. Left column width, right column adaptive (this layout is very common, applicable to the fixed width of the side is often navigation, adaptive side of the layout of the content)

1-1. Using the float + margin implementation:

. left{float:left;width:100px;}

. right{margin-left:100px;}

Note: The IE9 has a 3px bug

1-2. Using the float + margin (fix) implementation

1 <Divclass= "Parent">2     <Divclass= "Left"></Div>3     <Divclass= "Right-fix">4         <Divclass= "Right"></Div>5     </Div>6 </Div>

　　

. Left{width:100px;float:left;}. Right-fix{width:100%;margin-left:-100px;float:right;}. right{margin-left:100px;}

1-3. Using Float+overflow to implement

. Left{width:100px;float:left;}. Right{overflow:hidden;}

trigger BFC mode, floating can not affect, isolate other elements, IE6 not supported, left-hand set Margin-left as the margin between right, and the Overflow:hidden to form BFC mode.

If we need to set the two columns to ascend, we can set the "background" to equal height in the following way, in fact, it is not the height of the content.

. Left{width:100px;float:left;}. Right{overflow:hidden;}. Parent{overflow:hidden;}. left,.right{padding-bottom:9999px;margin-bottom:-9999px;}

1-4. Using Table implementation:

. parent{display:table;table-layout:fixed;width:100%;}. left{width:100px;}. Right,.left{display:table-cell;}

1-5. Using Flex implementation:

. Parent{display:flex;}. left{width:100px;}. Right{flex:1;}

　　Using the flex:1 of the right container, the remaining width is evenly spaced, the same effect is achieved, and the Align-items default value is stretch, so the two are highly equal.

2. Right column fixed width, left column adaptive

2-1. Using Float+margin to implement

. parent{background:red;height:100px;margin:0 Auto;}. Left{background:green;margin-right:-100px;width:100%;float:left;}. Right{float:right;width:100px;background:blue;}

2-2. Using Table implementation:

. parent{display:table;table-layout:fixed;width:100%;}. Left{display:table-cell;}. Right{width:100px;display:table-cell;}

2-3. Using Flex implementation:

. Parent{display:flex;}. Left{flex:1;}. right{width:100px;}

3. Two column width, a column of adaptive (the basic HTML structure for the parent container is the parents, from the container is Left,center,rigth), where left,center fixed width, right adaptive.

3-1. Using Float+margin to achieve

. left,.center{float:left;width:200px;}. right{margin-left:400px;}

3-2. Using Float+overflow to achieve

. left,.center{float:left;width:200px;}. Right{overflow:hidden;}

3-3. Using table to implement

. parent{display:table;table-layout:fixed;width:100%;}. Left,.center,.right{display:table-cell;}. left,.center{width:200px}

3-4. Use Flex to achieve:

. Parent{display:flex;}. Left,.center{width:100px}.right{flex:1;}

4. Fixed width on both sides, self-adapting in the column

4-1. Using the Float+margin implementation:

. Left{width:100px;float:left;}. center{float:left;width:100%;margin-right:-200px;}. Rigth{width:100px;float:right;}

4-2. Using Table implementation:

. parent{width:100%;d Isplay:table;table-layout:fixed}.left,.center,.right{display:table-cell;}. left{width:100px;}. right{width:100px;}

4-3. Using Flex implementation:

. Parent{display:flex;}. left,.center{width:100px;}. Right{flex:1}

5. A column of variable width, a row of adaptive

5-1. Using the Float+overflow implementation:

. Left{float:left;}. Right{overflow:hidden;}

5-2. Using Table implementation:

. parent{display:table;table-layout:fixed;width:100%;}. left{width:0.1%;}. Left,.right{display:table-cell;}

5-3. Using Flex to implement

. Parent{display:flex;}. Right{flex:1;}

6. Multi-Column layout: (Multi-column layout often appears in the content, most of the function, the same-class content side-by display, etc.)

<div class= "Parent" >   <div class= "column" >1</div>   <div class= "column" >1</div >   <div class= "column" >1</div>   <div class= "column" >1</div></div>

6-1. Use float to achieve:

The. parent{margin-left:-20px}/* assumes that the spacing between columns is 20px*/.column{float:left;width:25%;p adding-left:20px;box-sizing: Border-box;}

6-2. Using Table Implementation

. parent-fix{margin-left:-20px;}. parent{display:table;table-layout:fixed;width:100%;}. column{display:table-cell;padding-left:20px;}

6-3. Using Flex to implement

. Parent{display:flex;}. Column{flex:1;}. column+.column{margin-left:20px;}

7. Nine Grid layout

7-1. Using Table implementation:

<div class= "Parent" >       <div class= "Row" ><div class= "item" ></div><div class= "Item" > </div><div class= "Item" ></div></div>       <div class= "Row" ><div class= "Item" > </div><div class= "Item" ></div><div class= "item" ></div></div>       <div class= "Row" ><div class= "item" ></div><div class= "item" ></div><div class= "Item" > </div></div>   </div>

parent{display:table;table-layout:fixed;width:100%;}. Row{display:table-row;}. item{display:table-cell;width:33.3%;height:200px;}

7-2. Using Flex implementation:

<div class= "Parent" ><div class= "row" ><div class= "item" ></div><div class= "item" ></ Div><div class= "Item" ></div></div><div class= "row" ><div class= "item" ></div ><div class= "Item" ></div><div class= "item" ></div></div><div class= "Row" > <div class= "Item" ></div><div class= "item" ></div><div class= "item" ></div></ Div></div>

. Parent{display:flex;flex-direction:column;}. Row{height:100px;display:flex;}. item{width:100px;background:red;}

8. Full-screen layout

<div class= "Parent" ><div class= "top" >top</div><div class= "left" >left</div><div Class= "right" >right</div><div class= "Bottom" >bottom</div></div>html,body,parent{ Height:100%;overflow:hidden;}. top{position:absolute:top:0;left:0;right:0;height:0px;}. left{position:absolute;top:100px;left:0;bottom:50px;width:200px;}. right{position:absolute;overflow:auto;left:200px;right:0;top:100px;bottom:50px;}. bottom{position:absolute;left:0;right:0;bottom:0;height:50px;}

8-1. Use Flex to achieve:

<div class= "Parent" ><div class= "top" >top</div><div class= "Middle" ><div class= "left" > Left</div><div class= "right" >right</div></div><div class= "Bottom" >bottom</div ></div>

9. Responsive layout

the utility layout width of the meta tag is equal to the device width, and the layout viewport equals the metric viewport

<meta name="viewport" content="width=device-width,initial-scale=1">

Media Enquiry

HTML 4 and CSS 2 currently support the creation of proprietary stylesheets for different media types, such as the use of sans serif fonts when a page is displayed on the screen, and the use of serif fonts when printing, and screen and print as two defined media types, and media queries to make the style sheet more targeted. Extended the function of media type; Media queries consist of media types and one or more conditional expressions that detect media features, which can be used to detect media features with width, height, and color (etc.), using media queries, without changing the content of the page. Customize the display for some specific output devices.

Grammar

@media screen and (max-width:960px){....}
<link rel="stylesheet" media="screen and (max-width:960px)" href=‘xxx.css‘ />

HTML and CSS Layout tips