老师 想请问下为什么盒子有高度和宽度时可以只设置一条边框 盒子没有时就显示不出来呢

老师 想请问下为什么盒子有高度和宽度时可以只设置一条边框 盒子没有时就显示不出来呢

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        div {

            height: 20px;

            width: 20px;

            background-color: red;

            /* border-left: 20px solid red; */

           border-bottom: 4px solid blue;


        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>


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

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

1回答
好帮手慕慕子 2022-06-21 15:00:13

同学你好,是指盒子没有宽高吗?如果是的话,依然可以只设置一条边框,示例:

https://img1.sycdn.imooc.com//climg/62b16c1b0925fe5419200485.jpg

因为盒子没有高度,所以不会显示红色背景,但是设置的蓝色下边框是可以正常显示的。

祝学习愉快~

  • 提问者 慕仙0240544 #1

    是指height 和width设置为0的时候 谢谢老师

    2022-06-21 15:10:07
  • 提问者 慕仙0240544 #2

    老师 我照你这样写了 没有 是我浏览器的问题吗 

    2022-06-21 15:11:57
  • 好帮手慕慕子 回复 提问者 慕仙0240544 #3

    老师又使用Chrome和firefox浏览器分别测试下,width和height设置为0时,单独设置下边框是可以正常显示的,如下:

    https://img1.sycdn.imooc.com//climg/62b178f209346cc611830890.jpg

    https://img1.sycdn.imooc.com//climg/62b17908091b921810880760.jpg

    建议同学修改代码保存后再测试下,如果还有问题,可以将你修改后的代码粘过来,并图文结合详细描述下具体是在哪个浏览器下测试的呢。

    祝学习愉快

    2022-06-21 15:54:35
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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