Что спецификация CSS говорит, что это правильный способ измерения ширины элементов? - PullRequest
Новая
       6

Что спецификация CSS говорит, что это правильный способ измерения ширины элементов?

4 голосов
/ 19 января 2010

Похоже, что Chrome измеряет ширину элементов изнутри поля, включая отступы, но Firefox и IE измеряют ширину полей, где находится граница (не включая отступы, но внутри поля). измерение ширины элементов от границы имеет смысл для меня и также полезно при кодировании, поскольку включение границ позволит очень легко увидеть ширину элемента, но мой вопрос заключается в том, что в спецификации CSS является правильным способом измерения ширины элемента. элемент и если Chrome не так или IE и Firefox

спасибо за вашу помощь

Ответы [ 3 ]

5 голосов
/ 19 января 2010

Спецификация блочной модели W3C CSS 2.1 гласит, что ширина элемента не включает поля, границы или отступы.

Фактически, указав свойства ширины или высоты CSS, вы указываете пространство, доступное для содержимого поля (которое в спецификации называется область содержимого ), которое не включает отступы, поля или границы.

Посмотрите на этот пример: 

div { width: 100px; padding: 10px; margin: 20px; border: 2px; }

Расстояние между вертикальными границами (включая их) равно width + padding-left + padding-right + border-right-width + border-left-width. Поля находятся за пределами границы. Ширина (в соответствии со спецификациями CSS) составляет 100 пикселей.

Internet Explorer отображает веб-страницы в Стандартном режиме или в Режиме причуд . Если вы хотите, чтобы IE вел себя так, как должен (с соблюдением стандартов CSS), вы должны заставить его использовать Стандартный режим , используя один из DOCTYPE, описанных в этой статье: http://www.alistapart.com/articles/doctype/

Эта техника называется переключатель типа .

Firefox и большинство других браузеров следуют стандартной блочной модели.

Вы можете прочитать спецификацию коробочной модели W3C здесь: http://www.w3.org/TR/CSS21/box.html#box-dimensions Но я предлагаю вам прочитать более простую (но действительно хорошую) статью, подобную этой: http://reference.sitepoint.com/css/boxmodel

Следует также отметить, что спецификации CSS 3 будут включать свойство box-sizing, которое позволит указывать для каждого элемента способ интерпретации свойства width (поэтому, если исключить или включить заполнение) и границы). В любом случае большинству браузеров потребуются годы, чтобы реализовать новые (и еще не завершенные) спецификации CSS 3.

2 голосов
/ 19 января 2010

Не стесняйтесь читать . Конечно, каждый браузер в последнее десятилетие реализовал это по-своему.

Предполагается, что свойство width элемента является "шириной области содержимого" и не должно включать поля, отступы или границы. IE не реализовал его таким образом в определенных версиях и ситуациях. Как правило, другие браузеры следуют спецификации.

1 голос
/ 20 января 2010

Все современные браузеры правильно отображают блочную модель. Ответы здесь длинные, но правильные. По сути, элемент блока со следующими деталями: 

border: 10px;
margin: 10px;
padding: 10px;
width: 100px;

будет иметь следующие характеристики:

  1. Общее пространство, используемое элементом, будет 160px в ширину. Это ширина + отступ * 2 + поле * 2 + граница * 2, так как мы указали симметричную рамку, отступ и поле с обеих сторон поля.

  2. Пространство, доступное для содержимого внутри элемента, составляет всего 100 пикселей в ширину.

  3. Доступное пространство до границы элемента составляет 120 пикселей.

Chrome, Safari, FireFox, Opera и IE6 / 7/8 должны отображать это поведение.

...