桑桑不会写程序 2022-09-24 12:01 采纳率: 100%
浏览 24
已结题

友友们,关于css盒子模型border-width部分,前端初学者遇到问题希望友友们能够帮助解惑

这是别人做出来的显示效果

img


这是别人写的语言

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  div{
    width: 50px;
    height:50px;
    margin:5px;
  }
  .brd1{
      border-width:2px;
      border-style:solid;
      border-color:red;
  }
  .brd2{
      border:2px  solid  red;
  }
  .brd3{
       border-bottom:1px solid red;
  }
  .line {
    height:1px;
    width:500px;
    border-top:1px solid #e5e5e5;
  }

  </style>
</head>
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/766540889366182.png "#left")

<body>
  <div class="brd1"></div>
  <div class="brd2"></div>
  <div class="brd3"></div>
  <div class="line"></div>
</body>
</html>

这是我做出来的显示效果:

img


这是我写的语言(没有写完):


<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>border</title>
   <style>
      #box{width:50px;
                height:50px;
                margin:5px;
               }

        .one{border-width:2px;
                border-style:solid;
                border-color:red;
                }

        .two{border-width:2px;
                border-style:solid;
                border-color:red; 
               }
        .three{border-bottom:1px solid red;}






   </style>
 </head>
 <body>
   <div id="box">
     <div class="one"></div>
     <div class="two"></div>
     <div class="three"></div>
     <div class="four"></div>
   </div>
 </body>
</htm

为了达到别人做出来呈现一样的效果,我在像素上都跟别人写的一模一样,但是我还是不太明白为什么我设置出来效果是不同的。
问题1:border-width这个属性设置它不是应该是上右下左四个宽度吗?我的代码中对于border-width的设置为2px,呈现效果不应该是一个正方形吗?
问题2:别人写的语言中,css代码 .line部分的height和width中我尝试过把他们删掉,然后将border-top的像素大小改动过,改动的效果呈现出来有以下情况:

img

img


要想达到别人做的line部分,就必须加width。 请问这是为什么呐?
/因为在尽量让自己把问题说的清楚一点,所以篇幅较长,谢谢友友们耐心看完,麻烦大家了/

  • 写回答

2条回答 默认 最新

  • 爱编程的小学究 2022-09-24 12:58
    关注

    div{
    width: 50px;
    height:50px;
    margin:5px;
    }
    上边的这段,给所有的div都设置宽、高和内外边距
    #box{width:50px;
    height:50px;
    margin:5px;
    }
    上边的这段,给父盒子设置了宽、高和内外边距,子盒子(one、two、three、four)并没有宽高

    修改办法:
    1、#box 改成div
    2、删除掉box的样式设置,给没个子盒子设置宽高
    例如 .one{
    width: 50px;
    height:50px;
    margin:5px;
    border-width:2px;
    border-style:solid;
    border-color:red;
    }

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 10月18日
  • 已采纳回答 10月10日
  • 创建了问题 9月24日