div三行或三列鋪滿全屏

1、實現要求

1. 鋪滿屏，字體居中
2. 交互，點擊一個盒子可以改變另一個盒子的顏色

最開始的實現效果使這樣的：

可是有些問題：

1. 字體只有水平居中，沒有垂直居中；
2. 第三行的盒子最右邊沒有鋪滿，而且，我理解的鋪滿全屏是指徹底鋪滿，既沒有剩餘空白，也不會讓內容一屏顯示不完，也就是說要讓屏幕右側的滾動條和下面的滾動條消失，內容顯示完整而且鋪滿屏幕；
3. 尚未實現交互。所以，佈局上的最終實現效果但願以下圖：
   

2、實現過程

1. 字體水平居中和垂直居中

1.1水平居中：

文字的水平居中是經過在div中加入text-align:center實現的，text-align經常用於盒子裏的文字、圖片等內容居左、居中、局右。
關於text-align的用法能夠參考：text-align的用法 - 老少孩 - CSDN博客，講的很清楚：給父級設置text-align這個屬性，只會對其子元素是行級以及行級塊元素起做用，且子元素會繼承text-align這個屬性對其文本起做用。
拿原文中的這個圖示例：

1. 對父級使用text-align:center; 會對img，input等行內塊元素以及行級元素span有居中的效果。

2. 對塊級元素div以及h2看似也有居中效果？這是爲何呢？
   觀察能夠發現咱們並無給div和h2設置寬高，當沒有設置寬高的時候，其寬度繼承了父級的，高度是由文本撐開，固然也繼承了父級的text-align:center;

3. 可是設置了寬高的塊級元素p標籤，此時它自己不是水平居中，而其文本是居中的,當咱們把p元素轉換爲行級塊元素的時候，會發現，不只p元素中的文本居中了，其自身也居中了。
   
   做者：陽光下的女漢子
   來源：CSDN 原文：https://blog.csdn.net/weixin_44307807/article/details/85872703
   版權聲明：本文爲博主原創文章，轉載請附上博文連接！

1.2垂直居中：

關於垂直居中，能實現的方法比較多，網上也有不少很棒的博文：

1. CSS垂直居中的11種實現方式 - 邊城少年 - 博客園
2. div 垂直居中的六種方法 - liufeifeinanfeng的博客 - CSDN博客
3. 純CSS實現垂直居中的幾種方法 - 彼岸花在開 - 博客園

我這裏只須要對單行文本進行垂直居中，因此就用了line-height屬性就能夠實現了；
可是，這方法有個問題，若是父元素的height值不知道或者用的百分比表示或者是auto怎麼辦？
當初想到的是line-height也用百分比表示唄，定義成100%，然而：line-height屬性不能經過百分比設置實現垂直居中，這是由於這裏的百分比並非相對於父元素尺寸而言，而是相對於字體尺寸來說的。
因此，用這個方法，其實個人最終實現裏面那個黃色部分字體並無真正的垂直居中，只是比較靠近中央位置。還須要再修改。

2. 行列鋪滿全屏

首先，使用* {margin:0;padding:0;}把全部盒子的內外邊距都設置爲0，有須要邊距的再添加，必定要養成這個習慣。將全部的盒子總體上分紅三部分，header，middle1和footer，而後又將footer分紅三部分：left，middle和right，這就至關於要實現header，middle1和footer三個div豎排鋪滿全屏和left，middle和right三個div橫排鋪滿全屏。

2.1 豎排鋪滿全屏：

豎排鋪滿全屏，至關於上下div高度height固定，中間自適應的佈局。須要注意的點是：

1. 三個盒子的position屬性都設置爲absolute，都脫離了文檔流；
2. 第一個盒子header不設置邊偏移，因此沒有偏移，緊貼瀏覽器窗口左上角，寬度100%佔滿一行；
3. 第三個盒子footer邊偏移只設置bottom，爲0，緊貼瀏覽器左下角，寬度100%佔滿一行；
4. 第一個和第三個盒子的height爲固定值，中間的爲auto

div.header{
    width: 100%;
    height:250px;
    line-height: 250px;/*注意line-height值要與footer容器height值相同*/
    text-align: center;
    font-size:20px;

    position :absolute;
}
div.middle1{
    width:100%;
    height:auto;/*中間容器的height值設置爲auto*/
    text-align: center;
    line-height: 250px; 
    font-size:20px;

    position :absolute;
    top:250px;
    bottom:200px;
}
div.footer{
    width:100%;
    height :200px;
    line-height: 200px;/*注意line-height值要與footer容器height值相同*/
    text-align: center;
    font-size:20px;

    position: absolute;
    bottom:0; 
}

2.2 橫排鋪滿全屏：

橫排鋪滿全屏，至關於左右兩個div的寬度width值固定，中間div的width值自適應。須要注意的是：

1. 左邊的盒子left使用左浮動，右邊的盒子right使用右浮動中間的盒子不使用浮動；
2. 左邊和右邊的兩個盒子width爲固定值，使用33%，中間的盒子width爲auto；

#left{
    float:left;
    width: 33%;
    height: 100%;
}
#right{
    float:right;
    width: 33%;
    height: 100%;
}
#middle{
    height: 100%;
    width：auto;
}

