首页 > 其他分享 >Css实现DIV铺满屏幕的几种方法

Css实现DIV铺满屏幕的几种方法

时间:2022-12-06 11:13:35浏览次数:69  
标签:Reset 100% 铺满 height width CSS DIV div Css

1. 第一种方式

div{    /* div的CSS样式 */
    position : absolute;
    width : 100%;
    height : 100%;
}
*{        /* CSS Reset */
    margin : 0;
    padding : 0;
}

a、 给整个div设置一个绝对定位,然后给该div的 width 和 height 都设置成 100% 就可以了。
b、 此时设置完以后发现页面上方和左侧分别有 8px 的神秘边距(元素自带),哈哈,可以通过CSS Reset解决。
c、 如果有 同等级的 div也做了铺满(即body中有两个div都使用了这种方式),那么后面的元素会 覆盖 掉之前的元素。

2.第二种方式

html, body {
    width: 100%;
    height: 100%;
}
div {
    background-color: red;
    height: 100%;
    width: 100%;
}
* {
    margin: 0;
    padding: 0;
}

a、首先设置 html 和 body 的 width 和 height 为 100% ,然后在设置div的 width 和 height 为 100% 即可
b、之后还是要 CSS Reset 就可以了。

3.第三种方式

div {
    background-color: red;
    width:100vw;
    height:100vh; 
}
* {
    margin: 0;
    padding: 0;
}

a、给div的 width 是设置为 100vw,div的 height 设置为 100vh(下面有关于 vw 和 vh 的简单说明)。
b、之后还是要 CSS Reset 就可以了

 

什么是 CSS Reset

 

介绍下几种单位长度的区别

 

 

 通过上面我们就可以了解到,为什么我们上面第三种实现中设置 width 和 height 为 100vw 和 100vh 就可以实现 铺满 整个屏幕。

 

版权声明:本文为CSDN博主「你好像很好吃a」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44296929/article/details/102856323

 

标签:Reset,100%,铺满,height,width,CSS,DIV,div,Css
From: https://www.cnblogs.com/alannero/p/16954641.html

相关文章

  • 现代 CSS 之高阶图片渐隐消失术
    在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样:<divclass="img"></div>div{width:300px;height:300px;backgroun......
  • Vue 中使用 tailwindcss
    Vue2中使用tailwindcssnpmitailwindcss@3postcss@8autoprefixer@10-Dnpxtailwindcssinit-p//tailwind.config.js/**@type{import('tailwindcss').Config......
  • CSS 生成等份扇形
      <templatev-for="itemin50"><div:key="item"v-if="item>1":style="{background:drawSector(item)}"class="one"></div></temp......
  • css attr()函数
    cssattr()函数attr()理论上能用于所有的CSS属性但目前支持的仅有伪元素的content属性,其他的属性和高级特性目前是实验性的CSS表达式attr()用来获取选择到的元......
  • css3伪元素
    1、::first-line首行文本2、::first-letter首字母3、::selection被选中(高亮区域)4、:empty仅当元素为空时触发5、:only-child没有兄弟元素的子元素6、:fisrt-of......
  • React后台管理系统 04 配置路径别名、全局样式设置、模块化scss
    ts中对于@符号指定的路径不支持,同时vite中也是不支持的,所以我们需要在vite.config.ts中进行指定配置,path是node中自带的一个模块这里爆红的原因是没有进行声明:我们使用命......
  • CSS中的伪类
    1、什么是伪类?首先伪类是选择器的一种,它用于选择处于特定状态的元素。2、伪类的表现状态时什么样子的?伪类就是开头为冒号的关键字。例如::last-child3、常见的伪类有哪......
  • React Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
    报错信息umi.js:68474Warning:validateDOMNesting(...):<div>cannotappearasadescendantof<p>.其实不难看出是它提示你应该在p标签中写一个select这里造成错误......
  • css实现聊天对话框效果
    效果:可以看做是一个长方形和一个三角形组成的,关键css代码:#talk{margin-left:50px;width:220px;height:60px;background:#9EEA6A;position:relative;......
  • css超出部分省略
    1.单行:.div1{width:100px;overflow:hidden;//内容会被修减,并且其余内容是不可见text-overflow:ellipsis;//显示省略号来代替被修减文本white-space:nowrap......