一、實現要求
- 鋪滿屏，字體居中
- 交互，點擊一個盒子能夠改變另外一個盒子的顏色
最開始的實現效果使這樣的：
但是有些問題：
- 字體只有水平居中，沒有垂直居中；
- 第三行的盒子最右邊沒有鋪滿，並且，我理解的鋪滿全屏是指完全鋪滿，既沒有剩余空白，也不會讓內容一屏顯示不完，也就是說要讓屏幕右側的滾動條和下面的滾動條消失，內容顯示完整並且鋪滿屏幕；
- 還沒有實現交互。因此，布局上的最終實現效果希望如下圖：
二、實現過程
1. 字體水平居中和垂直居中
1.1水平居中：
文字的水平居中是通過在div中加入text-align:center實現的，text-align常常用於盒子里的文字、圖片等內容居左、居中、局右。
關於text-align的用法可以參考：text-align的用法 - 老小孩 - CSDN博客，講的很清楚：給父級設置text-align這個屬性，只會對其子元素是行級以及行級塊元素起作用，且子元素會繼承text-align這個屬性對其文本起作用。
拿原文中的這個圖示例：
對父級使用
text-align:center; 會對img，input等行內塊元素以及行級元素span有居中的效果。對塊級元素div以及h2看似也有居中效果？這是為什么呢？
觀察可以發現我們並沒有給div和h2設置寬高，當沒有設置寬高的時候，其寬度繼承了父級的，高度是由文本撐開，當然也繼承了父級的text-align:center;但是設置了寬高的塊級元素p標簽，此時它本身不是水平居中，而其文本是居中的,當我們把p元素轉換為行級塊元素的時候，會發現，不僅p元素中的文本居中了，其自身也居中了。
作者：陽光下的女漢子
來源：CSDN 原文：https://blog.csdn.net/weixin_44307807/article/details/85872703
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
1.2垂直居中：
關於垂直居中，能實現的方法比較多，網上也有很多很棒的博文：
- CSS垂直居中的11種實現方式 - 邊城少年 - 博客園
- div 垂直居中的六種方法 - liufeifeinanfeng的博客 - CSDN博客
- 純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固定，中間自適應的布局。需要注意的點是：
- 三個盒子的position屬性都設置為absolute，都脫離了文檔流；
- 第一個盒子header不設置邊偏移，所以沒有偏移，緊貼瀏覽器窗口左上角，寬度100%占滿一行；
- 第三個盒子footer邊偏移只設置bottom，為0，緊貼瀏覽器左下角，寬度100%占滿一行；
- 第一個和第三個盒子的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值自適應。需要注意的是：
- 左邊的盒子left使用左浮動，右邊的盒子right使用右浮動中間的盒子不使用浮動；
- 左邊和右邊的兩個盒子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這個錯誤，找了一些文章：
- onclick事件沒有反應的五種可能情況。 - qq_33481269的博客 - CSDN博客
- div的onClick事件怎么失效了？ - 我的博客 - CSDN博客
- 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新特性`其他字符串{$變量名}`替換
}
三、實現代碼
最后附上這次練習的全部代碼，代碼如下：
<!--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);
}