橫排鋪滿全屏須要特別注意的是，在html的書寫過程當中，必定要將middle放在最後，如：

<div class="footer">
    <div id="left" ><p onclick="changeWhite()">藍色部分</p></div>
    <div id="right" ><p onclick="changeRed()">黑色部分</p></div>
    <div id="middle" ><p onclick="changeBlack()">白色部分</p></div>
</div>

這是由於，浮動後的盒子left以及right已經脫離了文檔流，left左浮動且設置了固定width，middle寬度auto，因此middle會把left沒有用完的那一行佔滿，而right會右浮動另起一行，大體是這個樣子：具體能夠參考：三個div 兩邊固定大小中間自動大小 - 小Pdiadia的博客 - CSDN博客

此外，中間嘗試過將left、middle、right三個div設置dispaly:inline-block，可是這樣的話雖然是橫排鋪滿了全屏，可是中間留有小縫隙，參考如何消除inline-block產生的元素間空隙 - 亞洲黑色卍 - 博客園這篇文章，雖然解決了縫隙問題，可是又回到了最開始的那樣，縫隙都留在了最右邊，仍不能知足要求。

3. 實現交互

實現交互，主要是使用
document.getElementById("idName").style.background="colorName";或者
document.getElementById("idName").style.background=function();
而後經過在標籤中設置onclick屬性調用修改其餘div背景顏色的函數。
可是，在實現的過程當中，onclick失效，遇到了Uncaught TypeError: Cannot read property 'style' of null這個錯誤，找了一些文章：

1. onclick事件沒有反應的五種可能狀況。 - qq_33481269的博客 - CSDN博客
2. div的onClick事件怎麼失效了？ - 個人博客 - CSDN博客
3. span 的onclick事件沒有響應 - MelodyFreedom的博客 - CSDN博客

找了好長時間才發現原來以前的div是隻定義了類名，沒有定義id名，因此使用getElementById確定不對;
而後我又將getElementById修改成getElementsByClassName(注意Element後面有s)由於這樣修改改動比較小，可是仍是出錯，Uncaught TypeError: Cannot set property 'background' of undefined，也就是說getElementsByClassName不能設置background屬性，只好乖乖地把div類名都改爲了id名
最後參考了一個能夠隨機產生顏色的文章：js幾種生成隨機顏色方法 - li_han - 博客園

function bg1(){
    return '#'+Math.floor(Math.random()*256).toString(10);
}
function bg2(){
    return '#'+Math.floor(Math.random()*0xffffff).toString(16);
}
function bg3(){
    var r=Math.floor(Math.random()*256);
    var g=Math.floor(Math.random()*256);
    var b=Math.floor(Math.random()*256);
    return "rgb("+r+','+g+','+b+")";//全部方法的拼接均可以用ES6新特性`其餘字符串{$變量名}`替換
}

3、實現代碼

最後附上此次練習的所有代碼，代碼以下：

<!--html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="layout.css">
   
</head>
<body>
    <div class="header">
        <div id="rpart" ><p onclick="changeYellow()">紅色部分</p></div>
    </div>
    <div class="middle1">
        <div id="gpart" ><p onclick="changeBlue()">黃色部分</p></div>
    </div>
    <div class="footer">
        <div id="left" ><p onclick="changeWhite()">藍色部分</p></div>
        <div id="right" ><p onclick="changeRed()">黑色部分</p></div>
        <div id="middle" ><p onclick="changeBlack()">白色部分</p></div>
    </div>
    <script type="text/javascript" src="layout.js"></script>
</body>
</html>

/*layout.css*/
* {margin:0; padding:0;}
#rpart{background-color: red;}
#gpart{background-color: yellow;}
#left{background-color: blue;}
#middle{background-color: white;}
#right{background-color: black;}

div.header{
    width: 100%;
    height:250px;
    line-height: 250px;
    text-align: center;
    font-size:20px;

    position :absolute;
}
div.middle1{
    width:100%;
    height:auto;
    text-align: center;
    line-height: 250px; 
    font-size:20px;

    position :absolute;
    top:250px;
    bottom:200px;
}
div.footer{
    width:100%;
    height :200px;
    line-height: 200px;
    text-align: center;
    font-size:20px;

    position: absolute;
    bottom:0; 
}

#rpart,#gpart{
    width: 100%;
    height: 100%;
}
#left{
    float:left;
    width: 33%;
    height: 100%;
}
#right{
    float:right;
    width: 33%;
    height: 100%;
}
#middle{
    height: 100%;
    width :auto;
}

//layout.js
function changeYellow(){
    document.getElementById("gpart").style.background=bg1();
}
function changeBlue(){
    document.getElementById("left").style.background=bg1();
}
function changeWhite(){
    document.getElementById("middle").style.background=bg1();
}
function changeBlack(){
    document.getElementById("right").style.background=bg1();
}
function changeRed(){
    document.getElementById("rpart").style.background=bg1();
}
function bg1(){
    return '#'+Math.floor(Math.random()*0xffffff).toString(16);
}

---

Reference

1. text-align的用法 - 老少孩 - CSDN博客
2. CSS垂直居中的11種實現方式 - 邊城少年 - 博客園
3. 三個div 兩邊固定大小中間自動大小 - 小Pdiadia的博客 - CSDN博客
4. js幾種生成隨機顏色方法 - li_han - 博客園