一、实现要求
- 铺满屏，字体居中
- 交互，点击一个盒子能够改变另外一个盒子的颜色
最开始的实现效果使这样的：
但是有些问题：
- 字体只有水平居中，没有垂直居中；
- 第三行的盒子最右边没有铺满，并且，我理解的铺满全屏是指完全铺满，既没有剩余空白，也不会让内容一屏显示不完，也就是说要让屏幕右侧的滚动条和下面的滚动条消失，内容显示完整并且铺满屏幕；
- 还没有实现交互。因此，布局上的最终实现效果希望如下图：
二、实现过程
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);
}