使用 calc()函数后,高度无法统一

使用 calc()函数后,高度无法统一

​确定六个.banner-nav>ul>li 高度的时候,因为边框的原因老师使用了box-sizing: border-box;完美实现了。
我使用了

.banner .banner-nav>ul>li{
    height: calc(16.66% - 1px);    
}
.banner .banner-nav>ul>li:last-child{
    border-bottom:none;
    height: 16.6666%;
}

按理论来说应该也是可以让高度和父元素一致,但是为什么我做出来后六个盒子的高度比父元素低了一点,前五个盒子加上边框实际高度是104.7px的时候,第六个盒子是104.933px,所以请教一下老师这是为什么
图片描述

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕星星 2021-03-05 17:44:03

同学你好,老师这边测试代码使用cacl()方法实现效果是一样的,没有问题:

http://img1.sycdn.imooc.com//climg/6041fcff09e19e4605700273.jpg

http://img1.sycdn.imooc.com//climg/6041fd330928f39406290261.jpg

如果同学测试效果不是这样的话,建议将自己写的html以及css代码全部粘贴上来,老师帮助测试。

祝学习愉快!

好帮手慕慕子 2021-03-04 18:53:58

同学你好,老师将同学粘贴的这部分代码放在源码中测试,去掉box-sizing:border-box;属性,内容的高度与父元素高度是一致的,示例:

http://img1.sycdn.imooc.com//climg/6040bbfa091e8d6b16230904.jpg

同学是不是忘记给除了最后一项的li添加border-bottom属性了呢,如果是的话,可以添加后再测试下。

如果还有问题,可以新建提问,将你写的完整代码全部粘贴过来,便于帮助同学准确的定位与解决问题。

祝学习愉快~

  • 提问者 席萌萌 #1
    老师使用了box-sizing: border-box是正常的,我想使用

    calc()

    实现一样的效果但是没做到,请教这是为什么
    2021-03-04 21:23:37
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师