Single row layout is in the middle

The most common form of page layout in the middle of the horizontal level is the title and the organization of the content area. Here are four ways to achieve the middle of the horizontal level (note: the alignment of child elements is implemented in the following examples, and the parent container of child elements is the parent element).

Implementation with inline-block and text-align

.parent{text-align: center;}
.child{display: inline-block;}

Advantages: Good compatibility;
Insufficiency: You need to set both child and parent elements

Implementation with margin:0 auto

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

Advantages: Good compatibility
Disadvantage: Width needs to be specified

Implementing with table

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

Advantages: Just set yourself up
Deficiencies: IE6,7 needs to be restructured

Using absolute positioning

.parent{position:relative;}
/*Or a practical margin-left negative value of half the width of the box can be achieved, but then you have to know the width of the box, but compatibility is good.*/
.child{position:absolute;left:50%;transform:translate(-50%);}

Insufficient: poor compatibility, IE9 and above available

Implementation of practical flex layout

/*The first method*/
.parent{display:flex;justify-content:center;}
/*The second method*/
.parent{display:flex;}
.child{margin:0 auto;}

Disadvantage: poor compatibility, if large-scale layout may affect efficiency

It is recommended to use inline-block and text-align implementations, and margin:0 auto implementations.

Single row layout vertically centered

vertical-align

When using vertical-align, because the aligned baseline is marked by the line-height baseline, it is necessary to set line-height or display:table-cell.

/*The first method*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*The second method*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}

Practical absolute positioning

.parent{position:relative;}
.child{positon:absolute;top:50%;transform:translate(0,-50%);}

Practical flex implementation

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

Horizontal and Vertical Centralization

Realization with vertical-align,text-align,inline-block

.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}

Realization of Absolute Location

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

Using flex to realize

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

Multi-column Layout Left Column Width Fixed, Right Column Adaptive

This layout is very common, and it is suitable for the layout of navigation on the fixed width side and content on the adaptive side.

Realization by float+margin

.left{float:left;width:100px;}
.right{margin-left;margin-left:100px;}

Note: IE6 will have 3px bug s

Implementation by float+margin(fix)

 

<div class="parent">
    <div class="left"></div>
    <div class="right-fix">
        <div class="right"></div>
    </div>
</div>

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

Using float+overflow to implement

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

overflow:hidden, trigger bfc mode, floating can not affect, isolate other elements, IE6 does not support, left left left set margin-left as the margin between left and right, right use overflow:hidden to form bfc mode
If we need to set the two columns to equal height, we can use the following method to set the "background" to equal height, which is not equal to the content.

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

Implementing with table

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

Practical flex implementation

.parent{display:flex;}
.left{width:100px;}
.right{flex:1;}

Using flex:1 of the right container, the remaining width is divided equally, and the same effect is achieved. The default value of align-items is stretch, so they are highly equivalent.

Right column fixed width, left column adaptive

Practical float+margin implementation

.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;}

Implementing with table

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

Practical flex implementation

.parent{display:flex;}
.left{flex:1;}
.right{width:100px;}

Two columns of fixed width, one column of adaptive

 

The basic html structure is parent, left,center,right. where left,center and right are adaptive.

Realization by float+margin

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

Realization by float+overflow

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

Realization with table

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

Using flex to realize

.parent{display:flex;}
.left,.center{width:100px;}
.right{flex:1}

Fixed width on both sides and adaptive mid-column

 

Realization by float+margin

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

Realization with table

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

Using flex to realize

.parent{display:flex;}
.left{width:100px;}
.center{flex:1;}
.right{width:100px;}

A column of variable width, a column of adaptive

 

Realization by float+overflow

.left{float:left;}
.right{overflow:hidden;}

Realization with table

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

Using flex to realize

.parent{display:flex;}
.right{flex:1;}

Multi-column and equal layout

Multi-column and equal distribution often appear in content, most of which are functional and display side by side with the content of the same class.

 

The html structure is as follows

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

Practical float implementation

.parent{margin-left:-20px}/*Assume that the spacing between columns is 20px*/
.column{float:left;width:25%;padding-left:20px;box-sizing:border-box;}

Realization with table

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

Using flex to realize

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

Nine Palace Layout

Implementing with table

<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;}

Practical 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;}

Full screen layout

 

Realization of Absolute Location

<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:100px;}
.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;}

Using flex to realize

<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>

.parent{display:flex;flex-direction:column;}
.top{height:100px;}
.bottom{height:50px;}
.middle{flex:1;display:flex;}
.left{width:200px;}
.right{flex:1;overflow:auto;}

Responsive layout

The Practice of meta Label

Setting layout width equals device width and layout viewport equals measuring viewport

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

Media query

grammar

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

Author: GD_SeHun
Link: http://www.imooc.com/article/2235
Source: Mucho.com