div三行或三列铺满全屏

文章目录

一、实现要求
二、实现过程
- 1. 字体水平居中和垂直居中
- - 1.1水平居中：
  - 1.2垂直居中：
- 2. 行列铺满全屏
- - 2.1 竖排铺满全屏：
  - 2.2 横排铺满全屏：
- 3. 实现交互
三、实现代码
Reference

一、实现要求

铺满屏，字体居中
交互，点击一个盒子能够改变另外一个盒子的颜色
最开始的实现效果使这样的：

但是有些问题：

字体只有水平居中，没有垂直居中；
第三行的盒子最右边没有铺满，并且，我理解的铺满全屏是指完全铺满，既没有剩余空白，也不会让内容一屏显示不完，也就是说要让屏幕右侧的滚动条和下面的滚动条消失，内容显示完整并且铺满屏幕；
还没有实现交互。因此，布局上的最终实现效果希望如下图：

二、实现过程

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);
}

Reference

text-align的用法 - 老小孩 - CSDN博客
CSS垂直居中的11种实现方式 - 边城少年 - 博客园
三个div 两边固定大小中间自动大小 - 小Pdiadia的博客 - CSDN博客
js几种生成随机颜色方法 - li_han - 博客园