CSS с использованием процентов и полей, отступов или границ - PullRequest
Новая
       37

CSS с использованием процентов и полей, отступов или границ

2 голосов
/ 25 декабря 2011

У меня есть проблема, которую я не понимаю.Если бы я использовал процент по ширине, я ожидал бы, что элементы вычисляют границы, поля или отступы в пределах их размера (в процентах).Но на самом деле эти значения добавляются к их размеру, что я считаю неправильным.Мои ожидания неверны?Пример ниже показывает проблему.Оба «div» «left» и «right», я ожидаю, будут в одной строке.Если я уберу «рамку», она будет работать как положено. 

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  border: 1px solid black;
  width: 100%;
  overflow: auto;
}

.left {
  border: 1px solid black;
  width: 20%;
  float: left;
}

.right {
  border: 1px solid black;
  width: 80%;
  float: left;
}
</style>
</head>
<body>
<div class="center">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</body>
</html>

Ответы [ 5 ]

12 голосов
/ 25 декабря 2011

Для решения этой проблемы вы можете использовать box-sizing .См. http://jsfiddle.net/Marwelln/YYkxK/

box-sizing:border-box

5 голосов
/ 25 декабря 2011

Это совершенно нормально.Поначалу это не то, чего вы можете ожидать, но CSS работает таким образом.

Даже без процентов: 

#width {
    width: 100px;
    padding: 0 20px;
}

Этот div #width будет занимать 140px.Работает так же для процентов.

Так что вам может понадобиться внутренний div для достижения того, что вы хотите. 

<div class="left">
   <div class="inner">

   </div>
</div>
<div class="right">
   <div class="inner">
   </div>
</div>


.inner { padding: 10px; }
.right .inner { border-left: 1px solid #ccc; }
1 голос
/ 25 декабря 2011

Отступы или границы всегда увеличивают размер элементов наизнанку.

Маржа никогда не добавляет к размеру, но добавляет пространство вне элемента.

Проценты или установленные значения не имеют значения.Вышесказанное всегда верно.

Просмотр модели коробки может помочь ---> ЗДЕСЬ

0 голосов
/ 25 декабря 2011

В суперсовременных браузерах вы можете использовать calc (), чтобы исправить это: calc (80% - 2px).И да, это нормально.Если вы установите ширину 100 пикселей и границу 150 пикселей, что произойдет, если граница не будет добавлена ​​?

0 голосов
/ 25 декабря 2011

Когда вы используете процент в качестве значений ширины (или высоты), это процент от ширины (или высоты) элемента родительского блока (содержащего блок).

...