div三行或三列铺满全屏

一、实现要求

  1. 铺满屏,字体居中
  2. 交互,点击一个盒子能够改变另外一个盒子的颜色
    最开始的实现效果使这样的:
    在这里插入图片描述

但是有些问题:

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

二、实现过程

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,有需要边距的再添加,一定要养成这个习惯。将所有的盒子整体上分成三部分,headermiddle1footer,然后又将footer分成三部分:leftmiddleright,这就相当于要实现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新特性`其他字符串{$变量名}`替换
}

三、实现代码

最后附上这次练习的全部代码,代码如下:

<!--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 - 博客园
  • 5
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值