init
This commit is contained in:
Ilya Kantor
parent
06f61d8ce8
commit
f301cb744d
2271 changed files with 103162 additions and 0 deletions
73
03-more/11-css-for-js/01-css-why/article.md
Normal file
73
03-more/11-css-for-js/01-css-why/article.md
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
# О чём пойдёт речь
|
||||
|
||||
Неужели мы сейчас будем учить CSS? Ничего подобного. Предполагается, что вы *уже* знаете CSS, во всяком случае понимаете его на таком уровне, который позволяет делать Web-страницы.
|
||||
|
||||
[cut]
|
||||
Особенность квалификации JavaScript-разработчика заключается в том, что он не обязан выбирать цвета, рисовать иконки, "делать красиво". Он также не обязан верстать макет в HTML, разве что если является по совместительству специалистом-верстальщиком.
|
||||
|
||||
**Вот что он должен уметь абсолютно точно -- так это и разработать такую структуру HTML/CSS для элементов управления, которая не сломается, и с которой ему же потом удобно будет взаимодействовать**.
|
||||
|
||||
Это требует **отличного знания CSS в области позиционирования** элементов, включая тонкости работы `display`, `margin`, `border`, `outline`, `position`, `float`, `border-box` и остальных свойств, а также подходы к построению структуры компонент (CSS layouts).
|
||||
|
||||
Многое можно сделать при помощи JavaScript. И зачастую, не зная CSS, так и делают. Но мы на это ловиться не будем.
|
||||
|
||||
[summary]
|
||||
Если что-то можно сделать через CSS -- лучше делать это через CSS.
|
||||
[/summary]
|
||||
|
||||
Причина проста -- как бы ни был сложен CSS, JavaScript ещё сложнее. С этим можно поспорить, особенно если достать из нафталина IE 6,7 (IE5.5 не завалялся?) и показать, что CSS там ну совсем никакой. Да и в IE8 тоже есть забавные баги.
|
||||
|
||||
**Как правило, даже если CSS на вид сложнее -- поддерживать и развивать его проще, чем JS**. Поэтому овчинка стоит выделки.
|
||||
|
||||
Кроме того, есть ещё одно наблюдение.
|
||||
|
||||
[summary]
|
||||
Знание JavaScript не может заменить знание CSS.
|
||||
[/summary]
|
||||
|
||||
Жить становится приятнее и проще, если есть хорошее знание и CSS и JavaScript.
|
||||
|
||||
## Чек-лист
|
||||
|
||||
Ниже находится "чек-лист". Если хоть одно свойство незнакомо -- это стоп-сигнал для дальнейшего чтения этого раздела.
|
||||
|
||||
<ul>
|
||||
<li>Блочная модель, включая:
|
||||
<ul>
|
||||
<li>`margin`, `padding`, `border`, `overflow`</li>
|
||||
<li>а также `height/width` и `min-height/min-width`.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Текст:
|
||||
<ul>
|
||||
<li>`font`</li><li>`line-height`.</li>
|
||||
</ul></li>
|
||||
<li>Различные курсоры `cursor`.</li>
|
||||
<li>Позиционирование:
|
||||
<ul><li>`position`, `float`, `clear`, `display`, `visibility`</li>
|
||||
<li>Центрирование при помощи CSS</li>
|
||||
<li>Перекрытие `z-index` и прозрачность `opacity`</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Cелекторы:
|
||||
<ul><li>Приоритет селекторов</li>
|
||||
<li>Селекторы `#id`, `.class`, `a > b`</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Сброс браузерных стилей, <a href="http://meyerweb.com/eric/tools/css/reset/">reset.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
## Почитать
|
||||
|
||||
Книжек много, но хороших -- как всегда, мало.
|
||||
|
||||
С уверенностью могу рекомендовать следующие:
|
||||
|
||||
<ul>
|
||||
<li><a href="http://www.ozon.ru/context/detail/id/3881079/?partner=iliakan">CSS. Каскадные таблицы стилей. Подробное руководство. Эрик Мейер.</a>
|
||||
<li><a href="http://www.ozon.ru/context/detail/id/5647176/?partner=iliakan">Большая книга CSS, Дэвид Макфарланд</a></li>
|
||||
<li><a href="http://www.ozon.ru/context/detail/id/5510936/?partner=iliakan">CSS ручной работы, Дэн Седерхольм</a></li>
|
||||
</ul>
|
||||
|
||||
Дальнейшие статьи раздела не являются *учебником* CSS, поэтому пожалуйста, изучите эту технологию до них. Это *очерки для лучшей систематизации и дополнения* уже существующих знаний.
|
||||
290
03-more/11-css-for-js/02-css-units/article.md
Normal file
290
03-more/11-css-for-js/02-css-units/article.md
Normal file
|
|
@ -0,0 +1,290 @@
|
|||
# Единицы измерения: "px", "em", "rem", "%" и другие
|
||||
|
||||
В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину -- что и когда выбирать.
|
||||
|
||||
[cut]
|
||||
## Абсолютные: px
|
||||
|
||||
Пиксель `px` -- это самая базовая, абсолютная и окончательная единица измерения.
|
||||
|
||||
Количество пикселей задаётся в настроках [разрешения экрана](http://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D0%B7%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%B8%D0%B5_(%D0%BA%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%8F_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0), один `px` -- это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.
|
||||
|
||||
Пиксели могут быть дробными, например размер можно задать в `16.5px`. Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в `100px`, его нужно разделить на три части -- волей-неволей появляются `33.333...px`.
|
||||
|
||||
Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование. При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.
|
||||
|
||||
[compare]
|
||||
+Главное достоинство пикселя -- чёткость и понятность
|
||||
-Другие единицы измерения -- в некотором смысле "мощнее", они являются относительными и позволяют устанавливать соотношения между различными размерами
|
||||
[/compare]
|
||||
|
||||
|
||||
[warn header="Давно на свалке: `mm`, `cm`, `pt`, `pc`"]
|
||||
|
||||
Существуют также "производные" от пикселя единицы измерения: `mm`, `cm`, `pt` и `pc`, но они давно отправились на свалку истории.
|
||||
|
||||
Вот, если интересно, их значения:
|
||||
<ul>
|
||||
<li>`1mm` (мм) = `3.8px`</li>
|
||||
<li>`1cm` (см) = `38px`</li>
|
||||
<li>`1pt` (типографский пункт) = `4/3 px`</li>
|
||||
<li>`1pc` (типографская пика) = `16px`</li>
|
||||
</ul>
|
||||
Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.
|
||||
[/warn]
|
||||
|
||||
[smart header="Почему сантиметре `cm` содержится ровно 38 пикселей?"]
|
||||
В реальной жизни сантиметр -- это такой отрезок, эталон длины. А [пиксель](http://ru.wikipedia.org/wiki/%D0%9F%D0%B8%D0%BA%D1%81%D0%B5%D0%BB%D1%8C) может быть разным, в зависимости от экрана.
|
||||
|
||||
Но в формулах выше под пикселем понимается "сферический пиксель в вакууме", точка на "стандартизованном экране", характеристики которого описаны в [спецификации](http://www.w3.org/TR/CSS2/syndata.html#length-units).
|
||||
|
||||
Поэтому ни о каком соответствии `cm` реальному сантиметру здесь нет и речи. Полностью синтетическая и ненужная единица измерения.
|
||||
[/smart]
|
||||
|
||||
|
||||
## Относительно шрифта: em
|
||||
|
||||
**`1em` -- текущий размер шрифта.**
|
||||
|
||||
Можно брать любые пропорции от текущего шрифта: `2em`, `0.5em` и т.п.
|
||||
|
||||
**Размеры в `em` -- *относительные*, они определяются по текущему контексту.**
|
||||
|
||||
Например, давайте сравним `px` с `em` на таком примере:
|
||||
|
||||
```html
|
||||
<!--+ autorun height=80 -->
|
||||
<div style="font-size:24px">
|
||||
Страусы
|
||||
<div style="font-size:24px">Живут также в Африке</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
`24` пикселей -- и в Африке `24` пикселей, поэтому две строчки выше одинаковы.
|
||||
|
||||
А вот аналогичный пример с `em` вместо `px`:
|
||||
|
||||
```html
|
||||
<!--+ autorun height=120 -->
|
||||
<div style="font-size:1.5em">
|
||||
Страусы
|
||||
<div style="font-size:1.5em">Живут также в Африке</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Так как значение в `em` высчитывается относительно *текущего шрифта*, то вторая строка в `1.5` раза больше, чем первая.
|
||||
|
||||
**Выходит, задавая размеры в `em`, мы задаём зависимость элементов от стиля родителя. Хочется увеличить или уменьшить всё вместе -- легко, просто поправим один стиль.**
|
||||
|
||||
|
||||
[smart header="Также относительно шрифта: `ex`, `ch`"]
|
||||
В спецификации указаны также единицы [ex](http://www.w3.org/TR/css3-values/#ex-unit) и [ch](http://www.w3.org/TR/css3-values/#ch-unit) ), которые означают размер в зависимости от таких характеристик шрифта как размер символа `"x"` и размер символа `"0"`.
|
||||
|
||||
Эти размеры присутствуют всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква `"x"` и ноль `"0"`.
|
||||
|
||||
Эти единицы используются чрезвычайно редко, так как "размер шрифта" `em` обычно вполне подходит.
|
||||
[/smart]
|
||||
|
||||
## Проценты %
|
||||
|
||||
**Проценты `%`, как и `em` -- относительные единицы.**
|
||||
|
||||
Вот пример с `%`, он выглядит в точности так же, как с `em`:
|
||||
|
||||
```html
|
||||
<!--+ autorun height=120 -->
|
||||
<div style="font-size:150%">
|
||||
Страусы
|
||||
<div style="font-size:150%">Живут также в Африке</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Когда мы говорим "процент", то возникает вопрос -- "Процент от чего?"
|
||||
|
||||
**Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.**
|
||||
|
||||
Это очень важная особенность процентов, про которую, увы, часто забывают.
|
||||
|
||||
Отличный источник информации по этой теме -- стандарт, [Visual formatting model details](http://www.w3.org/TR/CSS2/visudet.html).
|
||||
|
||||
Некоторые примеры:
|
||||
<ul>
|
||||
<li>При установке свойства `margin-left` в `%`, процент берётся от *ширины* родительского блока (а вовсе не от его `margin-left`!)</li>
|
||||
<li>При установке свойства `line-height` в `%`, процент берётся от текущего *размера шрифта* (а вовсе не от текущего `line-height`!)</li>
|
||||
<li>Для `width/height` при `position:fixed`, процент берётся от ширины/высоты *окна* (а не родителя и не документа).</li>
|
||||
<li>Кроме того, иногда `%` требует соблюдения дополнительных условий, за примером -- обратитесь к статье [](/height-percent).</li>
|
||||
<li>Детали по `line-height` и размеру шрифта вы также можете найти в статье [](/font-size-line-height).</li>
|
||||
</ul>
|
||||
|
||||
## Микс px и em: rem
|
||||
|
||||
Итак, что у нас есть:
|
||||
<ul>
|
||||
<li>`px` -- абсолютные, чёткие, понятные, не зависящие ни от чего.</li>
|
||||
<li>`em` -- относительно размера шрифта.</li>
|
||||
<li>`%` -- относительно такого же свойства родителя (а может и не родителя, а может и не такого же -- см. оговорки выше).</li>
|
||||
</ul>
|
||||
|
||||
Может быть, пора уже остановиться, может этого достаточно?
|
||||
|
||||
Э-э, нет! Не все вещи делаются удобно.
|
||||
|
||||
Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки "Шрифт больше" и "Шрифт меньше". При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.
|
||||
|
||||
Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде [key Ctrl++], но они работают слишком тупо -- берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А надо увеличить, к примеру, только шрифт, потому что посетитель хочет комфортнее читать. И увеличенный шрифт по-новому обтечёт элементы страницы.
|
||||
|
||||
Какую единицу использовать для задания шрифтов? Лучше бы не `px`, ведь такие значения абслютны, если менять, то везде, вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.
|
||||
|
||||
Следующие кандидаты -- `em` и `%`.
|
||||
|
||||
Разницы между ними здесь нет, так как при задании `font-size` в процентах, эти проценты берутся от `font-size` родителя, то есть ведут себя так же, как и `em`.
|
||||
|
||||
Вроде бы, использовать можно, однако есть проблема.
|
||||
|
||||
Посмотрите на пример с вложенными `<li>`:
|
||||
|
||||
```html
|
||||
<!--+ run autorun -->
|
||||
<style>
|
||||
li {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ul>
|
||||
<li>Собака
|
||||
<ul>
|
||||
<li>бывает
|
||||
<ul>
|
||||
<li>кусачей
|
||||
<ul>
|
||||
<li>только
|
||||
<ul>
|
||||
<li>от жизни
|
||||
<ul>
|
||||
<li>собачей</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Проблема очевидна. Хотели, как лучше, а получилось... Мелковато. Каждый `<li>` получил размер шрифта `0.8` от внешнего, это не совсем то, чего мы бы здесь хотели.
|
||||
|
||||
Время появиться единице `rem`, которая, можно сказать, придумана для таких случаев!
|
||||
|
||||
**Единица `rem` задаёт размер относительно размера шрифта элемента `<html>`.**
|
||||
|
||||
Как правило, браузеры ставят этому элементу некоторый "разумный" (reasonable) размер по-умолчанию, который мы, конечно, можем переопределить и использовать `rem` для задания шрифтов внутри:
|
||||
|
||||
```html
|
||||
<!--+ run height=400 autorun -->
|
||||
<style>
|
||||
*!*
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
li {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
*/!*
|
||||
</style>
|
||||
|
||||
<div><button id="up">Кликните, чтобы увеличить размер шрифта</button></div>
|
||||
|
||||
<img src="http://js.cx/clipart/angry_dog.png">
|
||||
|
||||
<ul>
|
||||
<li>Собака
|
||||
<ul>
|
||||
<li>бывает
|
||||
<ul>
|
||||
<li>кусачей
|
||||
<ul>
|
||||
<li>только
|
||||
<ul>
|
||||
<li>от жизни
|
||||
<ul>
|
||||
<li>собачей</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
var html = document.documentElement;
|
||||
up.onclick = function() {
|
||||
// при помощи JS увеличить размер шрифта html на 2px
|
||||
html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px';
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
Получилось удобное масштабирование для шрифтов, не влияющее на другие элементы.
|
||||
|
||||
Можно воспринимать `rem` как остановку посередине между `em` и `px`, потому что элементы в `rem` не зависят друг от друга и от контекста -- и этим похожи на `px`, а с другой стороны они все заданы относительно размера шрифта `<html>`.
|
||||
|
||||
[warn header="Не поддерживается в IE8-"]
|
||||
Единица `rem` не поддерживается в IE8-. Для этих браузеров, которых становится всё меньше, есть два выхода:
|
||||
<ol>
|
||||
<li>Либо использовать `em` и правила, страхующие от вложенности, вроде:
|
||||
|
||||
```css
|
||||
li { font-size: 0.8em }
|
||||
li li { font-size: 0.8em }
|
||||
li li li { font-size: 0.8em }
|
||||
```
|
||||
|
||||
</li>
|
||||
<li>Либо сделать два правила в стилях: первое указывает размер в `px` (для IE8-), а второе -- в `rem` (переопределит первое в современных браузерах) и отключить маштабирование шрифтов для IE8-. Это проще.</li>
|
||||
</ol>
|
||||
[/warn]
|
||||
|
||||
## Относительно экрана: vw, vh, vmin, vmax
|
||||
|
||||
Во всех современных браузерах, исключая IE8-, поддерживаются новые единицы из черновика стандарта [CSS Values and Units 3](http://dev.w3.org/csswg/css3-values/):
|
||||
|
||||
<ul>
|
||||
<li>`vw` -- 1% ширины окна</li>
|
||||
<li>`vh` -- 1% высоты окна</li>
|
||||
<li>`vmin` -- наименьшее из (`vw`, `vh`), в IE9 обозначается `vm`</li>
|
||||
<li>`vmax` -- наибольшее из (`vw`, `vh`)</li>
|
||||
</ul>
|
||||
|
||||
**Эти значения были созданы, в первую очередь, для поддержки мобильных устройств.**
|
||||
|
||||
Их основное преимущество -- в том, что любые размеры, которые в них заданы, автоматически масштабируются при изменении размеров окна.
|
||||
|
||||
Ниже написан текст с размером `5vh`:
|
||||
|
||||
<p style="font-size:5vh">Страусы кусачими не бывают.</p>
|
||||
|
||||
**Вы сможете легко увидеть, как работает `vh`, если поменяете размер окна браузера. Текст будет расти/уменьшаться.**
|
||||
|
||||
## Итого
|
||||
|
||||
Мы рассмотрели единицы измерения:
|
||||
|
||||
<ul>
|
||||
<li>`px` -- абсолютные пиксели, к которым привязаны и потому не нужны `mm`, `cm`, `pt` и `pc`. Используется для максимально конкретного и точного задания размеров.</li>
|
||||
<li>`em` -- задаёт размер относительно шрифта родителя, можно относительно конкретных символов: `"x"`(`ex`) и `"0"`(`ch`), используется там, где нужно упростить масштабирование компоненты.</li>
|
||||
<li>`rem` -- задаёт размер относительно шрифта `<html>`, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в `rem`, а JS меняет шрифт у `<html>`.</li>
|
||||
<li>`%` -- относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты.</li>
|
||||
<li>`vw`, `vh`, `vmin`, `vmax` -- относительно размера экрана.</li>
|
||||
</ul>
|
||||
|
||||
Здесь я постарался разобрать их применение и преимущества для решения конкретных задач, но вы, конечно, сможете использовать их для других ситуаций.
|
||||
265
03-more/11-css-for-js/03-display/article.md
Normal file
265
03-more/11-css-for-js/03-display/article.md
Normal file
|
|
@ -0,0 +1,265 @@
|
|||
# Все значения свойства "display"
|
||||
|
||||
Свойство `display` имеет много разных значений. Обычно, используются только три из них: `none`, `inline` и `block`, потому что когда-то браузеры другие не поддерживали.
|
||||
|
||||
Но, после прихода IE7 и, особенно, IE8+, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.
|
||||
|
||||
## Значение none
|
||||
|
||||
Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.
|
||||
|
||||
```html
|
||||
<!--+ autorun -->
|
||||
<div style="border:1px solid black">
|
||||
Невидимый div (
|
||||
<div style="*!*display: none*/!*">Я - невидим!</div>
|
||||
) Стоит внутри скобок
|
||||
</div>
|
||||
```
|
||||
|
||||
## Значение block
|
||||
|
||||
<ul>
|
||||
<li>**Блочные элементы располагаются один над другим, вертикально** (если нет особых свойств позиционирования, например `float`).</li>
|
||||
<li>**Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.**</li>
|
||||
</ul>
|
||||
|
||||
Это значение `display` многие элементы имеют по умолчанию: `DIV`, заголовок, параграф.
|
||||
|
||||
```html
|
||||
<!--+ autorun -->
|
||||
<div style="border:1px solid black">
|
||||
<div style="border: 1px solid blue; width: 50%">Первый</div>
|
||||
<div style="border: 1px solid red">Второй</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Блоки прилегают друг к другу вплотную, если у них нет `margin`.
|
||||
|
||||
## Значение inline
|
||||
|
||||
<ul>
|
||||
<li>**Элементы располагаются на той же строке, последовательно.**</li>
|
||||
<li>**Ширина и высота элемента определяются по содержимому. Поменять их нельзя.**</li>
|
||||
</ul>
|
||||
|
||||
Например, инлайновые элементы по умолчанию: `SPAN`, ссылка.
|
||||
|
||||
```html
|
||||
<!--+ autorun -->
|
||||
<span style="border:1px solid black">
|
||||
<span style="border: 1px solid blue; width:50%">Ширина</span>
|
||||
<a style="border: 1px solid red">Игнорируется</a>
|
||||
</span>
|
||||
```
|
||||
|
||||
Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними `SPAN` и `A` есть пробел. Это потому, что он есть в HTML.
|
||||
|
||||
Если расположить элементы вплотную -- его не будет:
|
||||
|
||||
```html
|
||||
<!--+ autorun -->
|
||||
<span style="border:1px solid black">
|
||||
<span style="border: 1px solid blue; width:50%">Без</span><a style="border: 1px solid red">Пробела</a>
|
||||
</span>
|
||||
```
|
||||
|
||||
Содержимое инлайн-элемента может переноситься на другую строку.
|
||||
|
||||
При этом каждая строка в смысле отображения является отдельным прямоугольником ("line box"). **Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.**
|
||||
|
||||
Например:
|
||||
|
||||
```html
|
||||
<!--+ autorun -->
|
||||
...<span style="background: #DEB887">
|
||||
Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля
|
||||
Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля
|
||||
Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля
|
||||
</span>...
|
||||
```
|
||||
|
||||
**Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:**
|
||||
|
||||
```html
|
||||
<!--+ autorun -->
|
||||
<div style="border:1px solid black">
|
||||
<span style="border: 1px solid red">Инлайн</span>
|
||||
<div style="border: 1px solid blue; width:50%">Блок</div>
|
||||
<span style="border: 1px solid red">Инлайн</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Значение inline-block
|
||||
|
||||
Это значение -- означает элемент, который продолжает находиться в строке (`inline`), но при этом может иметь важные свойства блока.
|
||||
|
||||
Как и инлайн-элемент:
|
||||
<ul>
|
||||
<li>**Располагается в строке.**</li>
|
||||
<li>**Размер устанавливается по содержимому.**</li>
|
||||
</ul>
|
||||
|
||||
Во всём остальном -- это блок, то есть:
|
||||
<ul>
|
||||
<li>**Элемент всегда прямоугольный.**</li>
|
||||
<li>**Работают свойства `width/height`.**</li>
|
||||
</ul>
|
||||
|
||||
Это значение `display` используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.
|
||||
|
||||
Например:
|
||||
|
||||
```html
|
||||
<!--+ autorun -->
|
||||
<style>
|
||||
li {
|
||||
*!*
|
||||
display: inline-block;
|
||||
*/!*
|
||||
list-style: none;
|
||||
border: 1px solid red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ul style="border:1px solid black; padding:0">
|
||||
<li>Инлайн Блок<br>3 строки<br>высота/ширина явно не заданы</li>
|
||||
<li style="width:100px;height:100px">Инлайн<br>Блок 100x100</li>
|
||||
<li style="width:60px;height:60px">Инлайн<br>Блок 60x60</li>
|
||||
<li style="width:100px;height:60px">Инлайн<br>Блок 100x60</li>
|
||||
<li style="width:60px;height:100px">Инлайн<br>Блок 60x100</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Свойство `vertical-align` позволяет выровнять такие элементы внутри внешнего блока:
|
||||
|
||||
```html
|
||||
<!--+ autorun -->
|
||||
<style>
|
||||
li {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
border: 1px solid red;
|
||||
*!*
|
||||
vertical-align: middle;
|
||||
*/!*
|
||||
}
|
||||
</style>
|
||||
|
||||
<ul style="border:1px solid black; padding:0">
|
||||
<li>Инлайн Блок<br>3 строки<br>высота/ширина явно не заданы</li>
|
||||
<li style="width:100px;height:100px">Инлайн<br>Блок 100x100</li>
|
||||
<li style="width:60px;height:60px">Инлайн<br>Блок 60x60</li>
|
||||
<li style="width:100px;height:60px">Инлайн<br>Блок 100x60</li>
|
||||
<li style="width:60px;height:100px">Инлайн<br>Блок 60x100</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript -- их не будет.
|
||||
|
||||
**IE7 допускает это значение только для элементов, которые по умолчанию `inline`.**
|
||||
|
||||
## Значения table-*
|
||||
|
||||
**Современные браузеры (не IE6,7) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения `display`.**
|
||||
|
||||
Для таблицы целиком `table`, для строки -- `table-row`, для ячейки -- `table-cell` и т.д.
|
||||
|
||||
Пример использования:
|
||||
|
||||
```html
|
||||
<!--+ run autorun -->
|
||||
<form style="display: *!*table*/!*">
|
||||
<div style="display: *!*table-row*/!*">
|
||||
<label style="display: *!*table-cell*/!*">Имя:</label>
|
||||
<input style="display: *!*table-cell*/!*">
|
||||
</div>
|
||||
<div style="display: *!*table-row*/!*">
|
||||
<label style="display: *!*table-cell*/!*">Фамилия:</label>
|
||||
<input style="display: *!*table-cell*/!*">
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, [описанные в стандарте](http://www.w3.org/TR/CSS2/tables.html#width-layout).
|
||||
|
||||
**Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.**
|
||||
|
||||
С точки зрения современного CSS, обычные `TABLE`, `TR`, `TD` и т.д. -- это просто элементы с предопределёнными значениями `display`:
|
||||
|
||||
```css
|
||||
table { display: table }
|
||||
tr { display: table-row }
|
||||
thead { display: table-header-group }
|
||||
tbody { display: table-row-group }
|
||||
tfoot { display: table-footer-group }
|
||||
col { display: table-column }
|
||||
colgroup { display: table-column-group }
|
||||
td, th { display: table-cell }
|
||||
caption { display: table-caption }
|
||||
```
|
||||
|
||||
Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт [CSS 2.1 - Tables](http://www.w3.org/TR/CSS2/tables.html).
|
||||
|
||||
### Вертикальное центрирование с table-cell
|
||||
|
||||
Внутри ячеек свойство [vertical-align](http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align) выравнивает содержимое по вертикали.
|
||||
|
||||
Это можно использовать для центрирования:
|
||||
|
||||
```html
|
||||
<!--+ run autorun -->
|
||||
<style>
|
||||
div { border: 1px solid black }
|
||||
</style>
|
||||
|
||||
<div style="height:100px; *!*display: table-cell; vertical-align: middle*/!*">
|
||||
<div>Элемент<br>С неизвестной<br>Высотой</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
CSS не требует, чтобы вокруг `table-cell` была структура таблицы: `table-row` и т.п. Может быть просто такой одинокий `DIV`, это допустимо.
|
||||
|
||||
При этом он ведёт себя как ячейка `TD`, то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи `vertical-align`.
|
||||
|
||||
Значение `display: table-cell` поддерживается во всех браузерах, кроме IE<8. В IE6,7 можно использовать для центрирования CSS-выражения или реальную таблицу.
|
||||
|
||||
## Значения list-item и run-in
|
||||
|
||||
У свойства `display` есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:
|
||||
|
||||
<dl>
|
||||
<dt>`list-item`</dt>
|
||||
<dd>Этот display по умолчанию используется для элементов списка. Он добавляет к блоку содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:
|
||||
|
||||
```html
|
||||
<!--+ autorun -->
|
||||
<div style="*!*display: list-item*/!*; list-style:inside square">Пункт 1</div>
|
||||
```
|
||||
|
||||
</dd>
|
||||
<dt>`run-in`</dt>
|
||||
<dd>Если после `run-in` идёт `block`, то `run-in` становится его первым инлайн-элементом, то есть отображается в начале `block`.
|
||||
|
||||
Если ваш браузер поддерживает это значение,** то примере ниже `h3`, благодаря `display:run-in`, окажется визуально внутри `div`:
|
||||
|
||||
```html
|
||||
<!--+ autorun -->
|
||||
<h3 style="*!*display: run-in*/!*; border: 2px solid red">Про пчёл.</h3>
|
||||
<div style="border: 2px solid black">Пчёлы - отличные создания, они делают мёд.</div>
|
||||
```
|
||||
|
||||
Если же вы видите две строки, то ваш браузер НЕ поддерживает `run-in`.
|
||||
|
||||
Вот, для примера, правильный вариант отображения `run-in`, оформленный другим кодом:
|
||||
|
||||
```html
|
||||
<!--+ autorun -->
|
||||
<div style="border: 2px solid black">
|
||||
<h3 style="display: inline; border: 2px solid red">Про пчёл.</h3>Пчёлы - отличные создания, они делают мёд.
|
||||
</div>
|
||||
```
|
||||
|
||||
Если этот вариант отличается от того, что вы видите выше -- ваш браузер не поддерживает `run-in`. На момент написания этой статьи только IE поддерживал `display:run-in`.
|
||||
</dd>
|
||||
</dl>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
|
|
@ -0,0 +1,44 @@
|
|||
# Наводящие вопросы
|
||||
|
||||
<ol>
|
||||
<li>Что произойдёт, если контейнеру `UL` поставить рамку `border` -- в первом и во втором случае?</li>
|
||||
<li>Что будет, если элементы `LI` различаются по размеру? Будут ли они корректно перенесены на новую строку в обоих случаях?</li>
|
||||
<li>Как будут вести себя блоки, находящиеся под галереей?</ul>
|
||||
</ol>
|
||||
|
||||
# Ответы
|
||||
|
||||
Разница колоссальная.
|
||||
|
||||
В первую очередь она в том, что `inline-block` продолжают участвовать в потоке, а `float` -- нет.
|
||||
|
||||
Ответы на вопросы по примеру:
|
||||
|
||||
<dl>
|
||||
<dt>Что будет, если контейнеру `UL` поставить рамку `border`?</dt>
|
||||
<dd>Контейнер не выделяет пространство под `float`. А больше там ничего нет. В результате он просто сожмётся в одну линию сверху.
|
||||
|
||||
Попробуйте сами, добавьте рамку в [edit src="solution"]песочнице[/edit].
|
||||
|
||||
А в случае с `inline-block` всё будет хорошо, т.к. элементы остаются в потоке.
|
||||
</dd>
|
||||
<dt>Что будет, если элементы `LI` различаются по размеру? Будут ли они корректно перенесены на новую строку в обоих случаях?</dt>
|
||||
<dd>При `float:left` элементы двигаются направо до тех пор, пока не наткнутся на границу внешнего блока (с учётом `padding`) или на другой `float`-элемент.
|
||||
|
||||
Может получиться вот так:
|
||||
|
||||
<img src="gallery-float-diffsize.png">
|
||||
|
||||
Вы можете увидеть это, открыв демо-галерею в отдельном окне и изменяя его размер:
|
||||
|
||||
[demo src="solution"]
|
||||
|
||||
При использовании `inline-block` таких странностей не будет, блоки перенесутся корректно на новую строку. И, кроме того, можно выровнять элементы по высоте при помощи `li { vertical-align:middle }`:
|
||||
|
||||
[iframe height=500 src="solution" link edit]
|
||||
</dd>
|
||||
<dt>Как будут вести себя блоки, находящиеся под галереей?</dt>
|
||||
<dd>В случае с `float` нужно добавить дополнительную очистку с `clear`, чтобы поведение было идентично обычному блоку.
|
||||
|
||||
Иначе блоки, находящиеся под галереей, вполне могут "заехать" по вертикали на территорию галереи.</dd>
|
||||
</dl>
|
||||
1
03-more/11-css-for-js/04-float/01-inline-block-vs-float/solution/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/01-inline-block-vs-float/solution/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"gallery-float","plunk":"XwI8ymszoonTImR6CwcY"}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"name":"gallery-float-diffsize","plunk":"muXiXpqrv6D1H1eMZTyX"}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.gallery li {
|
||||
float: left;
|
||||
width: 130px;
|
||||
|
||||
list-style: none;
|
||||
|
||||
/* красивости */
|
||||
border: 1px solid black;
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.gallery li:nth-child(2n) {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul class="gallery">
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/1.png" width="130" height="130">
|
||||
<div>Картинка 1</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/2.png" width="130" height="130">
|
||||
<div>Картинка 2</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/3.png" width="130" height="130">
|
||||
<div>Картинка 3</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/4.png" width="130" height="130">
|
||||
<div>Картинка 4</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/5.png" width="130" height="130">
|
||||
<div>Картинка 5</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/6.png" width="130" height="130">
|
||||
<div>Картинка 6</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/7.png" width="130" height="130">
|
||||
<div>Картинка 7</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/8.png" width="130" height="130">
|
||||
<div>Картинка 8</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/9.png" width="130" height="130">
|
||||
<div>Картинка 9</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"name":"gallery-float","plunk":"XwI8ymszoonTImR6CwcY"}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.gallery li {
|
||||
float: left;
|
||||
width: 130px;
|
||||
|
||||
list-style: none;
|
||||
|
||||
/* красивости */
|
||||
border: 1px solid black;
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul class="gallery">
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/1.png" width="130" height="130">
|
||||
<div>Картинка 1</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/2.png" width="130" height="130">
|
||||
<div>Картинка 2</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/3.png" width="130" height="130">
|
||||
<div>Картинка 3</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/4.png" width="130" height="130">
|
||||
<div>Картинка 4</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/5.png" width="130" height="130">
|
||||
<div>Картинка 5</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/6.png" width="130" height="130">
|
||||
<div>Картинка 6</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/7.png" width="130" height="130">
|
||||
<div>Картинка 7</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/8.png" width="130" height="130">
|
||||
<div>Картинка 8</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/9.png" width="130" height="130">
|
||||
<div>Картинка 9</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"name":"gallery-inline-block","plunk":"COpVO2ksZf8Y2yK68Ktp"}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.gallery li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
width: 130px;
|
||||
|
||||
list-style: none;
|
||||
|
||||
/* красивости */
|
||||
border: 1px solid black;
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.gallery li:nth-child(2n) {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul class="gallery">
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/1.png" width="130" height="130">
|
||||
<div>Картинка 1</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/2.png" width="130" height="130">
|
||||
<div>Картинка 2</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/3.png" width="130" height="130">
|
||||
<div>Картинка 3</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/4.png" width="130" height="130">
|
||||
<div>Картинка 4</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/5.png" width="130" height="130">
|
||||
<div>Картинка 5</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/6.png" width="130" height="130">
|
||||
<div>Картинка 6</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
72
03-more/11-css-for-js/04-float/01-inline-block-vs-float/solution/index.html
Executable file
72
03-more/11-css-for-js/04-float/01-inline-block-vs-float/solution/index.html
Executable file
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.gallery li {
|
||||
float: left;
|
||||
width: 130px;
|
||||
|
||||
list-style: none;
|
||||
|
||||
/* красивости */
|
||||
border: 1px solid black;
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul class="gallery">
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/1.png" width="130" height="130">
|
||||
<div>Картинка 1</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/2.png" width="130" height="130">
|
||||
<div>Картинка 2</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/3.png" width="130" height="130">
|
||||
<div>Картинка 3</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/4.png" width="130" height="130">
|
||||
<div>Картинка 4</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/5.png" width="130" height="130">
|
||||
<div>Картинка 5</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/6.png" width="130" height="130">
|
||||
<div>Картинка 6</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/7.png" width="130" height="130">
|
||||
<div>Картинка 7</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/8.png" width="130" height="130">
|
||||
<div>Картинка 8</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/9.png" width="130" height="130">
|
||||
<div>Картинка 9</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
# Разница inline-block и float
|
||||
|
||||
[importance 5]
|
||||
|
||||
Галерея изображений состоит из картинок в рамках с подписями (возможно, с другой дополнительной информацией).
|
||||
|
||||
Пример галереи:
|
||||
[iframe src="solution" link edit].
|
||||
|
||||
Технически вывод такой галереи можно реализовать при помощи списка UL/LI, где:
|
||||
<ol>
|
||||
<li>каждый LI имеет `display:inline-block`</li>
|
||||
<li>каждый LI имеет `float:left`</li>
|
||||
</ol>
|
||||
|
||||
**Какие различия между этими подходами? Какой вариант выбрали бы вы?**
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
Для решения можно применить принцип двухколоночной верстки `float` + `margin`. Иконка будет левой колонкой, а содержимое -- правой.
|
||||
|
||||
[edit src="solution"/]
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"name":"tree","plunk":"3oXkeuCyBNatBJNAAZKj"}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.open .icon {
|
||||
cursor: pointer;
|
||||
background: url(http://js.cx/sprite-tree/minus.gif);
|
||||
}
|
||||
|
||||
.closed .icon {
|
||||
cursor: pointer;
|
||||
background: url(http://js.cx/sprite-tree/plus.gif);
|
||||
}
|
||||
|
||||
.leaf .icon {
|
||||
cursor: text;
|
||||
background: url(http://js.cx/sprite-tree/article.gif);
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
.text {
|
||||
margin: 6px 0 6px 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
<li class="open">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1<br>(занимает две строки)</div>
|
||||
<ul>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1.1</div>
|
||||
</li>
|
||||
<li class="leaf">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Страница 1.2<br>(занимает две строки)</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 2<br>(занимает две строки)</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"name":"tree","plunk":"3oXkeuCyBNatBJNAAZKj"}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.open .icon {
|
||||
cursor: pointer;
|
||||
background: url(http://js.cx/sprite-tree/minus.gif);
|
||||
}
|
||||
|
||||
.closed .icon {
|
||||
cursor: pointer;
|
||||
background: url(http://js.cx/sprite-tree/plus.gif);
|
||||
}
|
||||
|
||||
.leaf .icon {
|
||||
cursor: text;
|
||||
background: url(http://js.cx/sprite-tree/article.gif);
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
.text {
|
||||
margin: 6px 0 6px 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
<li class="open">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1<br>(занимает две строки)</div>
|
||||
<ul>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1.1</div>
|
||||
</li>
|
||||
<li class="leaf">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Страница 1.2<br>(занимает две строки)</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 2<br>(занимает две строки)</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
# Дерево с многострочными узлами
|
||||
|
||||
[importance 3]
|
||||
|
||||
Сделайте дерево при помощи семантической вёрстки и CSS-спрайта с иконками (есть готовый).
|
||||
|
||||
Выглядеть должно так (не кликабельно):
|
||||
|
||||
[iframe src="solution" border="1" height=200 link edit]
|
||||
|
||||
<ul>
|
||||
<li>Поддержка многострочных названий узлов</li>
|
||||
<li>Над иконкой курсор становится указателем.</li>
|
||||
</ul>
|
||||
|
||||
Исходный документ содержит список UL/LI и ссылку на картинку.
|
||||
|
||||
[edit task src="task"/]
|
||||
|
||||
P.S. Достаточно сделать HTML/CSS-структуру, действия добавим позже.
|
||||
1
03-more/11-css-for-js/04-float/02-tree-with-multiline-nodes/task/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/02-tree-with-multiline-nodes/task/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"tree-src","plunk":"eWXR21aaVq8oMFlJewKd"}
|
||||
39
03-more/11-css-for-js/04-float/02-tree-with-multiline-nodes/task/index.html
Executable file
39
03-more/11-css-for-js/04-float/02-tree-with-multiline-nodes/task/index.html
Executable file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
/* ваш стиль */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- картинки для узлов -->
|
||||
<img src="http://js.cx/sprite-tree/minus.gif" width="16" height="16">
|
||||
<img src="http://js.cx/sprite-tree/plus.gif" width="16" height="16">
|
||||
<img src="http://js.cx/sprite-tree/article.gif" width="16" height="16">
|
||||
|
||||
|
||||
<ul>
|
||||
<li class="open">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1<br>(занимает две строки)</div>
|
||||
<ul>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1.1</div>
|
||||
</li>
|
||||
<li class="leaf">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Страница 1.2<br>(занимает две строки)</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 2<br>(занимает две строки)</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
03-more/11-css-for-js/04-float/03-paginator-css/nav-div-wrong/arrow-left.jpg
Executable file
BIN
03-more/11-css-for-js/04-float/03-paginator-css/nav-div-wrong/arrow-left.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
03-more/11-css-for-js/04-float/03-paginator-css/nav-div-wrong/arrow-right.jpg
Executable file
BIN
03-more/11-css-for-js/04-float/03-paginator-css/nav-div-wrong/arrow-right.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
39
03-more/11-css-for-js/04-float/03-paginator-css/nav-div-wrong/index.html
Executable file
39
03-more/11-css-for-js/04-float/03-paginator-css/nav-div-wrong/index.html
Executable file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.nav {
|
||||
height: 40px;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
.nav .left {
|
||||
float: left;
|
||||
border:1px solid black;
|
||||
}
|
||||
.nav .right {
|
||||
float: right;
|
||||
border:1px solid black;
|
||||
}
|
||||
.nav .pages {
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
border:1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Текст Сверху
|
||||
|
||||
<div class="nav">
|
||||
<img src="http://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
|
||||
<div class="pages">1 2 3 4 5 6 7 8 9</div>
|
||||
<img src="http://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
|
||||
</div>
|
||||
|
||||
Текст Снизу
|
||||
</body>
|
||||
</html>
|
||||
|
||||
99
03-more/11-css-for-js/04-float/03-paginator-css/solution.md
Normal file
99
03-more/11-css-for-js/04-float/03-paginator-css/solution.md
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
HTML-структура:
|
||||
|
||||
```html
|
||||
<div class="nav">
|
||||
<img src="arrow-left.jpg" class="left" width="40" height="40">
|
||||
<img src="arrow-right.jpg" class="right" width="40" height="40">
|
||||
<ul class="pages"> <li>...</li> </ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
Стили:
|
||||
|
||||
```css
|
||||
.nav {
|
||||
height: 40px;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.nav .left {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav .right {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav .pages {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav .pages li {
|
||||
display: inline;
|
||||
margin: 0 3px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
```
|
||||
|
||||
Основные моменты:
|
||||
<ul>
|
||||
<li>**Сначала идёт левая кнопка, затем правая, а лишь затем -- текст.**
|
||||
Почему так, а не лево - центр - право?
|
||||
|
||||
Дело в том, что `float` смещает элемент вправо относительно обычного места. А какое обычное место будет у правого `IMG` без `float`?
|
||||
|
||||
Оно будет под списком, так как список -- блочный элемент, а `IMG` -- инлайн-элемент. При добавлении `float:right` элемент `IMG` сдвинется вправо, оставшись под списком.
|
||||
|
||||
Код в порядке лево-центр-право (неправильный):
|
||||
|
||||
```html
|
||||
<div...>
|
||||
<img src="arrow-left.jpg" class="left" width="40" height="40">
|
||||
<ul class="pages"> (li) 1 2 3 4 5 6 7 8 9</ul>
|
||||
<img src="arrow-right.jpg" class="right" width="40" height="40">
|
||||
</div>
|
||||
```
|
||||
|
||||
Его демо:
|
||||
[iframe src="nav-div-wrong" border=1 height="140"]
|
||||
Правильный порядок: лево-право-центр, тогда `float` останется на верхней строке.
|
||||
|
||||
Код, который даёт правильное отображение:
|
||||
|
||||
```html
|
||||
<div ...>
|
||||
<img src="arrow-left.jpg" class="left" width="40" height="40">
|
||||
<img src="arrow-right.jpg" class="right" width="40" height="40">
|
||||
<ul class="pages"> .. список .. </ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
Также можно расположить стрелки при помощи `position: absolute`. Тогда, чтобы текст при уменьшении размеров окна не налез на стрелки -- нужно добавить в контейнер левый и правый `padding`:
|
||||
|
||||
Выглядеть будет примерно так:
|
||||
|
||||
```html
|
||||
<div style="position:relative; padding: 0 40px;">
|
||||
<img style="position:absolute;left:0" src="..left.." width="40" height="40">
|
||||
<ul> (li) 1 2 3 4 5 6 7 8 9 </ul>
|
||||
<img style="position:absolute;right:0" srr="..right.." width="40" height="40">
|
||||
</div>
|
||||
```
|
||||
|
||||
</li>
|
||||
|
||||
<li>**Центрирование одной строки по вертикали осуществляется указанием `line-height`, равной высоте.**
|
||||
|
||||
Это красиво лишь для одной строки: если окно становится слишком узким, и строка вдруг разбивается на две -- получается некрасиво, хотя и читаемо.
|
||||
|
||||
Если хочется сделать красивее для двух строк, то можно использовать другой способ центрирования.</li>
|
||||
</ul>
|
||||
|
||||
[edit src="solution"]Полное решение[/edit]
|
||||
1
03-more/11-css-for-js/04-float/03-paginator-css/solution/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/03-paginator-css/solution/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"nav-div","plunk":"CoVT0ZW1UJ33PuKyIyjk"}
|
||||
61
03-more/11-css-for-js/04-float/03-paginator-css/solution/index.html
Executable file
61
03-more/11-css-for-js/04-float/03-paginator-css/solution/index.html
Executable file
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.nav {
|
||||
height: 40px;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.nav .left {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav .right {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav .pages {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav .pages li {
|
||||
display: inline;
|
||||
margin: 0 3px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Текст Сверху
|
||||
|
||||
<div class="nav">
|
||||
<img src="http://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
|
||||
<img src="http://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
|
||||
<ul class="pages">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
<li>7</li>
|
||||
<li>8</li>
|
||||
<li>9</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Текст Снизу
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
03-more/11-css-for-js/04-float/03-paginator-css/solution/nav-div/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/03-paginator-css/solution/nav-div/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"nav-div","plunk":"CoVT0ZW1UJ33PuKyIyjk"}
|
||||
61
03-more/11-css-for-js/04-float/03-paginator-css/solution/nav-div/index.html
Executable file
61
03-more/11-css-for-js/04-float/03-paginator-css/solution/nav-div/index.html
Executable file
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.nav {
|
||||
height: 40px;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.nav .left {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav .right {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav .pages {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav .pages li {
|
||||
display: inline;
|
||||
margin: 0 3px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Текст Сверху
|
||||
|
||||
<div class="nav">
|
||||
<img src="http://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
|
||||
<img src="http://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
|
||||
<ul class="pages">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
<li>7</li>
|
||||
<li>8</li>
|
||||
<li>9</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Текст Снизу
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
19
03-more/11-css-for-js/04-float/03-paginator-css/task.md
Normal file
19
03-more/11-css-for-js/04-float/03-paginator-css/task.md
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
# Постраничная навигация (CSS)
|
||||
|
||||
[importance 5]
|
||||
|
||||
Оформите навигацию, центрированную внутри `DIV'а`:
|
||||
|
||||
[iframe src="solution" height="100" border="1"]
|
||||
|
||||
Требования:
|
||||
<ul>
|
||||
<li>Левая стрелка -- слева, правая -- справа, список страниц -- по центру.</li>
|
||||
<li>Список страниц центрирован вертикально.</li>
|
||||
<li>Текст сверху и снизу ни на что не наползает.</li>
|
||||
<li>Курсор при наведении на стрелку или элемент списка становится стрелкой `pointer`.</li>
|
||||
</ul>
|
||||
|
||||
[edit src="task" task/]
|
||||
|
||||
P.S. Без использования таблиц.
|
||||
1
03-more/11-css-for-js/04-float/03-paginator-css/task/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/03-paginator-css/task/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"nav-src","plunk":"6OneoKKw4jEaGQdyBJsQ"}
|
||||
39
03-more/11-css-for-js/04-float/03-paginator-css/task/index.html
Executable file
39
03-more/11-css-for-js/04-float/03-paginator-css/task/index.html
Executable file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.nav {
|
||||
height: 40px;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
/* ваш код */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Текст Сверху
|
||||
|
||||
<div class="nav">
|
||||
<img src="http://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
|
||||
|
||||
<ul class="pages">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
<li>7</li>
|
||||
<li>8</li>
|
||||
<li>9</li>
|
||||
</ul>
|
||||
|
||||
<img src="http://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
|
||||
</div>
|
||||
Текст Снизу
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
# Подсказка
|
||||
|
||||
Используйте свойство `box-sizing`.
|
||||
|
||||
# Решение
|
||||
|
||||
Да, можно -- указываем `box-sizing: border-box` и добавляем свойства:
|
||||
|
||||
```html
|
||||
<!--+ run -->
|
||||
<style>
|
||||
.left {
|
||||
float:left;
|
||||
width:30%;
|
||||
background: #aef;
|
||||
}
|
||||
|
||||
.right {
|
||||
float:right;
|
||||
width:70%;
|
||||
|
||||
*!*
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
|
||||
border-left: 2px solid green;
|
||||
padding-left: 10px;
|
||||
*/!*
|
||||
|
||||
background: tan;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="left">
|
||||
Левая<br>Колонка
|
||||
</div>
|
||||
<div class="right">
|
||||
Правая<br>Колонка<br>...
|
||||
</div>
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
# Добавить рамку, сохранив ширину
|
||||
|
||||
[importance 4]
|
||||
|
||||
Есть две колонки `30%/70%`:
|
||||
|
||||
```html
|
||||
<!--+ autorun run play -->
|
||||
<style>
|
||||
.left {
|
||||
float:left;
|
||||
width:30%;
|
||||
background: #aef;
|
||||
}
|
||||
|
||||
.right {
|
||||
float:right;
|
||||
width:70%;
|
||||
background: tan;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="left">
|
||||
Левая<br>Колонка
|
||||
</div>
|
||||
<div class="right">
|
||||
Правая<br>Колонка<br>...
|
||||
</div>
|
||||
```
|
||||
|
||||
**Добавьте к правой колонке рамку `border-left` и отступ `padding-left`.**
|
||||
|
||||
Двухколоночная вёрстка при этом не должна сломаться!
|
||||
|
||||
Желательно не трогать свойство `width` ни слева ни справа и не создавать дополнительных элементов.
|
||||
|
||||
Требуется поддержка всех современных браузеров, IE начиная с версии 8.
|
||||
468
03-more/11-css-for-js/04-float/article.md
Normal file
468
03-more/11-css-for-js/04-float/article.md
Normal file
|
|
@ -0,0 +1,468 @@
|
|||
# Свойство "float"
|
||||
|
||||
Свойство `float` в CSS занимает особенное место. До его появления расположить два блока один слева от другого можно было лишь при помощи таблиц. Но в его работе есть ряд особенностей. Поэтому его иногда не любят, но при их понимании `float` станет вашим верным другом и помощником.
|
||||
|
||||
Далее мы рассмотрим, как работает `float`, разберём решения сопутствующих проблем, а также ряд полезных рецептов.
|
||||
|
||||
[cut]
|
||||
|
||||
## Как работает float [#float-algorithm]
|
||||
|
||||
Синтаксис:
|
||||
|
||||
```css
|
||||
float: left | right | none | inherit;
|
||||
```
|
||||
|
||||
При применении этого свойства происходит следующее:
|
||||
|
||||
<ol>
|
||||
<li>Элемент позиционируется как обычно, а затем *вынимается из <strike>документа</strike> потока* и сдвигается влево (для `left`) или вправо (для `right`) до того как коснётся либо границы родителя, либо другого элемента с `float`.</li>
|
||||
<li>Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться.</li>
|
||||
<li>Другие непозиционированные блочные элементы без `float` ведут себя так, как будто элемента с `float` нет, так как он убран из потока.</li>
|
||||
<li>Строки (inline-элементы), напротив, "знают" о `float` и обтекают элемент по сторонам.</li>
|
||||
</ol>
|
||||
|
||||
Ещё детали:
|
||||
<ol>
|
||||
<li>**Элемент при наличии `float` получает `display:block`.** То есть, указав элементу, у которого `display:inline` свойство `float: left/right`, мы автоматически сделаем его блочным. В частности, для него будут работать `width/height`.
|
||||
|
||||
Исключением являются некоторые редкие `display` наподобие `inline-table` и `run-in` (см. [Relationships between 'display', 'position', and 'float'](http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo))</li>
|
||||
<li>**Ширина `float`-блока определяется по содержимому.** (["CSS 2.1, 10.3.5"](http://www.w3.org/TR/CSS2/visudet.html#float-width)).</li>
|
||||
<li>**Вертикальные отступы `margin` элементов с `float` не сливаются с отступами соседей,** в отличие от обычных блочных элементов.</li>
|
||||
</ol>
|
||||
|
||||
Это пока только теория. Далее мы рассмотрим происходящее на примере.
|
||||
|
||||
### Текст с картинками
|
||||
|
||||
Одно из первых применений `float`, для которого это свойство когда-то было придумано -- это вёрстка текста с картинками, отжатыми влево или вправо.
|
||||
|
||||
Например, вот страница о Винни-Пухе с картинками, которым поставлено свойство `float`:
|
||||
|
||||
<img src="text.png">
|
||||
|
||||
Её HTML-код ([edit src="winnie"]открыть[/edit]) выглядит примерно так:
|
||||
|
||||
```html
|
||||
<img src="1.jpg" style="float:right">
|
||||
<p>Текст...</p>
|
||||
<p>Текст...</p>
|
||||
|
||||
<img src="2.jpg" style="float:left">
|
||||
<p>Текст...</p>
|
||||
|
||||
<img src="3.jpg" style="float:right">
|
||||
<p>Текст...</p>
|
||||
```
|
||||
|
||||
Каждая картинка, у которой есть `float`, обрабатывается в точности [по алгоритму](#float-algorithm), указанному выше.
|
||||
|
||||
Посмотрим, например, как выглядело бы начало текста без float:
|
||||
|
||||
[iframe src="winnie-nofloat" height=300 border=1 link edit]
|
||||
|
||||
|
||||
<ol>
|
||||
<li>Элемент `IMG` вынимается из <strike>документа</strike> потока. Иначе говоря, последующие блоки начинают вести себя так, как будто его нет, и заполняют освободившееся место (изображение для наглядности полупрозрачно):
|
||||
|
||||
[iframe src="winnie-nofloat-1" height=250 border=1 link edit]
|
||||
|
||||
</li>
|
||||
<li>Элемент `IMG` сдвигается максимально вправо(при `float:right`):
|
||||
|
||||
[iframe src="winnie-nofloat-2" height=250 border=1 link edit]
|
||||
|
||||
</li>
|
||||
<li>Строки, в отличие от блочных элементов, "чувствуют" `float` и уступают ему место, обтекая картинку слева:
|
||||
|
||||
[iframe src="winnie-nofloat-3" height=250 border=1 link edit]
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
При `float:left` -- всё то же самое, только `IMG` смещается влево (или не смещается, если он и так у левого края), а строки -- обтекают справа
|
||||
|
||||
|
||||
**Строки и инлайн-элементы смещаются, чтобы уступить место `float`. Обычные блоки -- ведут себя так, как будто элемента нет.**
|
||||
|
||||
Чтобы это увидеть, добавим параграфам фон и рамку, а также сделаем изображение немного прозрачным:
|
||||
|
||||
[iframe src="winnie-block-bg" height=300 border=1 link edit]
|
||||
|
||||
Как видно из рисунка, параграфы проходят "за" `float`. При этом строки в них о `float'ах` знают и обтекают их, поэтому соответствующая часть параграфа пуста.
|
||||
|
||||
|
||||
### Блок с float
|
||||
|
||||
Свойство `float` можно поставить любому элементу, не обязательно картинке. При этом элемент станет блочным.
|
||||
|
||||
Посмотрим, как это работает, на конкретной задаче -- сделать рамку с названием вокруг картинки с Винни.
|
||||
|
||||
HTML будет такой:
|
||||
|
||||
```html
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
*!*
|
||||
<div class="left-picture">
|
||||
<img src="winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
*/!*
|
||||
|
||||
<p>Текст...</p>
|
||||
```
|
||||
|
||||
..То есть, `div.left-picture` включает в себя картинку и заголовок к ней. Добавим стиль с `float`:
|
||||
|
||||
```css
|
||||
.left-picture {
|
||||
*!*
|
||||
float: left;
|
||||
*/!*
|
||||
|
||||
/* рамочка и отступ для красоты (не обязательно) */
|
||||
margin: 0 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
```
|
||||
|
||||
Результат:
|
||||
|
||||
[iframe src="winnie-block" height=300 border=1 link edit]
|
||||
|
||||
Заметим, что блок `div.left-picture` "обернул" картинку и текст под ней, а не растянулся на всю ширину. Это следствие того, что ширина блока с `float` определяется по содержимому.
|
||||
|
||||
## Очистка под float
|
||||
|
||||
Разберём еще одну особенность использования свойства `float`.
|
||||
|
||||
Для этого выведем персонажей из мультфильма "Винни-Пух". Цель:
|
||||
|
||||
[iframe src="winnie-clear-3" height=600 border=1 link edit]
|
||||
|
||||
Реализуем её, шаг за шагом.
|
||||
|
||||
### Шаг 1. Добавляем информацию
|
||||
|
||||
Попробуем просто добавить Сову после Винни-Пуха:
|
||||
|
||||
```html
|
||||
<h2>Винни-Пух</h2>
|
||||
<div class="left">Картинка</div>
|
||||
<p>..Текст о Винни..</p>
|
||||
|
||||
<h2>Сова</h2>
|
||||
<div class="left">Картинка</div>
|
||||
<p>..Текст о Сове..</p>
|
||||
```
|
||||
|
||||
Результат [edit src="winnie-clear-1"]такого кода[/edit] будет странным, но предсказуемым:
|
||||
|
||||
[iframe src="winnie-clear-1" border="1" height=500 link edit]
|
||||
|
||||
Произошло следующее:
|
||||
<ul>
|
||||
<li>**Заголовок `<h2>Сова</h2>` не заметил `float`** (он же блочный элемент) и расположился сразу после предыдущего параграфа `<p>..Текст о Винни..</p>`.</li>
|
||||
<li>После него идёт `float`-элемент -- картинка "Сова". Он был сдвинут влево. Согласно [алгоритму](#float-algorithm), он двигается до левой границы или до касания с другим `float`-элементом, что и произошло (картинка "Винни-Пух").</li>
|
||||
<li>Так как у совы `float:left`, то **последующий текст обтекает её справа**.</li>
|
||||
</ul>
|
||||
|
||||
### Шаг 2. Свойство clear
|
||||
|
||||
Мы, конечно же, хотели бы расположить заголовок "Сова" и остальную информацию ниже Винни-Пуха.
|
||||
|
||||
Для решения возникшей проблемы придумано свойство `clear`.
|
||||
|
||||
Синтаксис:
|
||||
|
||||
```css
|
||||
clear: left | right | both;
|
||||
```
|
||||
|
||||
Применение этого свойства сдвигает элемент вниз до тех пор, пока не закончатся `float'ы` слева/справа/с обеих сторон.
|
||||
|
||||
Применим его к заголовку `H2`:
|
||||
|
||||
```css
|
||||
h2 {
|
||||
clear: left;
|
||||
}
|
||||
```
|
||||
|
||||
Результат [edit src="winnie-clear-2"]получившегося кода[/edit] будет ближе к цели, но всё еще не идеален:
|
||||
|
||||
<img src="float-small-margin.png">
|
||||
|
||||
Элементы теперь в нужном порядке. Но куда пропал отступ `margin-top` у заголовка "Сова"?
|
||||
|
||||
Теперь заголовок "Сова" прилегает снизу почти вплотную к картинке, с учётом её `margin-bottom`, но без своего большого отступа `margin-top`.
|
||||
|
||||
Таково поведение свойства `clear`. Оно сдвинуло элемент `h2` вниз ровно настолько, чтобы элементов `float` не было *сбоку от его верхней границы*.
|
||||
|
||||
Если посмотреть на элемент заголовка внимательно в инструментах разработчика, то можно заметить отступ `margin-top` у заголовка по-прежнему есть, но он располагается "за" элементом `float` и не учитывается при работе в `clear`.
|
||||
|
||||
Чтобы исправить ситуацию, можно добавить перед заголовком пустой промежуточный элемент без отступов, с единственным свойством `clear:both`. Тогда уже под ним отступ заголовка будет работать нормально:
|
||||
|
||||
```html
|
||||
<h2>Винни-Пух</h2>
|
||||
<div class="left">Картинка</div>
|
||||
<p>Текст</p>
|
||||
|
||||
*!*
|
||||
<div style="clear:both"></div>
|
||||
*/!*
|
||||
|
||||
<h2>Сова</h2>
|
||||
<div class="left">Картинка</div>
|
||||
<p>Текст</p>
|
||||
```
|
||||
|
||||
Результат [edit src="winnie-clear-3"]получившегося кода[/edit]:
|
||||
|
||||
[iframe src="winnie-clear-3" border="1" height=600 link edit]
|
||||
|
||||
<ul>
|
||||
<li>Свойство `clear` гарантировало, что `<div style="clear:both">` будет под картинкой с `float`.</li>
|
||||
<li>Заголовок `<h2>Сова</h2>` идёт после этого `<div>`. Так что его отступ учитывается.</li>
|
||||
</ul>
|
||||
|
||||
## Заполнение блока-родителя
|
||||
|
||||
Итак, мы научились располагать другие элементы *под* `float`. Теперь рассмотрим следующую особенность.
|
||||
|
||||
**Из-за того, что блок с `float` удалён из потока, родитель не выделяет под него места.**
|
||||
|
||||
Например, выделим для информации о Винни-Пухе красивый элемент-контейнер `<div class="hero">`:
|
||||
|
||||
```html
|
||||
<div class="hero">
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">Картинка</div>
|
||||
|
||||
<p>Текст.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
Стиль контейнера:
|
||||
|
||||
```css
|
||||
.hero {
|
||||
background: #D2B48C;
|
||||
border: 1px solid red;
|
||||
}
|
||||
```
|
||||
|
||||
Результат [edit src="winnie-clear-4"]получившегося кода[/edit]:
|
||||
|
||||
[iframe src="winnie-clear-4" border="1" height=300 link edit]
|
||||
|
||||
Элемент с `float` оказался выпавшим за границу родителя `.hero`.
|
||||
|
||||
Чтобы этого не происходило, используют одну из следующих техник.
|
||||
|
||||
### Поставить родителю float
|
||||
|
||||
**Элемент с `float` обязан расшириться, чтобы вместить вложенные `float`.**
|
||||
|
||||
Поэтому, если это допустимо, то установка `float` контейнеру всё исправит:
|
||||
|
||||
```css
|
||||
.hero {
|
||||
background: #D2B48C;
|
||||
border: 1px solid red;
|
||||
*!*
|
||||
float: left;
|
||||
*/!*
|
||||
}
|
||||
```
|
||||
|
||||
[iframe src="winnie-clearfill-float" border="1" height=300 link edit]
|
||||
|
||||
Разумеется, не всегда можно поставить родителю `float`, так что смотрим дальше.
|
||||
|
||||
### Добавить в родителя элемент с clear
|
||||
|
||||
Добавим элемент `div style="clear:both"` в самый конец контейнера `.hero`.
|
||||
|
||||
Он с одной стороны будет "нормальным" элементом, в потоке, и контейнер будет обязан выделить под него пространство, с другой -- он знает о `float` и сместится вниз.
|
||||
|
||||
Соответственно, и контейнер вырастет в размере:
|
||||
|
||||
```html
|
||||
<div class="hero">
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">Картинка</div>
|
||||
|
||||
<p>Текст.</p>
|
||||
|
||||
*!*
|
||||
<div style="clear:both"></div>
|
||||
*/!*
|
||||
</div>
|
||||
```
|
||||
|
||||
Результат -- правильное отображение, как и в примере выше. [edit src="winnie-clearfill-div"]Открыть код[/edit].
|
||||
|
||||
Единственный недостаток этого метода -- лишний HTML-элемент в разметке.
|
||||
|
||||
### Универсальный класс clearfix
|
||||
|
||||
Чтобы не добавлять в HTML-код лишний элемент, можно задать его через `:after`.
|
||||
|
||||
```css
|
||||
.clearfix:after {
|
||||
content: "."; /* добавить содержимое: "." */
|
||||
display: block; /* сделать блоком, т.к. inline не может иметь clear */
|
||||
clear: both; /* с обеих сторон clear */
|
||||
visibility: hidden; /* сделать невидимым, зачем нам точка внизу? */
|
||||
height: 0; /* сделать высоту 0, чтобы не занимал место */
|
||||
}
|
||||
```
|
||||
|
||||
Добавив этот класс к родителю, получим тот же результат, что и выше. [edit src="winnie-clearfill-clearfix"]Открыть код[/edit].
|
||||
|
||||
Псевдоселектор `:after` не поддерживается в IE<8, но для старых IE сработает другое свойство:
|
||||
|
||||
```css
|
||||
.clearfix {
|
||||
zoom: 1; /* спец-свойство IE */
|
||||
}
|
||||
```
|
||||
|
||||
### overflow:auto/hidden
|
||||
|
||||
Если добавить родителю `overflow: hidden` или `overflow: auto`, то всё станет хорошо.
|
||||
|
||||
```css
|
||||
.hero {
|
||||
*!*
|
||||
overflow: auto;
|
||||
*/!*
|
||||
}
|
||||
```
|
||||
|
||||
Этот метод работает во всех браузерах. [edit src="winnie-clearfill-overflow"]Открыть код[/edit].
|
||||
|
||||
Несмотря на внешнюю странность, этот способ не является "хаком". Такое поведение прописано в спецификации CSS.
|
||||
|
||||
Однако, установка `overflow` может привести к появлению полосы прокрутки, способ с дополнительным элементом (или `.clearfix:after`, если без IE<8) более безопасен.
|
||||
|
||||
|
||||
## Еще применения float
|
||||
|
||||
Одно применение -- для верстки текста, мы уже видели. Рассмотрим ещё несколько.
|
||||
|
||||
### Галерея
|
||||
|
||||
При помощи `float` можно сделать галерею изображений:
|
||||
|
||||
```html
|
||||
<ul class="gallery">
|
||||
|
||||
<li>
|
||||
<img src="1.png" width="130" height="130">
|
||||
<div>Картинка 1</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="2.png" width="130" height="130">
|
||||
<div>Картинка 2</div>
|
||||
</li>
|
||||
...
|
||||
</ul>
|
||||
```
|
||||
|
||||
Стиль:
|
||||
|
||||
```css
|
||||
.gallery li {
|
||||
float: left;
|
||||
width: 130px;
|
||||
list-style: none;
|
||||
}
|
||||
```
|
||||
|
||||
Элементы `float:left` двигаются влево, а если это невозможно, то вниз, автоматически адаптируясь под ширину контейнера.
|
||||
|
||||
Результат:
|
||||
|
||||
[iframe src="gallery-float" border="1" height=550 link edit]
|
||||
|
||||
|
||||
|
||||
### Вёрстка в несколько колонок
|
||||
|
||||
Свойство `float` позволяет делать несколько вертикальных колонок.
|
||||
|
||||
### float:left + float:right
|
||||
|
||||
Например, для вёрстки в две колонки можно сделать два `<div>`. Первому указать `float:left` (левая колонка), а второму -- `float:right` (правая колонка).
|
||||
|
||||
Чтобы они не ссорились, каждой колонке нужно дополнительно указать ширину:
|
||||
|
||||
```html
|
||||
<div>Шапка</div>
|
||||
<div class="column-left">Левая колонка</div>
|
||||
<div class="column-right">Правая колонка</div>
|
||||
<div class="footer">Низ</div>
|
||||
```
|
||||
|
||||
Стили:
|
||||
|
||||
```css
|
||||
.column-left {
|
||||
float: left;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.column-right {
|
||||
float: left;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
clear: both;
|
||||
}
|
||||
```
|
||||
|
||||
Результат (добавлены краски):
|
||||
[iframe src="two-columns" border="1" height=440 link edit]
|
||||
|
||||
В эту структуру легко добавить больше колонок с разной шириной. Правой колонке можно было бы указать и `float:right`.
|
||||
|
||||
### float + margin
|
||||
|
||||
Ещё вариант -- сделать `float` для левой колонки, а правую оставить в потоке, но с отбивкой через `margin`:
|
||||
|
||||
```css
|
||||
.column-left {
|
||||
float: left;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.column-right {
|
||||
margin-left: 30%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
clear: both;
|
||||
}
|
||||
```
|
||||
|
||||
Результат (добавлены краски):
|
||||
[iframe src="two-columns-2" border="1" height=440 link edit]
|
||||
|
||||
В примере выше -- показана небольшая проблема. Колонки не растягиваются до одинаковой высоты. Конечно, это не имеет значения, если фон одинаковый, но что, если он разный?
|
||||
|
||||
Технически, нет кросс-браузерного CSS-способа сделать, чтобы они растягивались. Есть различные обходы и трюки, которые позволяют обойти проблему в ряде ситуаций, но они выходят за рамки нашего обсуждения. Если интересно -- посмотрите, например, [Faux Columns](http://goodline.spb.ru/III-05-002.html).
|
||||
|
||||
Техник построения структуры страницы и колонок ("CSS layout") очень много. Более подробно вы можете с ними познакомиться в книгах и продвинутых статьях, либо просто придумать самому на основе того, как работает `float`.
|
||||
|
||||
|
||||
|
||||
BIN
03-more/11-css-for-js/04-float/float-small-margin.png
Executable file
BIN
03-more/11-css-for-js/04-float/float-small-margin.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
1
03-more/11-css-for-js/04-float/gallery-float/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/gallery-float/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"gallery-float","plunk":"XwI8ymszoonTImR6CwcY"}
|
||||
72
03-more/11-css-for-js/04-float/gallery-float/index.html
Executable file
72
03-more/11-css-for-js/04-float/gallery-float/index.html
Executable file
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.gallery li {
|
||||
float: left;
|
||||
width: 130px;
|
||||
|
||||
list-style: none;
|
||||
|
||||
/* красивости */
|
||||
border: 1px solid black;
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul class="gallery">
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/1.png" width="130" height="130">
|
||||
<div>Картинка 1</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/2.png" width="130" height="130">
|
||||
<div>Картинка 2</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/3.png" width="130" height="130">
|
||||
<div>Картинка 3</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/4.png" width="130" height="130">
|
||||
<div>Картинка 4</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/5.png" width="130" height="130">
|
||||
<div>Картинка 5</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/6.png" width="130" height="130">
|
||||
<div>Картинка 6</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/7.png" width="130" height="130">
|
||||
<div>Картинка 7</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/8.png" width="130" height="130">
|
||||
<div>Картинка 8</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="http://js.cx/carousel/9.png" width="130" height="130">
|
||||
<div>Картинка 9</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
03-more/11-css-for-js/04-float/text.png
Executable file
BIN
03-more/11-css-for-js/04-float/text.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
1
03-more/11-css-for-js/04-float/two-columns-2/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/two-columns-2/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"two-columns-2","plunk":"X1QW1sWkIHNPSDAXjvH6"}
|
||||
67
03-more/11-css-for-js/04-float/two-columns-2/index.html
Executable file
67
03-more/11-css-for-js/04-float/two-columns-2/index.html
Executable file
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.column-left {
|
||||
float: left;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.column-right {
|
||||
margin-left: 30%;
|
||||
width: 70%;
|
||||
overflow: auto; /* расшириться вниз захватить float'ы */
|
||||
}
|
||||
|
||||
.footer {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.inner {
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="background:yellow">Шапка</div>
|
||||
|
||||
<div class="column-left" style="background:#aef">
|
||||
<div class="inner"> <!-- див для отступа внутри ширины родителя -->
|
||||
<h3>Персонажи:</h3>
|
||||
<ul>
|
||||
<li>Винни-Пух</li>
|
||||
<li>Ослик Иа</li>
|
||||
<li>Сова</li>
|
||||
<li>Кролик</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-right" style="background:tan">
|
||||
<div class="inner">
|
||||
|
||||
<h3>Винни-Пух</h3>
|
||||
|
||||
<img src="http://js.cx/clipart/winnie-mult.jpg" style="float:left; margin: 0 1em .5em 0">
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer" style="background:yellow">Низ</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
03-more/11-css-for-js/04-float/two-columns/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/two-columns/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"two-columns","plunk":"b5viwb7EJ2sgO2opygek"}
|
||||
66
03-more/11-css-for-js/04-float/two-columns/index.html
Executable file
66
03-more/11-css-for-js/04-float/two-columns/index.html
Executable file
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.column-left {
|
||||
float: left;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.column-right {
|
||||
float: left;
|
||||
width: 70%;
|
||||
overflow: auto; /* расшириться вниз захватить float'ы */
|
||||
}
|
||||
|
||||
.footer {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.inner {
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="background:yellow">Шапка</div>
|
||||
|
||||
<div class="column-left" style="background:#aef">
|
||||
<div class="inner"> <!-- див для отступа внутри ширины родителя -->
|
||||
<h3>Персонажи:</h3>
|
||||
<ul>
|
||||
<li>Винни-Пух</li>
|
||||
<li>Ослик Иа</li>
|
||||
<li>Сова</li>
|
||||
<li>Кролик</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column-right" style="background:tan">
|
||||
<div class="inner">
|
||||
<h3>Винни-Пух</h3>
|
||||
|
||||
<img src="http://js.cx/clipart/winnie-mult.jpg" style="float:left; margin: 0 1em .5em 0">
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer" style="background:yellow">Низ</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
03-more/11-css-for-js/04-float/winnie-block-bg/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/winnie-block-bg/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"winnie-block-bg","plunk":"IgkCnUZ5R3q07tAb1WUw"}
|
||||
36
03-more/11-css-for-js/04-float/winnie-block-bg/index.html
Executable file
36
03-more/11-css-for-js/04-float/winnie-block-bg/index.html
Executable file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left-picture {
|
||||
float: left;
|
||||
|
||||
/* рамочка и центрирование */
|
||||
margin: 0 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
p {
|
||||
background: #aef;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150" style="float:right;opacity:0.8">
|
||||
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
03-more/11-css-for-js/04-float/winnie-block/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/winnie-block/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"winnie-block","plunk":"VHBwLRdOKbdcEf9dTPPV"}
|
||||
34
03-more/11-css-for-js/04-float/winnie-block/index.html
Executable file
34
03-more/11-css-for-js/04-float/winnie-block/index.html
Executable file
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left-picture {
|
||||
float: left;
|
||||
|
||||
/* рамочка и центрирование */
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left-picture">
|
||||
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века. </p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
03-more/11-css-for-js/04-float/winnie-clear-1/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/winnie-clear-1/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"winnie-clear-1","plunk":"nuCWCfR2sJETGgyK2NJR"}
|
||||
50
03-more/11-css-for-js/04-float/winnie-clear-1/index.html
Executable file
50
03-more/11-css-for-js/04-float/winnie-clear-1/index.html
Executable file
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
|
||||
/* для красоты */
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
h2 {
|
||||
background: #aef;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<h2>Сова</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="http://js.cx/clipart/owl-mult.jpg" width="200" height="233">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
|
||||
|
||||
<p>Говорит редко, но чрезвычайно мудро.</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1
03-more/11-css-for-js/04-float/winnie-clear-2/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/winnie-clear-2/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"winnie-clear-2","plunk":"9VdfUYmAI6Ojap3pMzUk"}
|
||||
51
03-more/11-css-for-js/04-float/winnie-clear-2/index.html
Executable file
51
03-more/11-css-for-js/04-float/winnie-clear-2/index.html
Executable file
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
|
||||
/* для красоты */
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
h2 {
|
||||
background: #aef;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<h2>Сова</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="http://js.cx/clipart/owl-mult.jpg" width="200" height="233">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
|
||||
|
||||
<p>Говорит редко, но чрезвычайно мудро.</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1
03-more/11-css-for-js/04-float/winnie-clear-3/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/winnie-clear-3/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"winnie-clear-3","plunk":"OXrPRNVOQLiGhKmnD8K6"}
|
||||
51
03-more/11-css-for-js/04-float/winnie-clear-3/index.html
Executable file
51
03-more/11-css-for-js/04-float/winnie-clear-3/index.html
Executable file
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
|
||||
/* для красоты */
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
h2 {
|
||||
background: #aef;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<div style="clear:both"></div>
|
||||
<h2>Сова</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="http://js.cx/clipart/owl-mult.jpg" width="200" height="233">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
|
||||
|
||||
<p>Говорит редко, но чрезвычайно мудро.</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1
03-more/11-css-for-js/04-float/winnie-clear-4/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/winnie-clear-4/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"winnie-clear-4","plunk":"cJnMu9ndC5OS2K0E4gSk"}
|
||||
41
03-more/11-css-for-js/04-float/winnie-clear-4/index.html
Executable file
41
03-more/11-css-for-js/04-float/winnie-clear-4/index.html
Executable file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
|
||||
/* для красоты */
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #D2B48C;
|
||||
border: 1px solid red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
<div class="hero">
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
03-more/11-css-for-js/04-float/winnie-clearfill-clearfix/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/winnie-clearfill-clearfix/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"winnie-clearfill-clearfix","plunk":"ekQG0HiUM7WrjGehIwF4"}
|
||||
55
03-more/11-css-for-js/04-float/winnie-clearfill-clearfix/index.html
Executable file
55
03-more/11-css-for-js/04-float/winnie-clearfill-clearfix/index.html
Executable file
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
|
||||
/* для красоты */
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #D2B48C;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
<div class="hero clearfix">
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
03-more/11-css-for-js/04-float/winnie-clearfill-div/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/winnie-clearfill-div/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"winnie-clearfill-div","plunk":"9j96Inb15YprTuhiAaIx"}
|
||||
43
03-more/11-css-for-js/04-float/winnie-clearfill-div/index.html
Executable file
43
03-more/11-css-for-js/04-float/winnie-clearfill-div/index.html
Executable file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
|
||||
/* для красоты */
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #D2B48C;
|
||||
border: 1px solid red;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
<div class="hero">
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
03-more/11-css-for-js/04-float/winnie-clearfill-float/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/winnie-clearfill-float/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"winnie-clearfill-float","plunk":"iBSEKP29QXTk79KhvpV2"}
|
||||
43
03-more/11-css-for-js/04-float/winnie-clearfill-float/index.html
Executable file
43
03-more/11-css-for-js/04-float/winnie-clearfill-float/index.html
Executable file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
|
||||
/* для красоты */
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #D2B48C;
|
||||
border: 1px solid red;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
<div class="hero">
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
03-more/11-css-for-js/04-float/winnie-clearfill-overflow/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/winnie-clearfill-overflow/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"winnie-clearfill-overflow","plunk":"azMzKhwmzWAlVZCT01pR"}
|
||||
45
03-more/11-css-for-js/04-float/winnie-clearfill-overflow/index.html
Executable file
45
03-more/11-css-for-js/04-float/winnie-clearfill-overflow/index.html
Executable file
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
|
||||
/* для красоты */
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #D2B48C;
|
||||
border: 1px solid red;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
<div class="hero clearfix">
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
03-more/11-css-for-js/04-float/winnie-nofloat-1/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/winnie-nofloat-1/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"winnie-nofloat-1","plunk":"gkYdKEPbeIRvjy1QQ4Ky"}
|
||||
26
03-more/11-css-for-js/04-float/winnie-nofloat-1/index.html
Executable file
26
03-more/11-css-for-js/04-float/winnie-nofloat-1/index.html
Executable file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
p { font-size: 80%; }
|
||||
|
||||
img {
|
||||
border: 1px solid black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<img src="http://js.cx/clipart/winnie-mult.jpg" style="position:absolute" width="200" height="150">
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
03-more/11-css-for-js/04-float/winnie-nofloat-2/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/winnie-nofloat-2/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"winnie-nofloat-2","plunk":"KI4RH5TmcIWZtAArfRsc"}
|
||||
26
03-more/11-css-for-js/04-float/winnie-nofloat-2/index.html
Executable file
26
03-more/11-css-for-js/04-float/winnie-nofloat-2/index.html
Executable file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
p { font-size: 80%; }
|
||||
|
||||
img {
|
||||
border: 1px solid black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<img src="http://js.cx/clipart/winnie-mult.jpg" style="position:absolute;right:0" width="200" height="150">
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
03-more/11-css-for-js/04-float/winnie-nofloat-3/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/winnie-nofloat-3/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"winnie-nofloat-3","plunk":"4jEyVLdfipJu6dWwy8E5"}
|
||||
25
03-more/11-css-for-js/04-float/winnie-nofloat-3/index.html
Executable file
25
03-more/11-css-for-js/04-float/winnie-nofloat-3/index.html
Executable file
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
p { font-size: 80%; }
|
||||
|
||||
img {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<img src="http://js.cx/clipart/winnie-mult.jpg" style="float:right" width="200" height="150">
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
03-more/11-css-for-js/04-float/winnie-nofloat/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/winnie-nofloat/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"winnie-nofloat","plunk":"adGOyV1fE4ZlVXs5jGAu"}
|
||||
25
03-more/11-css-for-js/04-float/winnie-nofloat/index.html
Executable file
25
03-more/11-css-for-js/04-float/winnie-nofloat/index.html
Executable file
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
p { font-size: 80%; }
|
||||
|
||||
img {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
03-more/11-css-for-js/04-float/winnie/.plnkr
Executable file
1
03-more/11-css-for-js/04-float/winnie/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"winnie","plunk":"LULyE1f0OQIqrWWogTr6"}
|
||||
47
03-more/11-css-for-js/04-float/winnie/index.html
Executable file
47
03-more/11-css-for-js/04-float/winnie/index.html
Executable file
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
img.right {
|
||||
float: right;
|
||||
margin: 5px 0 5px 10px;
|
||||
}
|
||||
|
||||
img.left {
|
||||
float: left;
|
||||
margin: 5px 10px 5px 0;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<img src="http://js.cx/clipart/winnie-mult.jpg" class="right" width="200" height="150">
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
<img src="http://js.cx/clipart/winnie-nazarov.jpg" class="left" width="200" height="201">
|
||||
|
||||
<p>Первый перевод «Винни-Пуха» в СССР вышел в 1958 году в Литве (лит. Mikė Pūkuotukas), его выполнил 20-летний литовский писатель Виргилюс Чепайтис, пользовавшийся польским переводом Ирены Тувим. Впоследствии Чепайтис, познакомившись с английским оригиналом, существенно переработал свой перевод, переиздававшийся в Литве неоднократно.</p>
|
||||
|
||||
<p>История Винни-Пуха в России начинается с того же 1958 года, когда с книгой познакомился Борис Владимирович Заходер.</p>
|
||||
|
||||
|
||||
<img src="http://js.cx/clipart/winnie-stamp.jpg" class="right" width="200" height="142">
|
||||
|
||||
<p>В студии «Союзмультфильм» под руководством Фёдора Хитрука было создано три мультфильма.</p>
|
||||
|
||||
<p>Сценарий написал Хитрук в соавторстве с Заходером; работа соавторов не всегда шла гладко, что стало в конечном счёте причиной прекращения выпуска мультфильмов (первоначально планировалось выпустить сериал по всей книге). Текст и картинки взяты с Wikipedia.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
Если использовать `position: absolute`, то `DIV` не растянется на всю высоту документа, т.к. координаты вычисляются *относительно окна*.
|
||||
|
||||
Можно, конечно, узнать эту высоту при помощи JavaScript, но CSS даёт более удобный способ. Будем использовать `position:fixed`:
|
||||
|
||||
Стиль:
|
||||
|
||||
```css
|
||||
#box {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
```
|
||||
|
||||
Свойство `z-index` должно превосходить все другие элементы управления, чтобы они перекрывались.
|
||||
|
||||
[edit src="solution"]Полный текст решения[/edit]
|
||||
1
03-more/11-css-for-js/05-position/01-modal-window/solution/.plnkr
Executable file
1
03-more/11-css-for-js/05-position/01-modal-window/solution/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"modal-div","plunk":"1XwnuuZFJvbjHV4Wjpbi"}
|
||||
45
03-more/11-css-for-js/05-position/01-modal-window/solution/index.html
Executable file
45
03-more/11-css-for-js/05-position/01-modal-window/solution/index.html
Executable file
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
/* модальный DIV, который всё перекрывает */
|
||||
#box {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999; /* нужно если в документе есть элементы с z-index > 0 */
|
||||
|
||||
background: #aef;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
p, button { margin: 35px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div id="box"></div>
|
||||
|
||||
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"name":"modal-div","plunk":"1XwnuuZFJvbjHV4Wjpbi"}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
/* модальный DIV, который всё перекрывает */
|
||||
#box {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999; /* нужно если в документе есть элементы с z-index > 0 */
|
||||
|
||||
background: #aef;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
p, button { margin: 35px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div id="box"></div>
|
||||
|
||||
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
17
03-more/11-css-for-js/05-position/01-modal-window/task.md
Normal file
17
03-more/11-css-for-js/05-position/01-modal-window/task.md
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
# Модальное окно
|
||||
|
||||
[importance 5]
|
||||
|
||||
Создайте при помощи HTML/CSS "модальное окно", то есть `DIV`, который полностью перекрывает документ и находится над ним.
|
||||
|
||||
При этом все элементы управления на документе перестают работать, т.к. клики попадают в `DIV`.
|
||||
|
||||
В примере ниже `DIV'у` дополнительно поставлен цвет фона и прозрачность, чтобы было видно перекрытие:
|
||||
|
||||
[iframe height=150 src="solution" border=1 link]
|
||||
|
||||
Браузеры: все основные, IE8+. Должно работать при прокрутке окна (проверьте).
|
||||
|
||||
[edit src="task" task/]
|
||||
|
||||
|
||||
1
03-more/11-css-for-js/05-position/01-modal-window/task/.plnkr
Executable file
1
03-more/11-css-for-js/05-position/01-modal-window/task/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"modal-div-src","plunk":"2XBHz061uXplmHQ81HzW"}
|
||||
39
03-more/11-css-for-js/05-position/01-modal-window/task/index.html
Executable file
39
03-more/11-css-for-js/05-position/01-modal-window/task/index.html
Executable file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
/* модальный DIV, который всё перекрывает */
|
||||
#box {
|
||||
/* ...ваш стиль... */
|
||||
background: #aef;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
p, button { margin: 35px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div id="box"></div>
|
||||
|
||||
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
374
03-more/11-css-for-js/05-position/article.md
Normal file
374
03-more/11-css-for-js/05-position/article.md
Normal file
|
|
@ -0,0 +1,374 @@
|
|||
# Свойство "position"
|
||||
|
||||
Свойство `position` позволяет сдвигать элемент со своего обычного места. Цель этой главы -- не только напомнить, как оно работает, но и разобрать ряд частых заблуждений и граблей.
|
||||
[cut]
|
||||
## position: static
|
||||
|
||||
*Статическое позиционирование* производится по умолчанию, в том случае, если свойство `position` не указано.
|
||||
|
||||
Его можно также явно указать через CSS-свойство:
|
||||
|
||||
```css
|
||||
position: static;
|
||||
```
|
||||
|
||||
Такая запись встречается редко и используется для переопределения других значений `position`.
|
||||
|
||||
Здесь и далее, для примеров мы будем использовать следующий документ:
|
||||
|
||||
```html
|
||||
<!--+ autorun height=200 -->
|
||||
<div style="background: #aef; width: 500px">
|
||||
Без позиционирования ("position: static").
|
||||
|
||||
<h2 style="background: #fee; margin: 0">Заголовок</h2>
|
||||
|
||||
<div>А тут - всякий разный текст... <br/>
|
||||
... В две строки!</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
В этом документе сейчас все элементы отпозиционированы статически, то есть никак.
|
||||
|
||||
[summary]
|
||||
Элемент с `position: static` еще называют *не позиционированым*.
|
||||
[/summary]
|
||||
|
||||
|
||||
## position: relative
|
||||
|
||||
*Относительное позиционирование* сдвигает элемент относительно его обычного положения.
|
||||
|
||||
Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство `position: relative` и координаты `left/right/top/bottom`.
|
||||
|
||||
Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:
|
||||
|
||||
```css
|
||||
position: relative;
|
||||
top: 10px;
|
||||
```
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<!--+ autorun height=200 -->
|
||||
*!*
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
*/!*
|
||||
|
||||
<div style="background: #aef; width: 500px">
|
||||
Заголовок сдвинут на 10px вниз.
|
||||
|
||||
<h2 style="background: #fee; margin: 0;">Заголовок</h2>
|
||||
|
||||
<div>А тут - всякий разный текст... <br/>
|
||||
... В две строки!</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Координаты
|
||||
|
||||
Для сдвига можно использовать координаты:
|
||||
|
||||
<ul>
|
||||
<li>`top` - сдвиг от "обычной" верхней границы</li>
|
||||
<li>`bottom` - сдвиг от нижней границы</li>
|
||||
<li>`left` - сдвиг слева</li>
|
||||
<li>`right` - сдвиг справа</li>
|
||||
</ul>
|
||||
|
||||
Не будут работать одновременно указанные `top` и `bottom`, `left` и `right`. Нужно использовать только одну границу из каждой пары.
|
||||
|
||||
**Возможны отрицательные координаты** и координаты, использующие другие единицы измерения. Например, `left: 10%` сдвинет элемент на 10% его ширины вправо, а `left: -10%` -- влево. При этом часть элемента может оказаться за границей окна:
|
||||
|
||||
```html
|
||||
<!--+ autorun height=200 -->
|
||||
*!*
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
left: -10%;
|
||||
}
|
||||
</style>
|
||||
*/!*
|
||||
|
||||
<div style="background: #aef; width: 500px">
|
||||
Заголовок сдвинут на 10% влево.
|
||||
|
||||
<h2 style="background: #fee; margin: 0;">Заголовок</h2>
|
||||
|
||||
<div>А тут - всякий разный текст... <br/>
|
||||
... В две строки!</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Свойства `left/top` не будут работать для `position:static`**. Если их все же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.
|
||||
|
||||
## position: absolute
|
||||
|
||||
Синтаксис:
|
||||
|
||||
```css
|
||||
position: absolute;
|
||||
```
|
||||
|
||||
Абсолютное позиционирование делает две вещи:
|
||||
<ol>
|
||||
<li>**Элемент исчезает с того места, где он должен быть и позиционируется заново.** Остальные элементы, располагаются так, как будто этого элемента никогда не было.</li>
|
||||
<li>**Координаты `top/bottom/left/right` для нового местоположения отсчитываются от ближайшего позиционированного родителя**, т.е. родителя с позиционированием, отличным от `static`. Если такого родителя нет -- то относительно документа.</li>
|
||||
</ol>
|
||||
|
||||
Кроме того:
|
||||
<ul>
|
||||
<li>**Ширина элемента с `position: absolute` устанавливается по содержимому.** Детали алгоритма вычисления ширины [описаны в стандарте](http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width).</li>
|
||||
<li>**Элемент получает `display:block`**, который перекрывает почти все возможные `display` (см. [Relationships between 'display', 'position', and 'float'](http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo)).</li>
|
||||
</ul>
|
||||
|
||||
Например, отпозиционируем заголовок в правом-верхнем углу документа:
|
||||
|
||||
```html
|
||||
<!--+ autorun height=200 -->
|
||||
*!*
|
||||
<style>
|
||||
h2 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
*/!*
|
||||
|
||||
<div style="background: #aef; width: 500px">
|
||||
Заголовок в правом-верхнем углу документа.
|
||||
|
||||
<h2 style="background: #fee; margin: 0;">Заголовок</h2>
|
||||
|
||||
<div>А тут - всякий разный текст... <br/>
|
||||
... В две строки!</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Важное отличие от `relative`: **так как элемент удаляется со своего обычного места, то элементы под ним сдвигаются, занимая освободившееся пространство**. Это видно в примере выше: строки идут одна за другой.
|
||||
|
||||
Так как при `position:absolute` размер блока устанавливается по содержимому, то
|
||||
широкий `Заголовок` "съёжился" до прямоугольника в углу.
|
||||
|
||||
Иногда бывает нужно поменять элементу `position` на `absolute`, но так, чтобы элементы вокруг не сдвигались. Как правило это делают, меняя соседей -- добавляют `margin/padding` или вставляют в документ пустой элемент с такими же размерами.
|
||||
|
||||
|
||||
[smart header="Одновременное указание `left/right`, `top/bottom`"]
|
||||
|
||||
**В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.**
|
||||
|
||||
Браузер растянет такой элемент до границ. Работает везде, кроме IE6:
|
||||
|
||||
```html
|
||||
<!--+ autorun height=50 -->
|
||||
<style>
|
||||
*!*
|
||||
div {
|
||||
position: absolute;
|
||||
left: 10px; right: 10px; top: 10px; bottom: 10px;
|
||||
}
|
||||
*/!*
|
||||
</style>
|
||||
<div style="background:#aef;text-align:center">10px от границ</div>
|
||||
```
|
||||
|
||||
[/smart]
|
||||
|
||||
|
||||
[smart header="Внешним блоком является окно"]
|
||||
Как растянуть абсолютно позиционированный блок на всю ширину документа?
|
||||
|
||||
Первое, что может прийти в голову:
|
||||
|
||||
```css
|
||||
div {
|
||||
position: absolute;
|
||||
left: 0; top: 0; /* в левый-верхний угол */
|
||||
width: 100%; height: 100%; /* .. и растянуть */
|
||||
}
|
||||
```
|
||||
|
||||
Но это будет работать лишь до тех пор, пока у страницы не появится скроллинг!
|
||||
|
||||
Прокрутите вниз ифрейм:
|
||||
[iframe src="position-100-wrong" height=200 link]
|
||||
|
||||
**Вы увидите, что голубой фон оканчивается задолго до конца документа.**
|
||||
|
||||
Дело в том, что в CSS `100%` относится к ширине внешнего блока ("containing block"). А какой внешний блок имеется в виду здесь, ведь элемент изъят со своего обычного места?
|
||||
|
||||
В данном случае им является так называемый (["\"initial containing block\""](http://www.w3.org/TR/CSS21/visudet.html#containing-block-details)), которым является окно, *а не документ*.
|
||||
|
||||
**То есть, координаты и ширины вычисляются относительно окна, а не документа.**
|
||||
|
||||
Может быть, получится так?
|
||||
|
||||
```css
|
||||
div {
|
||||
position: absolute;
|
||||
left: 0; top: 0; /* в левый-верхний угол, и растянуть.. */
|
||||
right: 0; bottom: 0; /* ..указанием противоположных границ */
|
||||
}
|
||||
```
|
||||
|
||||
С виду логично, но нет, не получится!
|
||||
|
||||
Координаты `top/right/left/bottom` вычисляются относительно *окна*. Значение `bottom: 0` -- нижняя граница окна, а не документа, блок растянется до неё. То есть, будет то же самое, что и в предыдущем примере.
|
||||
|
||||
[/smart]
|
||||
|
||||
|
||||
## position: absolute в позиционированном родителе
|
||||
|
||||
**Если у элемента есть позиционированный предок, то `position: absolute` работает относительно него, а не относительно документа.**
|
||||
|
||||
То есть, достаточно поставить родительскому `div` позицию `relative`, даже без координат -- и заголовок будет в его правом-верхнем углу, вот так:
|
||||
|
||||
```html
|
||||
<!--+ autorun height=200 -->
|
||||
*!*
|
||||
<style>
|
||||
h2 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
*/!*
|
||||
|
||||
<div style="background: #aef; width: 500px; *!*position: relative*/!*">
|
||||
Заголовок в правом-верхнем углу DIV'а.
|
||||
|
||||
<h2 style="background: #fee; margin: 0;">Заголовок</h2>
|
||||
|
||||
<div>А тут - всякий разный текст... <br/>
|
||||
... В две строки!</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Нужно пользоваться таким позиционированием с осторожностью, т.к оно может перекрыть текст. Этим оно отличается от `float`.
|
||||
|
||||
Сравните:
|
||||
<ul>
|
||||
<li>Используем `position` для размещения элемента управления:
|
||||
|
||||
```html
|
||||
<!--+ autorun height=80 -->
|
||||
<button style="position: absolute; right: 10px; opacity: 0.8">
|
||||
Кнопка
|
||||
</button>
|
||||
1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9
|
||||
1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9
|
||||
```
|
||||
|
||||
**Часть текста перекрывается.** Кнопка более не участвует в потоке.
|
||||
</li>
|
||||
<li>Используем `float` для размещения элемента управления:
|
||||
|
||||
```html
|
||||
<!--+ autorun height=80 -->
|
||||
<button style="float: right; margin-right: 10px; opacity: 0.8;">
|
||||
Кнопка
|
||||
</button>
|
||||
1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9
|
||||
1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9
|
||||
```
|
||||
|
||||
**Браузер освобождает место справа, текст перенесён.** Кнопка продолжает находиться в потоке, просто сдвинута.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
## position: fixed
|
||||
|
||||
Это подвид абсолютного позиционирования.
|
||||
|
||||
Синтаксис:
|
||||
|
||||
```css
|
||||
position: fixed;
|
||||
```
|
||||
|
||||
Позиционирует объект точно так же, как `absolute`, но относительно `window`.
|
||||
|
||||
Разница в нескольких словах:
|
||||
|
||||
**Когда страницу прокручивают, фиксированный элемент остается на своем месте и не прокручивается вместе со страницей.**
|
||||
|
||||
В следующем примере, при прокрутке документа, ссылка `#top` всегда остается на своем месте.
|
||||
|
||||
```html
|
||||
<!--+ autorun untrusted height=200 -->
|
||||
<style>
|
||||
*!*
|
||||
#top {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
background: #fee;
|
||||
}
|
||||
*/!*
|
||||
</style>
|
||||
|
||||
*!*<a href="#" id="top">Наверх (остается при прокрутке)</a>*/!*
|
||||
|
||||
Фиксированное позиционирование.
|
||||
|
||||
<p>Текст страницы.. Прокрути меня...</p>
|
||||
<p>Много строк..</p><p>Много строк..</p>
|
||||
<p>Много строк..</p><p>Много строк..</p>
|
||||
<p>Много строк..</p><p>Много строк..</p>
|
||||
<p>Много строк..</p><p>Много строк..</p>
|
||||
```
|
||||
|
||||
Поддерживается во всех современных браузерах, в IE начиная с версии 7. Для реализации аналогичного функционала в IE6 используют CSS-выражения.
|
||||
|
||||
|
||||
## Итого
|
||||
|
||||
Виды позиционирования и их особенности.
|
||||
|
||||
<dl>
|
||||
<dt>`static`</dt>
|
||||
<dd>Иначе называется "без позиционирования". В явном виде задаётся только если надо переопределить другое правило CSS.</dd>
|
||||
<dt>`relative`</dt>
|
||||
<dd>Сдвигает элемент относительно текущего места.
|
||||
|
||||
<ul>
|
||||
<li>Противоположные границы `left/right` (`top/bottom`) одновременно указать нельзя.</li>
|
||||
<li>Окружающие элементы ведут себя так, как будто элемент не сдвигался.</li>
|
||||
</ul>
|
||||
</dd>
|
||||
<dt>`absolute`</dt>
|
||||
<dd>Визуально переносит элемент на новое место.
|
||||
|
||||
Новое место вычисляется по координатам `left/top/right/bottom` относительно ближайшего позиционированного родителя. Если такого родителя нет, то им считается окно.
|
||||
|
||||
<ul>
|
||||
<li>Ширина элемента по умолчанию устанавливается по содержимому.</li>
|
||||
<li>Можно указать противположные границы `left/right` (`top/bottom`). Элемент растянется. Возможность не поддерживается в IE<8.</li>
|
||||
<li>Окружающие элементы заполняют освободившееся место.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</dd>
|
||||
<dt>`fixed`</dt>
|
||||
<dd>Подвид абсолютного позиционирования, при котором элемент привязывается к координатам окна, а не документа.
|
||||
|
||||
При прокрутке он остаётся на том же месте.</dd>
|
||||
</dl>
|
||||
|
||||
## Почитать
|
||||
|
||||
CSS-позиционирование по-настоящему глубоко в спецификации <a href="http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme">Visual Formatting Model, 9.3 и ниже</a>.
|
||||
|
||||
Еще есть хорошее руководство <a href="http://www.barelyfitz.com/screencast/html-training/css/positioning/">CSS Positioning in 10 steps</a>, которое охватывает основные типы позиционирования.
|
||||
|
||||
1
03-more/11-css-for-js/05-position/position-100-wrong/.plnkr
Executable file
1
03-more/11-css-for-js/05-position/position-100-wrong/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"position-100-wrong","plunk":"YHmNT0kTeX3uyjQyCem4"}
|
||||
17
03-more/11-css-for-js/05-position/position-100-wrong/index.html
Executable file
17
03-more/11-css-for-js/05-position/position-100-wrong/index.html
Executable file
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
width: 100%; height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="height:2000px">
|
||||
<div style="background:#aef;text-align:center">Прокрутите меня...</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
Сместим мяч в центр при помощи `left/top=50%`, а затем приподымем его указанием `margin`:
|
||||
|
||||
```css
|
||||
#ball {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -20px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
```
|
||||
|
||||
[edit src="solution"]Полный код решения[/edit]
|
||||
1
03-more/11-css-for-js/06-css-center/01-center-ball-css/solution/.plnkr
Executable file
1
03-more/11-css-for-js/06-css-center/01-center-ball-css/solution/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"ball-css","plunk":"YhrIoXAnr04KwNslT631"}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"name":"ball-css","plunk":"YhrIoXAnr04KwNslT631"}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#field {
|
||||
width: 200px;
|
||||
border: 10px groove black;
|
||||
background-color: #00FF00;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#ball {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -20px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div id="field">
|
||||
<img src="http://js.cx/clipart/ball.gif" id="ball">
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
31
03-more/11-css-for-js/06-css-center/01-center-ball-css/solution/index.html
Executable file
31
03-more/11-css-for-js/06-css-center/01-center-ball-css/solution/index.html
Executable file
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#field {
|
||||
width: 200px;
|
||||
border: 10px groove black;
|
||||
background-color: #00FF00;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#ball {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -20px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div id="field">
|
||||
<img src="http://js.cx/clipart/ball.gif" id="ball">
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
# Поместите мяч в центр поля (CSS)
|
||||
|
||||
[importance 5]
|
||||
|
||||
Поместите мяч в центр поля при помощи CSS.
|
||||
|
||||
Исходный код:
|
||||
[iframe height=200 src="task"]
|
||||
|
||||
Используйте CSS, чтобы поместить мяч в центр:
|
||||
[iframe height=200 src="solution"]
|
||||
|
||||
<ul>
|
||||
<li>CSS для центрирования может использовать размеры мяча.</li>
|
||||
<li>CSS для центрирования не должен опираться на конкретный размер поля.</li>
|
||||
</ul>
|
||||
|
||||
[edit src="task"]Исходный документ[/edit].
|
||||
|
||||
|
||||
1
03-more/11-css-for-js/06-css-center/01-center-ball-css/task/.plnkr
Executable file
1
03-more/11-css-for-js/06-css-center/01-center-ball-css/task/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"ball-src","plunk":"RgW11R4kwR8uJPdPOQjd"}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"name":"ball-src","plunk":"RgW11R4kwR8uJPdPOQjd"}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#field {
|
||||
width: 200px;
|
||||
border: 10px groove black;
|
||||
background-color: #00FF00;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#ball {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div id="field">
|
||||
<img src="http://js.cx/clipart/ball.gif" id="ball">
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
27
03-more/11-css-for-js/06-css-center/01-center-ball-css/task/index.html
Executable file
27
03-more/11-css-for-js/06-css-center/01-center-ball-css/task/index.html
Executable file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#field {
|
||||
width: 200px;
|
||||
border: 10px groove black;
|
||||
background-color: #00FF00;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#ball {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div id="field">
|
||||
<img src="http://js.cx/clipart/ball.gif" id="ball">
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
# Структура решения
|
||||
|
||||
Шаги решения:
|
||||
<ol><li>
|
||||
Для того, чтобы элементы окна не работали, их нужно перекрыть `DIV'ом` с большим `z-index`.</li>
|
||||
<li>Внутри него будет лежать "экран" с полупрозрачностью. Чтобы он растягивался, можно дать ему `position: absolute` и указать все координаты `top/left/right/bottom`. Это работает в IE8+.</li>
|
||||
<li>Форму можно отцентрировать при помощи `margin` или `display: table-cell` + `vertical-align` на внешнем `DIV`.</li>
|
||||
</ol>
|
||||
|
||||
# Решение
|
||||
|
||||
[edit src="solution"]Открыть в песочнице[/edit]
|
||||
1
03-more/11-css-for-js/06-css-center/02-form-modal/solution/.plnkr
Executable file
1
03-more/11-css-for-js/06-css-center/02-form-modal/solution/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"modal-login","plunk":"KyZ561hLR5xlkIOv0JyC"}
|
||||
69
03-more/11-css-for-js/06-css-center/02-form-modal/solution/index.html
Executable file
69
03-more/11-css-for-js/06-css-center/02-form-modal/solution/index.html
Executable file
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
/* внешний DIV перекрывает всё окно */
|
||||
#box {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* в нём находится полупрозрачный экран, на 20px меньше */
|
||||
#box-inner {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
bottom: 20px;
|
||||
background: blue;
|
||||
opacity: 0.3;
|
||||
filter: alpha(opacity=30);
|
||||
}
|
||||
|
||||
/* форма находится не в экране, а рядом с ним, чтобы не быть полупрозрачной */
|
||||
#box form {
|
||||
position: absolute;
|
||||
top: 0; bottom: 0; right: 0; left: 0; /* центрирование */
|
||||
margin: auto; /* центрирование */
|
||||
height: 120px;
|
||||
width: 300px;
|
||||
border: 1px solid black;
|
||||
padding: 5px 5px 5px 55px;
|
||||
background: url(http://js.cx/clipart/key.png) 3px 5px white no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="height:2000px">
|
||||
|
||||
<p>Текст Текст Текст</p>
|
||||
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
|
||||
<p>Текст Текст Текст</p>
|
||||
|
||||
|
||||
<div id="box">
|
||||
<div id="box-inner">
|
||||
</div>
|
||||
|
||||
<form>
|
||||
Добро пожаловать!
|
||||
<table>
|
||||
<tr><td>Логин</td><td><input></td></tr>
|
||||
<tr><td>Пароль</td><td><input></td></tr>
|
||||
<tr><td colspan="2"><input type="submit" value="Войти"></td></tr>
|
||||
</table>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"name":"modal-login","plunk":"KyZ561hLR5xlkIOv0JyC"}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
/* внешний DIV перекрывает всё окно */
|
||||
#box {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* в нём находится полупрозрачный экран, на 20px меньше */
|
||||
#box-inner {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
bottom: 20px;
|
||||
background: blue;
|
||||
opacity: 0.3;
|
||||
filter: alpha(opacity=30);
|
||||
}
|
||||
|
||||
/* форма находится не в экране, а рядом с ним, чтобы не быть полупрозрачной */
|
||||
#box form {
|
||||
position: absolute;
|
||||
top: 0; bottom: 0; right: 0; left: 0; /* центрирование */
|
||||
margin: auto; /* центрирование */
|
||||
height: 120px;
|
||||
width: 300px;
|
||||
border: 1px solid black;
|
||||
padding: 5px 5px 5px 55px;
|
||||
background: url(http://js.cx/clipart/key.png) 3px 5px white no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="height:2000px">
|
||||
|
||||
<p>Текст Текст Текст</p>
|
||||
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
|
||||
<p>Текст Текст Текст</p>
|
||||
|
||||
|
||||
<div id="box">
|
||||
<div id="box-inner">
|
||||
</div>
|
||||
|
||||
<form>
|
||||
Добро пожаловать!
|
||||
<table>
|
||||
<tr><td>Логин</td><td><input></td></tr>
|
||||
<tr><td>Пароль</td><td><input></td></tr>
|
||||
<tr><td colspan="2"><input type="submit" value="Войти"></td></tr>
|
||||
</table>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue