div三行或三列铺满全屏

时间  2019-12-12
标签 div 三行 铺满 全屏 栏目 CSS 繁體版
原文   原文链接

1、实现要求

  1. 铺满屏，字体居中
  2. 交互，点击一个盒子可以改变另一个盒子的颜色

最开始的实现效果使这样的：
在这里插入图片描述javascript

可是有些问题：css

  1. 字体只有水平居中，没有垂直居中；
  2. 第三行的盒子最右边没有铺满，而且，我理解的铺满全屏是指彻底铺满，既没有剩余空白，也不会让内容一屏显示不完，也就是说要让屏幕右侧的滚动条和下面的滚动条消失，内容显示完整而且铺满屏幕；
  3. 尚未实现交互。所以，布局上的最终实现效果但愿以下图：
    在这里插入图片描述

2、实现过程

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

1.1水平居中：

文字的水平居中是经过在div中加入text-align:center实现的，text-align经常用于盒子里的文字、图片等内容居左、居中、局右。
关于text-align的用法能够参考：text-align的用法 - 老少孩 - CSDN博客，讲的很清楚：给父级设置text-align这个属性，只会对其子元素是行级以及行级块元素起做用，且子元素会继承text-align这个属性对其文本起做用。
拿原文中的这个图示例：
html

  1. 对父级使用text-align:center; 会对img，input等行内块元素以及行级元素span有居中的效果。

  2. 对块级元素div以及h2看似也有居中效果？这是为何呢？
    观察能够发现咱们并无给div和h2设置宽高，当没有设置宽高的时候，其宽度继承了父级的，高度是由文本撑开，固然也继承了父级的text-align:center;java

  3. 可是设置了宽高的块级元素p标签，此时它自己不是水平居中，而其文本是居中的,当咱们把p元素转换为行级块元素的时候，会发现，不只p元素中的文本居中了，其自身也居中了。

    做者：阳光下的女汉子
    来源：CSDN 原文：https://blog.csdn.net/weixin_44307807/article/details/85872703
    版权声明：本文为博主原创文章，转载请附上博文连接！浏览器

1.2垂直居中：

关于垂直居中，能实现的方法比较多，网上也有不少很棒的博文：dom

  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值自适应。须要注意的是：ui

  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 - 博客园
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程