css элемент границы влияние на другие элементы странным образом

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%; 
} 

Я не ищу решение моей проблемы, но для объяснения того «проблема/поведение».

Большое спасибо. Jimmyboy.

Answer 1

, что я не в состоянии понять, почему установление границы в одном из трех полотен делает мои два друг .headerMainDiv идет вниз от своей первоначальной позиции (попробуйте играть с размером границы в/удалить границы и увидеть эффект).

вопроса я думаю, что вы имеете в виде это вертикальное выравнивание, то есть быть по умолчанию, установите baseline для встроенных элементов блока ... которые обруч ваших canvas элементов.

Все, что вам действительно нужно сделать, это установить:

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

JSfiddle Demo

Тем не менее, с помощью border-box, вероятно, хороший вариант по умолчанию, так что я включил его в демо-версии.

Answer 2

Это потому, что вы указали ширину 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>

Однако, если вы хотите, чтобы все дивы, как представляется, такой же высоты, вам нужно будет убедиться, что дополнительная высота границы во втором полотне также добавляют к этим полотнам без границ, путем:

1. Использование верхних и нижних прозрачных границ
2. U петь верхнее и нижнее полей на первый и третий холсте
3. Используя верхние и нижние Прокладки на родительском элементе первого и третьего холст

Вот решение с использованием первым раствора:

#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 3

Если вам нужно, что граница не влияет на ширину вашего ящика, необходимо указать box-sizing свойства.

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

Установка размера коробки в рамку-рамку позволяет избежать прокладок и границ без ущерба для вашей ширины. Проверьте это

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

Если это не ваша проблема, пожалуйста, объясните лучше

Answer 4

Это потому, что границы увеличивают ширину элемента.Использование 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; 
} 

Answer 5

Это потому, что вы использовали дисплей как встроенный блок. Свойство vertical-align наследуется как baseline. Именно по этой причине вы видите все div, выровненные по полу родительского div.