CSS3 box-sizing property

Не понимаю, как использовать свойство box-sizing. Потому что это:CSS3 box-sizing property

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
     div.container 
     { 
      width:10em; 
      border:1em solid; 
     } 
     div.box 
     { 
      box-sizing:border-box; 
      -moz-box-sizing:border-box; /* Firefox */ 
      -webkit-box-sizing:border-box; /* Safari */ 
      width:50%; 
      border:1em solid red; 
      float:left; 
     } 
     </style> 
    </head> 
    <body> 

     <div class="container"> 
     <div class="box">1</div> 
     <div class="box">2</div> 
     </div> 

    </body> 
</html>

эквивалентно следующему:

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
     div.container 
     { 
      width:10em; 
      border:1em solid; 
     } 
     div.box 
     { 
      width:3em; 
      border:1em solid red; 
      float:left; 
     } 
     </style> 
    </head> 
    <body> 

     <div class="container"> 
     <div class="box">1</div> 
     <div class="box">2</div> 
     </div> 

    </body> 
</html>

Так что, когда я должен использовать это свойство, а именно, что делать? Я использовал пример из w3 http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

источник

2012-08-30 sczdavos

Если возможно, переключитесь на другой учебник/ссылку (рекомендую [MDN] (https://developer.mozilla.org/en-US/docs/CSS)). W3Schools часто публикует неточное или вводящее в заблуждение содержание. Подробнее о [W3Fools] (http://w3fools.com/). – Pavlo

box-sizing: border-box наиболее полезен, если вы не можете указать точную ширину содержимого на основе полей, границ и заполнения поля, потому что вы не знаете заранее (и не можете контролировать), каковы эти значения.

В первом примере, если вы не знали как много отступов был в коробке или как густая ее границы были, что делают его использовать модель границы окна позволяет просто установить width: 50%, чтобы убедиться, что поле всегда будет занимать 50% ширины своего контейнера, независимо от границ и отступов. Во втором примере, если вы установили width: 50%, это ширина содержимого; границы и дополнения добавили бы к ней, заставив ее фактически расширить более 50% ширины своего контейнера.

источник

2012-08-30 11:22:53 BoltClock

Спасибо за объяснение :) – sczdavos

в первом примере вы устанавливаете ширину 50%плюс некоторые границы, но из-за наличия имущества box-sizing:border-box; вся ширина включает границы внутри так коробка 50% шириной с границы (и, необязательно, обивка, если вы имеете любой)

и это эквивалентно второму примеру — без box-sizing:border-box; —, в котором общая ширина 1em + 3em + 1em = 5em, то есть 50% из 10em

источник

2012-08-30 11:23:23 fcalderan

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

Примечание: никогда не используйте http://www.w3schools.com/ для обучения. Для получения дополнительной информации см. w3fools.com

источник

2012-08-30 11:24:47

Фактически, когда мы используем отступы в наших элементах div на вертикальной и горизонтальной основе, добавьте отступы общей ширины и высоты.

like our div width is 100px and we give 5px padding from left and right side so div will calculate total of 100px + 5px + 5px = 120.

так, если мы используем box-sizing здесь недвижимость, поэтому мы не должны регулировать ширину, так как она не будет рассчитать дополнительную ширину для заполнения.

посмотреть демо: - http://tinkerbin.com/JtOC6ZJr

источник

2012-08-30 11:49:00

-1

один нюанс при использовании Гибкая Box Model является то, что этот модуль еще проект и кросс-браузер, поддержка и реализация по-прежнему неоднородным. Вы можете найти хорошее сообщение о предмете http://webdevhub.co.uk/css3-flexible-box-model/

источник

2012-09-08 10:24:23 smartsdesign

CSS3 box-sizing property

ответ

Смежные вопросы