Question

我有一个奇怪的事情，我没有理解原因。我创建了fiddle to demonstrate问题。

我无法理解的是为什么在三幅画布之一上设置边框会使我的另外两个.headerMainDiv从原来的位置下降（尝试使用边框的大小/删除边框并查看效果）。

这是我的html的相关部分：

<header>
    <div class="headerMainDiv">         
        <div class="inner">         
            <canvas id="canvas1">

            </canvas>   
        </div>      
    </div>
    <div class="headerMainDiv">         
        <div class="inner">         
            <canvas id="canvas2">

            </canvas>   
        </div>      
    </div>
    <div class="headerMainDiv">
        <div class="inner">         
            <canvas id="canvas3">

            </canvas>   
        </div>      
    </div>
</header>

这是相关的css：

#canvas2{
  border:10px solid black;
}

.inner {
  margin-top: 2px;
}

.headerMainDiv {
  height: 100%;
  width: 30%;
  background-color:red;
}

body{
  margin: 0;        
}

header{
  height: 20%;
  width: 100%;
  top:0px;
  text-align: center;
  position: fixed;
  z-index: 5;
  background-color: blue;
}

header div {
  display: inline-block;
}

canvas {
  background-color: grey;
  width:100%;
  height:100%;
}

我不是在寻找解决问题的方法，而是为了解释这个＆＃34;问题/行为＆＃34;。

非常感谢。 Jimmyboy。

Answer 1

这是因为您使用了显示作为内联块。 vertical-align属性将继承为baseline。这就是你看到所有div与父div的底线对齐的原因。

Answer 2

我无法理解的是为什么在三幅画布之一上设置边框会使我的另外两个.headerMainDiv从原来的位置下降（尝试使用边框的大小/删除边框并查看效果）。

我认为你所指的问题是垂直对齐，默认情况下，对于内联块元素设置为baseline ...它会包裹你的canvas元素。

您真正需要做的就是设置：

header div {
    display: inline-block;
    vertical-align: top;
}

JSfiddle Demo

那就是说，使用border-box可能是一个很好的默认选项，所以我把它包含在演示中。

Answer 3

这是因为您在canvas元素上声明了100％宽度，并在上添加了边框。这会导致宽度超过100％，从而导致溢出。

您可以做的是强制浏览器计算边框宽度作为宽度声明的一部分。这可以通过在画布元素上使用box-sizing: border-box来完成：

#canvas2{ border:10px solid black; } .inner { margin-top: 2px; } .headerMainDiv { height: 100%; width: 30%; background-color:red; } body{ margin: 0; } header{ height: 20%; width: 100%; top:0px; text-align: center; position: fixed; z-index: 5; background-color: blue; } header div { display: inline-block; } canvas { box-sizing: border-box; /* Force border widths to be part of declared width */ background-color: grey; width:100%; height:100%; }

<header> <div class="headerMainDiv"> <div class="inner"> <canvas id="canvas1"> </canvas> </div> </div> <div class="headerMainDiv"> <div class="inner"> <canvas id="canvas2"> </canvas> </div> </div> <div class="headerMainDiv"> <div class="inner"> <canvas id="canvas3"> </canvas> </div> </div> </header>

但是，如果要使所有div显示为相同的高度，则需要确保第二个画布中的额外边框高度也添加到没有边框的画布中，方法是：

使用顶部和底部透明边框

在第一个和第三个画布上使用顶部和底部边距

在第一个和第三个画布的父元素上使用顶部和底部填充

以下是使用第一种解决方案的解决方案：

#canvas1, #canvas3 { border: 10px solid transparent; } #canvas2{ border: 10px solid black; } .inner { margin-top: 2px; } .headerMainDiv { height: 100%; width: 30%; background-color:red; } body{ margin: 0; } header{ height: 20%; width: 100%; top:0px; text-align: center; position: fixed; z-index: 5; background-color: blue; } header div { display: inline-block; } canvas { box-sizing: border-box; /* Force border widths to be part of declared width */ background-color: grey; width:100%; height:100%; }

<header> <div class="headerMainDiv"> <div class="inner"> <canvas id="canvas1"> </canvas> </div> </div> <div class="headerMainDiv"> <div class="inner"> <canvas id="canvas2"> </canvas> </div> </div> <div class="headerMainDiv"> <div class="inner"> <canvas id="canvas3"> </canvas> </div> </div> </header>

Answer 4

如果您需要边框不会影响框的宽度，则需要指定box-sizing属性。

   #canvas2{
      border:10px solid black;
      box-sizing:border-box;
   }

将框尺寸设置设置为边框，避免填充和边框，而不会影响宽度。看看这个

http://jsfiddle.net/d6tukcdz/6/

如果不是您的问题，请解释一下

Answer 5

这是因为边框会增加元素的宽度。使用box-sizing: border-box会在元素的整体宽度中包含边框。

将display: inline-block; vertical-align: top;添加到.headerMainDiv可解决对齐问题 - 已更新fiddle。

canvas {
    box-sizing: border-box;
    background-color: grey;
    width:100%;
    height:100%;
}

.headerMainDiv {
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: 30%;
    background-color:red;
}

css元素边界以奇怪的方式影响其他元素

5 个答案: