我如何停止框大小边框移动内容

Question

我正在使用许多 divs，它们在其中绝对定位了子 divs。

我想做的是在 div 内放置一个边框，但不与内部的绝对定位元素交互。

（几乎像浮动边框）

我试过使用 outline，但它不起作用，因为它确实需要在 .box 中使用它 divs

我也试过框阴影插入，但这仍然会移动内容。

我有什么办法可以做到这一点吗？

    .box {
        height:200px;
        width:100px;
        background:red;
        border-collapse: collapse;
        position:relative;
        display:inline-block;
    }
    
    .box:hover {
        border:22px solid black;
        border-collapse: collapse;
        box-sizing:border-box;
    }
    .silly {
        color:#ffffff;
        position:absolute;
        left:0px;
        top:0;
    }
    .silly1 {
        color:#ffffff;
        position:absolute;
        left:30px;
        top:160px;
    }
    .silly2 {
        color:#ffffff;
        position:absolute;
        right:0;
        top:90px;
    }
    .silly3 {
        color:#ffffff;
        position:absolute;
        left:10px;
        top:40px;
    }

<div class="box">

        <div class="silly">I am box</div>
        <div class="silly1">1</div> 
        <div class="silly2">2</div> 
        <div class="silly3">3</div> 
    </div>
    
    <div class="box">
        <div class="silly">I am box</div>
        <div class="silly1">1</div> 
        <div class="silly2">2</div> 
        <div class="silly3">3</div> 
    </div>
    
    <div class="box">
        <div class="silly">I am box</div>
        <div class="silly1">1</div> 
        <div class="silly2">2</div> 
        <div class="silly3">3</div> 
    </div>

here is the DEMO

Answer 1

为您的 box 创建一个容器并将 position: relative 添加到其中，而不是将其添加到 box:

        .box-container {
            position:relative;
        }


        .box {
            height:200px;
            width:100px;
            background:red;
            border-collapse: collapse;
            display:inline-block;
        }
        
        .box:hover {
            border:22px solid black;
            border-collapse: collapse;
            box-sizing:border-box;
        }
        .silly {
            color:#ffffff;
            position:absolute;
            left:0px;
            top:0;
        }
        .silly1 {
            color:#ffffff;
            position:absolute;
            left:30px;
            top:160px;
        }
        .silly2 {
            color:#ffffff;
            position:absolute;
            right:0;
            top:90px;
        }
        .silly3 {
            color:#ffffff;
            position:absolute;
            left:10px;
            top:40px;
        }

<div class="box-container">
    <div class="box">

        <div class="silly">I am box</div>
        <div class="silly1">1</div> 
        <div class="silly2">2</div> 
        <div class="silly3">3</div> 
    </div>
</div>

Answer 2

在 .box 元素内添加一个额外的 child div 并对其应用当前的 .box:hover 样式。确保这个新 child div 是 position:absolute 以将其从 'flow'.

中删除

顺便说一句，我倾向于使用 * 选择器将 box-sizing: border-box; 应用于所有元素。

*{
  
  box-sizing: border-box;
  }
.box {
        height:200px;
        width:100px;
        background:red;
        border-collapse: collapse;
        position:relative;
        display:inline-block;
    }
    
    .border{
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      }
    .box:hover .border {
        border:22px solid black;
    }
    .silly {
        color:#ffffff;
        position:absolute;
        left:0px;
        top:0;
    }
    .silly1 {
        color:#ffffff;
        position:absolute;
        left:30px;
        top:160px;
    }
    .silly2 {
        color:#ffffff;
        position:absolute;
        right:0;
        top:90px;
    }
    .silly3 {
        color:#ffffff;
        position:absolute;
        left:10px;
        top:40px;
    }

<div class="box">
        <div class="border"></div>
        <div class="silly">I am box</div>
        <div class="silly1">1</div> 
        <div class="silly2">2</div> 
        <div class="silly3">3</div> 
</div>

我如何停止框大小边框移动内容

how do i stop box sizing border moving content around

html

css

border-box