前端 css样式的height不能设置百分数,需要有具体的值!!!

2 篇文章 0 订阅
2 篇文章 0 订阅
在设置高度的时候需要给父容器提供具体的高度信息!!!

兄弟们我又回来了,今天在写页面的时候差点没给我整崩溃了,为什么这么说呢,因为有一个css样式一直调整不了,如下:

在这里插入图片描述

我想让这个卡片不仅左右居中还要上下居中,结果设置完之后确实是居中了,但是只有左右居中,上下不变!我就开始查资料,我的css是这样的

.login {
    height: 100%;                         /* 页面高度 */
    display: flex;                        /* 布局格式????? 中间的表单居中了!!! */
    align-items: center;                  /* 页面横向居中方法 */
    justify-content: center;              /* 页面竖向居中!!! */
    }

上下左右也都设置了,但是为什么左右的生效了,但是上下的没生效,但是上网搜了一下,我这代码写的确实没啥问题,然后又到了

快乐的删代码时间!!!

整了好一会儿,我发现莫名其妙就居中了!!!

.login {
    height: 700px;                         /* 页面高度 */
    display: flex;                        /* 布局格式????? 中间的表单居中了!!! */
    align-items: center;                  /* 页面横向居中方法 */
    justify-content: center;              /* 页面竖向居中!!! */
    }

在这里插入图片描述

看我的高度设置,为什么百分之一百不可以我700px就可以???

笔记!

核心原理:
height:100%这个概念是子节点相对于父容器而言;所以要让此属性生效,必要的一点就是:父容器必须具有具体的高度信息; 直接在的子节点(如div中)写height:100%是不会生效的,因为此时的高度是不确定的,默认是auto
在设置高度的时候需要给父容器提供具体的高度信息!!!

怕忘了再说一次,嘻嘻

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值