- Блочная модель CSS
- Как работает свойство
box-sizing
box-sizing
не работает- Почти полностью можно обойтись без
box-sizing
благодаря функцииcalc()
- Пункты HTML меню съезжают вниз
Блочная модель CSS
По умолчанию margin
, padding
и border
увеличивают коробку элемента и прибавляются к width
, если width
не имеет значение auto
, или height
.
margin
: (внешний отступ от границы элемента)изменить
border
: (граница)изменить
padding
: (внутренний отступ от содержимого до границы)<div id="dva1"></div>
Как сделать, чтобы блок не выходил за границы родителя
Нужно уменьшитьwidth
на padding-left
и padding-right
, а height
— на padding-top
и padding-bottom
: <div id="pyat"> <div id="pyat1"></div> </div>
Не рассмотрен вариант, когда всё что выходит нужно обрезать.
Как работает свойство box-sizing
При box-sizing: border-box;
[w3.org] коробку не растягивают padding
и border
, они включены в width
/height
. Есть исключения.ширина × высота: px × px
<style> div { height: 70px; margin: 30px; border: 5px solid green; padding: 20px; background: #fff5d7; box-sizing: content-boxborder-box; } </style> <div></div>
box-sizing: content-box | border-box | inherit
content-box | ширина = width + margin-right + margin-left + padding-right + padding-left + border-right-width + border-left-width
|
---|---|
высота = height + margin-top + margin-bottom + padding-top + padding-bottom + border-top-width + border-bottom-width
| |
border-box | В width входят padding-right , padding-left , border-right-width и border-left-width
|
ширина = width + margin-right + margin-left
| |
В height входят padding-top , padding-bottom , border-top-width и border-bottom-width
| |
высота = height + margin-top + margin-bottom
| |
inherit | наследует значение родителя |
width: 100%;
и padding
или border
Наиболее частый пример: <div id="tri1">текст</div>
<div id="tri2">текст</div>
<div id="tri1">текст</div> <div id="tri2">текст</div>
box-sizing
не работает
При box-sizing: border-box;
блок всё же будет расширяться на величину, равную положительному числу из
padding-right
+padding-left
+border-right-width
+border-left-width
-width
padding-top
+padding-bottom
+border-top-width
+border-bottom-width
-height
изменить
height
: То есть, предположение, что с
height: 0;
и box-sizing: border-box;
блок будет исчезать, неверно.<div id="chetyre"></div>
5 комментариев:
Хорошо, что поисковиков много. Главное, чтобы все одинаково читали мета-теги, robots.txt и т.п.
Вебмастера будут ориентироваться на тот, где число посетителей больше. Например, у меня с mail.ru в день идёт около 50 человек (0,6% от общего трафика). Я даже не помню логин от Вебмастера.
Посетители будут посещать чаще тот, у кого выше качество выдачи, и тот, кто рекламирует себя активнее. То есть по телику теперь чаще будем видеть рекламу поисковиков. Вспомним хотя бы Авито.ру. Гугл, например, заключает контракты с учебными заведениями, чтобы те использовали Blogger, чтобы молодёжь привыкала к бренду.
И потом, вроде самый большой процент зарегистрированных сидит на mail.ru.
Хотя согласна - почта - это один из сильных инструментов подсадить человека на свои сервисы, такой же как Карта или Новости.