css样式-border属性对子元素位置的影响

       最近在开发S1 B/S 的前端页面时，有一个下载bs包进度条的样式编写，遇到一个莫名的坑，一句话描述不清，直接上图和代码。

先看一下原来的样式： 

        布局样式代码如下：

         

<html>
    <head>
        <style>
           * {
               margin: 0;
               padding: 0;
               box-sizing: border-box;
            }
            .bar-wrapper {
               width: 400px;
               height: 80px;
               border: 1px solid #333;
               padding-top: 33px;
               margin: 20px auto;
            }
            .progress-bar-container {
               width: 180px;
               height: 14px;
               border: 1px solid red;
               border-radius: 15px;
               background: red;
               margin: 0 auto;
            }
            .progress-bar {
               display: block;
               width: 25%;
               height: 14px;
               border-radius: 15px;
               border: 1px solid greenyellow;
               background: greenyellow;
            }
        </style>
    </head>
    <body>
       <div class="bar-wrapper">
           <div class="progress-bar-container">
               <span class="progress-bar"></span>
           </div>
       </div>
    </body>
</html>

　　可以看到，绿色部分的进度条高度是和它的父元素，也就是红色的部分的高度是一样的，都是14px，但是很明显绿色部分没有撑满红色部分的高度，在纵向上有一点偏移。

　　

　　对于为什么会产生这个偏移，我暂时还没找到原因，不过有一个办法可以勉强解决这个偏移问题，就是去掉父元素的border，如下：

        但是，如果这个border必要的话，就不能这么操作了，这个时候还需要给父元素加一个box-sizing属性，让它的值为content-box，注意，除了它，其他元素的这个属性都要设置为border-box，效果如下：

 

posted @ 2021-10-24 22:59  丫头＆smile  阅读(434)  评论(0)    收藏  举报