頁面基礎佈局相關知識 --- 居中&經典佈局
前言
PS: 這些只是我的學習,僅供思路參考,可能會有缺陷,而且都在chrome中測試,不必定適用其餘瀏覽器,並且不考慮IE的,切記!!css
PS: 2018/03/23修改，重整了一下樣式，新增了一些方法原理介紹，html
建議先了解一下基礎知識,實際上算深刻基礎了，隨意門:
想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC
想要清晰的明白（二）CSS 盒模型Block box與Line box前端
基礎配置以下,只是一個基本的父子嵌套元素html5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childB {
width: 50px;
height: 50px;
}
#childA,
#childB {
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高寬A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高寬B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>
水平居中的各類方法優劣.
margin
由於B是塊狀，因此看不出效果，可是若是不設置寬度其實就默認佔滿全屏
這是最基礎最簡單的寫法css3
#child {margin: 0 auto;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
margin: 0 auto;
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高寬A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高寬B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>
缺點:chrome
1) 須要設置寬度(包括百分比等非固定寬度也能夠)segmentfault
絕對定位
原理：父元素設置相對定位，子元素設置絕對定位，偏移一側父元素寬度50%，子元素外邊距反向負值調整自身寬度50%。重點是從中能夠看出這個須要知道子元素的寬度；瀏覽器
#parent{position: relative;}
#child {position: absolute; left: 50%; margin-left: -50px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
position: relative;
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
position: absolute;
left: 50%;
margin-left: -50px;
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高寬A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高寬B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>
缺點:wordpress
1) 須要設置子元素寬度(包括百分比等非固定寬度也能夠)oop
原理：跟上面原理同樣，可是使用了css3的transform屬性能夠自動計算子元素寬度調整
#parent{position: relative;}
#child {position: absolute; left: 50%; transform: translate(-50%);}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
position: relative;
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
position: absolute;
left: 50%;
transform: translate(-50%);
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高寬A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高寬B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>
優勢:
1) 不須要知道子元素具體寬度;
缺點:
1) transform,兼容性通常,IE9+;
原理：設置方向值,同時給元素一個對應的高寬,它會自動補全margin，就能保持居中了。具體原理參見上面文章。
#parent{position: relative;}
#child {position: absolute; right: 0; left:0; margin: auto;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
position: relative;
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
position: absolute;
right: 0;
left: 0;
margin: auto;
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高寬A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高寬B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>
缺點:
1) 須要設置子元素寬度(包括百分比等非固定寬度也能夠)
flex
原理：Flex是Flexible Box的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。
隨意門:
Flex 佈局教程：語法篇
Flex 佈局教程：實例篇
#parent {
display: flex;//fles佈局
justify-content: center;//主軸上的對齊方式（即水平定位）
align-items: flex-start;//交叉軸的起點對齊（即垂直定位）,默認stretch，若是項目未設置高度或設爲auto會致使子元素高度佔滿父元素
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
background-color: green;
}
#parentA,
#parentB {
display: flex;
justify-content: center;
align-items: flex-start;
}
</style>
</head>
<body>
<p>子元素固定高寬A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高寬B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>
真是前端救星,有了這個能夠無視之前各類詭異屬性實現的居中
優勢:
1) 佈局靈活全面
缺點:
1) align-items默認stretch，若是項目未設置高度或設爲auto會致使子元素高度佔滿父元素
2) 兼容性通常
inline-block+text-align
原理：子元素設置成行內塊狀元素，父元素設置文本居中對齊也能使其生效
#parent{text-align: center;}
#child {display: inline-block;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
width: 200px;
height: 200px;
text-align: center;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
display: inline-block;
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高寬A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高寬B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>
優勢:
1) 不須要設置子元素具體寬度;
2) 兼容性好，甚至能夠兼容ie六、ie7;
缺點:
1) 由於text-align是繼承樣式，會致使下級全部元素文字生效
垂直居中的各類方法優劣.
table-cell+vertical-align
原理：table-cell屬性指讓標籤元素以表格單元格的形式呈現，相似於td標籤。而後讓子元素居中
CSS2.1表格模型中的元素，可能不會所有包含在除HTML以外的文檔語言中。這時，那些「丟失」的元素會被模擬出來，從而使得表格模型可以正常工做。全部的表格元素將會自動在自身周圍生成所需的匿名table對象，使其符合table/inline-table、table-row、table- cell的三層嵌套關係。
特徵:
1) 同行等高;
2) 寬度自動調節;
#parent{display:table-cell;vertical-align:middle;}
缺點:
1) display類型有限制,只有一個元素屬於inline或是inline-block（table-cell也能夠理解爲inline-block水平）水平，其身上的vertical-align屬性纔會起做用。;
2) 父元素不能使用浮動屬性;
3) IE8下須要特殊處理;
4) 這是一個很複雜的屬性組合,下面文章能看的你懷疑人生;
隨意門:
CSS深刻研究:display的恐怖故事解密(1) - inline-block
CSS深刻研究:display的恐怖故事解密(2) - table-cell
大小不固定的圖片、多行文字的水平垂直居中
我所知道的幾種display:table-cell的應用
我對CSS vertical-align的一些理解與認識（一）
CSS vertical-align的深刻理解(二)之text-top篇
CSS深刻理解vertical-align和line-height的基友關係
絕對定位
原優缺點都同上，就再也不重複了：
#parent{position: relative;}
#child {position: absolute; top: 50%; margin-top: -100px;}
#parent{position: relative;}
#child {position: absolute; top: 50%; transform: translate(0,-50%);}
#parent{position: relative;}
#child {position: absolute; top: 0; bottom: 0; margin: auto;}
flex
原理：Flex是Flexible Box的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。上面也提到過它的交叉軸的起點對齊（即垂直定位）align-items；
#parent{display: flex; align-items: center;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
display: flex;
align-items: center;
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高寬A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高寬B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>
優勢:
1) 佈局靈活全面
2) 即便不設置寬度也不會默認佔滿全行
缺點:
1) 兼容性通常
水平垂直居中的各類方法.
table-cell+inline-block+vertical-align+text-align
#parent {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#child {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
display: table-cell;
width: 200px;
height: 200px;
vertical-align: middle;
text-align: center;
background-color: red;
}
#childA {
display: inline-block;
width: 100px;
height: 100px;
}
#childA,
#childB {
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高寬A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高寬B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>
優缺點都已經總結過了，並且基本顛覆了父子元素表現形式還影響後代元素的樣式，惟一的優勢只有兼容性好了
absolute+transform
#parent {
position: relative;
}
#child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
position: relative;
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高寬A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高寬B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>
雖然代碼量有點多，兼容性有點瑕疵，但仍是至關不錯的
flex
#parent {
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高寬A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高寬B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>
完美佈局，惟一能限制它的只有瀏覽器了
實戰：
定寬+自適應
1) float浮動屬性
原理：經過float浮動屬性讓元素脫離文檔流，後續元素不能定寬，也不能同使用浮動屬性，但能夠根據需求決定是或否使用overflow防止內容溢出
.left {
float: left;
}
.right {
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.header,
.footer {height: 60px;}
.header{background-color: red;}
.footer {background-color: yellow;}
.content {height: 500px; color: #fff; }
.left,
.right{height: 100%;}
.left{width: 100px; float: left; background-color: pink;}
.right{overflow:hidden; background-color: black;}
</style>
</head>
<body>
<div class="contanier">
<header class="header"></header>
<div class="content">
<div class="left"></div>
<div class="right">Done 當時光已逝 If the day is done , 假如時光已逝， If birds sing no more . 鳥兒再也不歌唱， If the wind has fiagged tired , 風兒也吹倦了， Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我蓋上， Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
, 如同黃昏時節你用睡眠的衾被裹住大地， The petals of the drooping lotus at dusk. 又輕輕合上睡蓮的花瓣。 From the traverer, 路途未完，行囊已空, Whose sack of provisions is empty before the voyage is ended , 衣裳破裂污損，人已精疲力竭。 Whose garment is torn and dust-laden , 你驅散了旅客的羞愧和困窘， Whose strength
is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下， And renew his life like a flower under 如花朵般煥發生機。 The cover of thy kindly night . 在你慈愛的夜幕下甦醒。</div>
</div>
<footer class="footer"></footer>
</div>
</body>
</html>
2) table屬性
原理：經過模擬table表現形式達到效果，根據特性還能省略設置元素高寬就能自行佔滿
.content {display:table; table-layout:fixed; }
.left,
.right{display:table-cell;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.header,
.footer {height: 60px;}
.header{background-color: red;}
.footer {background-color: yellow;}
.content {display:table; table-layout:fixed; height: 500px; color: #fff; }
.left,
.right{display:table-cell; height: 100%;}
.left{width: 100px; background-color: pink;}
.right{background-color: black;}
</style>
</head>
<body>
<div class="contanier">
<header class="header"></header>
<div class="content">
<div class="left"></div>
<div class="right">Done 當時光已逝 If the day is done , 假如時光已逝， If birds sing no more . 鳥兒再也不歌唱， If the wind has fiagged tired , 風兒也吹倦了， Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我蓋上， Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
, 如同黃昏時節你用睡眠的衾被裹住大地， The petals of the drooping lotus at dusk. 又輕輕合上睡蓮的花瓣。 From the traverer, 路途未完，行囊已空, Whose sack of provisions is empty before the voyage is ended , 衣裳破裂污損，人已精疲力竭。 Whose garment is torn and dust-laden , 你驅散了旅客的羞愧和困窘， Whose strength
is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下， And renew his life like a flower under 如花朵般煥發生機。 The cover of thy kindly night . 在你慈愛的夜幕下甦醒。</div>
</div>
<footer class="footer"></footer>
</div>
</body>
</html>
3) flex佈局
原理：Flex 佈局，能夠簡便、完整、響應式地實現各類頁面佈局。
.content {display:flex;}
.right{flex:1;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.header,
.footer {height: 60px;}
.header{background-color: red;}
.footer {background-color: yellow;}
.content {display:flex; width:100%; height: 500px; color: #fff; }
.left,
.right{height: 100%;}
.left{width: 100px; background-color: pink;}
.right{flex:1; background-color: black;}
</style>
</head>
<body>
<div class="contanier">
<header class="header"></header>
<div class="content">
<div class="left"></div>
<div class="right">Done 當時光已逝 If the day is done , 假如時光已逝， If birds sing no more . 鳥兒再也不歌唱， If the wind has fiagged tired , 風兒也吹倦了， Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我蓋上， Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
, 如同黃昏時節你用睡眠的衾被裹住大地， The petals of the drooping lotus at dusk. 又輕輕合上睡蓮的花瓣。 From the traverer, 路途未完，行囊已空, Whose sack of provisions is empty before the voyage is ended , 衣裳破裂污損，人已精疲力竭。 Whose garment is torn and dust-laden , 你驅散了旅客的羞愧和困窘， Whose strength
is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下， And renew his life like a flower under 如花朵般煥發生機。 The cover of thy kindly night . 在你慈愛的夜幕下甦醒。</div>
</div>
<footer class="footer"></footer>
</div>
</body>
</html>
聖盃佈局&雙飛翼佈局（兩列定寬+一列自適應）
基礎結構
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.header,
.footer {height: 60px;}
.header{background-color: red;}
.footer {background-color: yellow;}
.content {height: 500px; color: #fff; background-color: green;}
.left,
.right,
.main{height: 100%; float: left;}
.left{width: 100px; margin-left: -100%; background-color: pink;}
.main{width: 100%; background-color: blue;}
.right{width: 100px; margin-left: -100px; background-color: black;}
</style>
</head>
<body>
<div class="contanier">
<header class="header"></header>
<div class="content">
<div class="main">
When Day Is Done
當時光已逝
If the day is done ,
假如時光已逝，
If birds sing no more .
鳥兒再也不歌唱，
If the wind has fiagged tired ,
風兒也吹倦了，
Then draw the veil of darkness thick upon me ,
那就用黑暗的厚幕把我蓋上，
Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
如同黃昏時節你用睡眠的衾被裹住大地，
The petals of the drooping lotus at dusk.
又輕輕合上睡蓮的花瓣。
From the traverer,
路途未完，行囊已空,
Whose sack of provisions is empty before the voyage is ended ,
衣裳破裂污損，人已精疲力竭。
Whose garment is torn and dust-laden ,
你驅散了旅客的羞愧和困窘，
Whose strength is exhausted,remove shame and poverty ,
使他在你仁慈的夜幕下，
And renew his life like a flower under
如花朵般煥發生機。
The cover of thy kindly night .
在你慈愛的夜幕下甦醒。
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer class="footer"></footer>
</div>
</body>
</html>
前期主要步驟:
1) content子元素浮動;
2) main寬度滿屏放在首位,中間欄要在瀏覽器中優先展現渲染(這裏我沒太懂有多大區別???);
3) left和right分別用負邊距強行並排;
到目前爲止看起來效果已經知足了，實際left和right這種玩法是覆蓋在main之上的，致使部份內容被遮蓋了；
而後聖盃佈局&雙飛翼佈局的差異就在後續步驟了
聖盃佈局：
4) content加上內邊距padding；
5) left和right使用相對定位偏移；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.header,
.footer {height: 60px;}
.header{background-color: red;}
.footer {background-color: yellow;}
.content {height: 500px; padding: 0 100px; color: #fff; background-color: green;}
.left,
.right{position: relative; width: 100px;}
.left,
.right,
.main{height: 100%; float: left;}
.left{ left: -100px; margin-left: -100%; background-color: pink;}
.main{width: 100%; background-color: blue;}
.right{right: -100px; margin-left: -100px; background-color: black;}
</style>
</head>
<body>
<div class="contanier">
<header class="header"></header>
<div class="content">
<div class="main">
When Day Is Done
當時光已逝
If the day is done ,
假如時光已逝，
If birds sing no more .
鳥兒再也不歌唱，
If the wind has fiagged tired ,
風兒也吹倦了，
Then draw the veil of darkness thick upon me ,
那就用黑暗的厚幕把我蓋上，
Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
如同黃昏時節你用睡眠的衾被裹住大地，
The petals of the drooping lotus at dusk.
又輕輕合上睡蓮的花瓣。
From the traverer,
路途未完，行囊已空,
Whose sack of provisions is empty before the voyage is ended ,
衣裳破裂污損，人已精疲力竭。
Whose garment is torn and dust-laden ,
你驅散了旅客的羞愧和困窘，
Whose strength is exhausted,remove shame and poverty ,
使他在你仁慈的夜幕下，
And renew his life like a flower under
如花朵般煥發生機。
The cover of thy kindly night .
在你慈愛的夜幕下甦醒。
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer class="footer"></footer>
</div>
</body>
</html>
雙飛翼佈局：
4) main加上嵌套元素inner，並設置內邊距；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.header,
.footer {height: 60px;}
.header{background-color: red;}
.footer {background-color: yellow;}
.content {height: 500px; color: #fff; background-color: green;}
.left,
.right{position: relative; width: 100px;}
.left,
.right,
.main{height: 100%; float: left;}
.left{margin-left: -100%; background-color: pink;}
.main{width: 100%; background-color: blue;}
.right{margin-left: -100px; background-color: black;}
.inner{padding: 100px;}
</style>
</head>
<body>
<div class="contanier">
<header class="header"></header>
<div class="content">
<div class="main">
<div class="inner">
When Day Is Done
當時光已逝
If the day is done ,
假如時光已逝，
If birds sing no more .
鳥兒再也不歌唱，
If the wind has fiagged tired ,
風兒也吹倦了，
Then draw the veil of darkness thick upon me ,
那就用黑暗的厚幕把我蓋上，
Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
如同黃昏時節你用睡眠的衾被裹住大地，
The petals of the drooping lotus at dusk.
又輕輕合上睡蓮的花瓣。
From the traverer,
路途未完，行囊已空,
Whose sack of provisions is empty before the voyage is ended ,
衣裳破裂污損，人已精疲力竭。
Whose garment is torn and dust-laden ,
你驅散了旅客的羞愧和困窘，
Whose strength is exhausted,remove shame and poverty ,
使他在你仁慈的夜幕下，
And renew his life like a flower under
如花朵般煥發生機。
The cover of thy kindly night .
在你慈愛的夜幕下甦醒。
</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer class="footer"></footer>
</div>
</body>
</html>
從中能夠看出之間的分歧在於：
聖盃佈局：父元素設置內邊距，子元素設置相對偏移，影響區域從上至下
雙飛翼佈局：目標元素嵌套多層元素，該元素內部設置內邊距，影響區域僅限該元素
flex寫法：
1) contanier設置flex佈局，至少高度滿屏，方向豎直，能夠佔據全屏效果;
2) content 設置flex佈局，方向水平，放大比例1，能夠佔滿寬度；
3) main放大比例1，能夠佔據剩餘空間；
4) left排列順序放前；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.contanier{display: flex; min-height: 100vh; flex-direction: column;}
.header,
.footer {height: 60px;}
.header{background-color: red;}
.footer {background-color: yellow;}
.content {display: flex; flex: 1; color: #fff; background-color: green;}
.left,
.right{width: 100px;}
.main{flex: 1;}
.left{order: -1; background-color: pink;}
.main{background-color: blue;}
.right{background-color: black;}
</style>
</head>
<body>
<div class="contanier">
<header class="header"></header>
<div class="content">
<div class="main">
When Day Is Done
當時光已逝
If the day is done ,
假如時光已逝，
If birds sing no more .
鳥兒再也不歌唱，
If the wind has fiagged tired ,
風兒也吹倦了，
Then draw the veil of darkness thick upon me ,
那就用黑暗的厚幕把我蓋上，
Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
如同黃昏時節你用睡眠的衾被裹住大地，
The petals of the drooping lotus at dusk.
又輕輕合上睡蓮的花瓣。
From the traverer,
路途未完，行囊已空,
Whose sack of provisions is empty before the voyage is ended ,
衣裳破裂污損，人已精疲力竭。
Whose garment is torn and dust-laden ,
你驅散了旅客的羞愧和困窘，
Whose strength is exhausted,remove shame and poverty ,
使他在你仁慈的夜幕下，
And renew his life like a flower under
如花朵般煥發生機。
The cover of thy kindly night .
在你慈愛的夜幕下甦醒。
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer class="footer"></footer>
</div>
</body>
</html>
拋棄顏色形狀等干擾代碼,實際佈局用到的css
.contanier{display: flex; min-height: 100vh; flex-direction: column;}
.content {display: flex; flex: 1; color: #fff; background-color: green;}
.main{flex: 1;}
.left{order: -1;}
全程不須要計算數值，不須要偏移位置，用flex佈局能夠控制方向，比例，順序，自動計算樣式
上面的知識點可讓你應該絕大多數的頁面佈局了，移動端又會涉及更多知識點，隨意門：
viewports剖析
相關文章
- 1. 網頁佈局基礎（1）－自動居中一列布局
- 2. css佈局基礎知識
- 3. RN基礎知識-佈局
- 4. Flex佈局基礎知識
- 5. grid佈局基礎知識
- 6. div頁面佈局基本佈局知識
- 7. 頁面佈局基礎篇
- 8. css經典佈局系列一——垂直居中佈局
- 9. 第7章頁面佈局-Center居中佈局
- 10. 佈局居中
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • NewSQL-TiDB相關
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 網頁佈局基礎（1）－自動居中一列布局
- 2. css佈局基礎知識
- 3. RN基礎知識-佈局
- 4. Flex佈局基礎知識
- 5. grid佈局基礎知識
- 6. div頁面佈局基本佈局知識
- 7. 頁面佈局基礎篇
- 8. css經典佈局系列一——垂直居中佈局
- 9. 第7章頁面佈局-Center居中佈局
- 10. 佈局居中