CSS

这个问题在这里已经有了答案:

  • 为什么box-sizing:border-box仍然显示宽度为0px的边框? 2个答案

  • 你可以使用:not

    .cnr>div{
      box-sizing: border-box;
      overflow: hidden;
    }
    
    .cnr>div:not(.closed) {
      border: 1em solid;
      padding: 1em;
    }
    

    $('.cnr').on('click', function(){
      $(this).find('div').toggleClass('closed');
    })
    .cnr {
      display: flex;
      height: 100%;
      background-color: grey;
      position: absolute;
      border: 1px red solid;
    }
    
    .cnr>div{
      box-sizing: border-box;
      overflow: hidden;
    }
    
    .cnr>div:not(.closed) {
      border: 1em solid;
      padding: 1em;
    }
    
    .cnr>.closed {
      width: 0;
      flex-basis: 0;
      flex-shrink: 1;
      flex-grow: 0;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="cnr">
      <div>
        open
      </div>
      <div class="closed">
        closed
      </div>
    </div>
    链接地址: http://www.djcxy.com/p/75597.html

    上一篇: css

    下一篇: CSS percentual padding / margin in border