百度前端技術學院--CSS佈局例項
CSS背景圖片佈局
<!doctype html>
<html>
<body>
...Your content goes here...
</body>
</html>
給body標籤指定背景圖，這樣背景圖就可以填充整個瀏覽器viewport了。
其實，該方案對所有的塊級容器都可以生效。塊級容器的寬高是動態的，那麼背景圖將自動伸縮，充滿整個容器。
CSS body標籤的樣式如下：
body {
/* 載入背景圖 */
background-image: url(images/background-photo.jpg);
/* 背景圖垂直、水平均居中 */
background-position: center center;
/* 背景圖不平鋪 */
background-repeat: no-repeat;
/* 當內容高度大於圖片高度時，背景影象的位置相對於viewport固定 */
background-attachment: fixed;
/* 讓背景圖基於容器大小伸縮 */
background-size: cover;
/* 設定背景顏色，背景圖載入過程中會顯示背景色 */
background-color: #464646;
}
上面最重要的一條就是：
background-size: cover;
這樣瀏覽器就會按比例縮放背景圖直至背景圖寬高不小於容器的寬高（在上面的例子中，就是body標籤）。
這裡需要注意的一點就是：如果背景圖小於body標籤的尺寸（例如在高解析度顯示器上，或頁面內容特別多時），瀏覽器會拉伸圖片。都知道，當把一個圖片拉伸時，圖片會變模糊。
因此，在選擇背景圖時，要特別注意尺寸。為了照顧到大尺寸螢幕，demo裡用的圖片尺寸為5498px * 3615px 。
同時，為了讓背景圖始終相對於viewport居中，聲明瞭：
background-position: center center;
上面的規則會把背景圖縮放的原點定位到viewport的中心。
接下來需要解決的問題是：當內容的高度大於viewport的高度時，會出現滾動條。希望背景圖始終相對於viewport固定，即使使用者滾動時也是一樣。
解決辦法就是：
background-attachment: fixed;
HTML 中塊級元素設定 height:100% 的實現
當你設定一個頁面元素的高度(height)為100%時，期望這樣元素能撐滿整個瀏覽器視窗的高度，但大多數情況下，這樣的做法沒有任何效果。
為什麼height:100%不起作用呢？
按常理，當我們用CSS的height屬性定義一個元素的高度時，這個元素應該按照設定在瀏覽器的縱向空間裡擴充套件相應的空間距離。例如，如果一個div元素的CSS是height: 100px;，那它應該在頁面的豎向空間裡佔滿100px的高度。
而跟W3C的規範，百分比的高度在設定時需要根據這個元素的父元素容器的高度。所以，如果你把一個div的高度設定為height: 50%;，而它的父元素的高度是100px，那麼，這個div的高度應該是50px。當設計一個頁面時，你在裡面放置了一個div元素，你希望它佔滿整個視窗高度，最自然的做法，你會給這個div新增height: 100%;的css屬性。然而，如果你要是設定寬度為width: 100%;，那這個元素的寬度會立刻擴充套件到視窗的整個橫向寬度。高度也會這樣嗎？
錯。
為了理解為什麼不會，你需要理解瀏覽器是如何計算高度和寬度的。Web瀏覽器在計算有效寬度時會考慮瀏覽器視窗的開啟寬度。如果你不給寬度設定任何預設值，那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。
但是高度的計算方式完全不一樣。事實上，瀏覽器根本就不計算內容的高度，除非內容超出了視窗範圍(導致滾動條出現)。或者你給整個頁面設定一個絕對高度。否則，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就無需考慮。因為頁面並沒有預設的高度值，所以，當你讓一個元素的高度設定為百分比高度時，無法根據獲取父元素的高度，也就無法計算自己的高度。換句話說，父元素的高度只是一個預設值：height: auto;。當你要求瀏覽器根據這樣一個預設值來計算百分比高度時，只能得到undefined的結果。也就是一個null值，瀏覽器不會對這個值有任何的反應。
父元素沒有設定固定高度，於是子元素的高度height: 100% 也不會起作用。
那麼，如果想讓一個元素的百分比高度height: 100%;起作用，你需要給這個元素的所有父元素的高度設定一個有效值。換句話說，你需要這樣做：
<html>
<body>
<div style="height: 100%;">
<p>
想讓這個div高度為 100% 。
</p>
</div>
</body>
</html>
現在你給了這個div的高度為100%，它有兩個父元素<body>和<html>。為了讓你的div的百分比高度能起作用，你必須設定<body>和<html>的高度 ！！！
現在你給了這個div的高度為100%，它有兩個父元素<body>和<html>。為了讓你的div的百分比高度能起作用，你必須設定<body>和<html>的高度 ！！！
現在你給了這個div的高度為100%，它有兩個父元素<body>和<html>。為了讓你的div的百分比高度能起作用，你必須設定<body>和<html>的高度 ！！！
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 100%;">
<p>
這樣這個div的高度就會100%了
</p>
</div>
</body>
</html>
從這個 height: 100% 就起作用了。
在使用height: 100%;時需要注意的一些事項:
1、margin 和 padding 會讓你的頁面出現滾動條，也許這是你不希望的。
2、如果你的元素實際高度大於你設定的百分比高度，那元素的高度會自動擴充套件。
Float、Position、Flexbox實現的佈局
如下圖所示
<div style="width: 100%;height: 75px;"> <div style="float: left;width: 30%;height: inherit; <!--float：left；width：30%--> <!--<br> 父div固定了width: 100%;height: 75px;--> </div> <div style="float: left;width: 70%;height: inherit; <!--..float：left；width：70%--> </div> </div>
2、實現一個兩欄佈局，左側固定寬度，右側根據瀏覽器寬度進行自適應變化 （float+margin） 效果圖如下：
左側：width=30%,height=75px；float= left
右側：margin-right: 0px;margin-left: 30%;height: inherit
右側通過定義margin外邊框的與左邊距離，與右邊的距離，自適應變化
程式碼如下
<div style="width: 100%;height: 75px;"> <div style="width: 30%;height: inherit;float: left"> <!--左側 width:30%;float:left;--> </div> <div style="margin-right: 0px;margin-left: 30%;height: inherit"> <!--右側沒有用float語句，用了 margin-right: 0px;margin-left: 30%;(實現自適應)--> </div> </div>
3、實現一個兩欄佈局，右側固定寬度，左側根據瀏覽器寬度進行自適應變化 （position）
( 設定了position:absolute要結合right,left,top,bottom使用 )
效果圖如下：
最外層的div，即父div要position:relative，這樣子div會在父div的範圍內定位。子div要設定position:absolute
父div：width=100%；height=75px；position=relative
子div：
左側div：height: inherit;position: absolute;right: 30%;top: 0px ;left: 0px;
右側div：width: 30%;height: inherit;position: absolute;right: 0px;top: 0px;
程式碼如下
<div style="width: 100%;height: 75px;position: relative"> <div style="height: inherit;position: absolute;right: 30%; top: 0px;left:0px;border: rgba(235,86,168,0.6) 2px solid"> <!--左側自適應瀏覽器寬度position: absolute;right: 30%; top: 0px;left:0px;，<br>--> <!--父div必須為position:relative；這樣子div，即左側與右側的div會在父div內定為--> </div> <div style="width: 30%;height: inherit;position: absolute;right: 0px;top: 0px;border: black 1px double"> <!--右側固定為width: 30%;height: inherit;--> </div> </div>
4、實現一個三欄佈局，左側固定寬度，右側固定寬度，中間部分寬度隨瀏覽器寬度變化而自適應變
(float+position+margin)
效果圖
程式碼如下
<style>
#left,#right,#middle{
display: inline-block;/*行內塊元素*/
height: 75px;
position: absolute;
top: 0px;
}
#left{
width: 30%;
margin-left: 0px;
left: 0px;
background-color: #00ee00;
}
#middle{
background-color: rgba(17,235,137,0.6);
left: 30%;
right: 30%;
}
#right{
width: 30%;
right: 0%;
background-color: rgba(140,60,235,0.6);
margin-right: 0px;
}
</style>
5、實現一個三欄佈局，左側固定寬度，中間固定寬度，右側根據瀏覽器寬度變化而自適應變化 ( flexBox )
效果圖：
父元素要使用display:flex ; flex-direction：row | column | row-reverse | column-reverse
程式碼如下:
<style>
#fartherBox{
width: 100%;
height: 75px;
display: flex;
flex-direction: row;/*它預設值是 row，這使得它們在按你瀏覽器的預設語言方向排成一排*/
}
.left{
background-color: rgba(203,74,43,0.6);
width: 30%;
height: inherit;
-webkit-box-flex: 2.0;
-moz-box-flex: 2.0;
}
.middle{
background-color: rgba(132,135,235,0.6);
width: 30%;
height: inherit;
-webkit-box-flex: 1.0;
-moz-box-flex: 1.0;
}
.right{
background-color: rgba(20,10,3,0.6);
height: inherit;
flex: auto;/*動態尺寸*/
}
</style>