Веб-разработка. Верстка

1.

Веб-разработка
Лекция №3. Верстка.
Худяев Алексей Сергеевич
Тензор, 2016

2.

Предпосылки
2

3.

Предпосылки
Веб-страницы развиваются. Растут требования к
оформлению. Это уже не просто текстовый документ, это
менюшки, логотипы, баннеры, и прочее «оформление»
3

4.

Предпосылки
CSS еще не является основным средством оформления. Для
оформления используются
1. Многочисленные картинки
2. Атрибуты на тэгах
3. Для создания «сетки» используются таблицы
4. Для задания фиксированных размеров в сетке
использовали «спейсеры»
(http://en.wikipedia.org/wiki/Spacer_GIF)
4

5.

Предпосылки
5

6.

Предпосылки
Таблицы использовались даже для того, что бы сделать блок
со скругленными углами!
6

7.

Предпосылки
Недостатки:
1. Все в одной куче
2. Очень много кода
3. Трудно вносить изменения
4. Страдает индексация поисковиками
5. Страдает совместимость с устройствами
7

8.

Предпосылки
Что же делать? CSS!
1. Позволяет отделить стиль от оформления
2. Позволяет уменьшить размер сайта (в байтах)
3. Улучшается кэширование
4. Лучше для поисковиков
5. Разные представления для разных устройств. Выше
совместимость.
8

9.

CSS Box Model
9

10.

CSS Box Model
• Любой элемент на странице представляется
прямоугольным блоком или боксом.
• У любого бокса есть размеры
• Боксы можно вкладывать друг в друга
10

11.

CSS Box Model
11

12.

CSS Box Model
Область содержимого (область контента)
• Здесь располагается содержимое блока
(в т.ч. и вложенные блоки)
• На область контента распространяется
фон (если есть)
12

13.

CSS Box Model
Отступы (паддинги, padding)
• Промежуток между рамкой и областью
содержимого
• На отступ распространяется фон (если
он есть)
13

14.

CSS Box Model
Граница, рамка, бордер (border)
• Рамка блока
• Может иметь толщину но быть
прозрачной
14

15.

CSS Box Model
Границы, маржины (margin)
• Отступ от данного блока до
окружающих
15

16.

CSS Box Model
Размеры блока
• width
• height
Размерность НЕ включает в себя padding и border
16

17.

CSS Box Model
.box {
width: 200px;
padding: 20px;
border: 1px solid red;
margin: 15px;
}
Итоговая ширина: 200 + 20 * 2 + 1 *2 = 242px
17

18.

CSS Box Model
.box {
width: 100%;
padding: 20px;
border: 1px solid red;
margin: 15px;
}
???
18

19.

Позиционирование
19

20.

Позиционирование
4 типа позиционирования:
1. Static
2. Absolute
3. Relative
4. Fixed
20

21.

Позиционирование
Static
21

22.

Позиционирование
Absolute
22

23.

Позиционирование
Relative
23

24.

Позиционирование
Fixed
Так же, как и absolute, но НЕ скроллируется вместе со
страницей.
Если не влез, то «скрытую» часть никогда не увидеть.
Браузер не покажет для нее скролл.
24

25.

Координаты
25

26.

Координаты
При абсолютном и относительном позиционировании
(absolute и relative) можно управлять «координатами»
элемента.
.absBox {
left: 10px;
top: 20px;
}
26

27.

Координаты
При абсолютном и относительном позиционировании
(absolute и relative) можно управлять «координатами»
элемента.
.absBox {
right: 30px;
bottom: 50px;
}
27

28.

Координаты
При абсолютном и относительном позиционировании
(absolute и relative) можно управлять «координатами»
элемента.
.absBox {
left: 10px;
right: 30px;
top: 20px;
bottom: 50px;
}
28

29.

Координаты
При абсолютном и относительном позиционировании
(absolute и relative) можно управлять «координатами»
элемента.
.absBox {
left: 0;
right: 0;
top: 0;
bottom: 0;
}
29

30.

«Точка отсчета»
30

31.

«Точка отсчета»
Координаты для left, top, right, bottom рассчитываются от
ближайшего предка с позиционированием, отличным от
static.
Если такового нет – рассчитываются от окна.
Для этого часто используют position: relative без задания
каких-либо смещений.
31

32.

Поток
32

33.

Поток
Два основных типа боксов
• Блочные
• Строчные
Управление типом: свойство display
• Блочные == block
• Строчные == inline
33

34.

Поток
В чем разница?
Блочные:
1. Занимают всю ширину если не указано обратное
2. Высота рассчитывается по вложенным боксам если не
задано обратное
34

35.

Поток
В чем разница?
Строчные
1. Ширина и высота – строго по контенту
2. Не применяются вертикальные маржины и паддинги
35

36.

Поток
В потоке элементы стоят друг за другом.
Строчные без переносов.
Блочные – с переносом.
36

37.

Поток
<p>Строка</p>
<p>Строка с <strong>выделенным</strong> текстом</p>
Строка
Строка с выделенным текстом
37

38.

Поток
p { display: inline; }
Строка Строка с выделенным текстом
38

39.

Поток
p { display: inline; }
strong { display: block; }
Строка Строка с
выделенным
текстом
39

40.

Поток
Ширина блочного бокса по умолчанию рассчитывается
автоматически.
Блок будет занимать полную доступную ширину с учетом
маржинов, бордеров и паддингов
40

41.

Выравнивание блоков
41

42.

Выравнивание блоков
Если ширина указана явно можно управлять выравниванием
блока
42

43.

Выравнивание блоков
Вертикальное выравнивание...
43

44.

Выравнивание блоков
44

45.

Выравнивание блоков
Flexbox!
Вертикальное выравнивание!
см. http://frontender.info/a-guide-to-flexbox/
45

46.

Схлопывание границ
46

47.

Схлопывание границ
<h1>Заголовок</h1>
<p>Абзац текста...</p>
h1 { margin: 20px 0; }
p { margin: 10px 0; }
47

48.

Схлопывание границ
<h1>Заголовок</h1>
<p>Абзац текста...</p>
h1 { margin: 20px 0; }
p { margin: 10px 0; }
Сколько между блоками?
48

49.

Схлопывание границ
<h1>Заголовок</h1>
<p>Абзац текста...</p>
<h1>
h1 { margin: 20px 0; }
p { margin: 10px 0; }
Сколько между блоками?
Ответ: 30px
<p>
49

50.

Схлопывание границ
<h1>Заголовок</h1>
<p>Абзац текста...</p>
h1 { margin: 20px 0; }
p { margin: 10px 0; }
<h1>
<p>
Сколько между блоками?
Ответ: 30px 20px
50

51.

Схлопывание границ
<div>
<p>Абзац...</p>
<p>Абзац...</p>
</div>
div { margin: 5px 0; }
p { margin: 10px 0; }
51

52.

Схлопывание границ
<div>
<p>Абзац...</p>
<p>Абзац...</p>
</div>
<div>
div { margin: 5px 0; }
p { margin: 10px 0; }
52

53.

Схлопывание границ
<div>
<p>Абзац...</p>
<p>Абзац...</p>
</div>
<p>
<div>
div { margin: 5px 0; }
p { margin: 10px 0; }
53

54.

Схлопывание границ
<div>
<p>Абзац...</p>
<p>Абзац...</p>
</div>
<p>
div { margin: 5px 0; }
p { margin: 10px 0; }
54

55.

Схлопывание границ
<div>
<p>Абзац...</p>
<p>Абзац...</p>
</div>
div { margin: 5px 0; }
p { margin: 10px 0; }
<p>
<p>
55

56.

Схлопывание границ
<div>
<p>Абзац...</p>
<p>Абзац...</p>
</div>
div { margin: 5px 0 15px 0; }
p { margin: 10px 0; }
56

57.

Схлопывание границ
<div>
<p>Абзац...</p>
<p>Абзац...</p>
</div>
<p>
div { margin: 5px 0 15px 0; }
p { margin: 10px 0; }
57

58.

Схлопывание границ
<div>
<p>Абзац...</p>
<p>Абзац...</p>
</div>
<p>
div { margin: 5px 0 15px 0; }
p { margin: 10px 0; }
58

59.

Схлопывание границ
<div>
<p>Абзац...</p>
<p>Абзац...</p>
</div>
div { margin: 5px 0 15px 0; }
p { margin: 10px 0; }
<p>
<p>
59

60.

Схлопывание границ
Зачем это нужно?
60

61.

Схлопывание границ
Зачем это нужно?
p { margin: 5px 0; }
Ожидание: 5px
Реальность: 10px
<p>
<p>
Схлопывание: у элемента всегда те границы, которые ему
нужны
61

62.

Схлопывание границ
Зачем это нужно?
<ul>
<li>
<p>...</p>
</li>
</ul>
<li>
62

63.

Схлопывание границ
Зачем это нужно?
<ul>
<li>
<p>...</p>
</li>
</ul>
<p>
<li>
63

64.

Схлопывание границ
Зачем это нужно?
<ul>
<li>
<p>...</p>
</li>
</ul>
<p>
<li>
64

65.

Схлопывание границ.
Проблемы...
65

66.

Проблемы
<body>
<div id=“heading”>
<h1>Тензор</h1>
<p>С 1996 года...</p>
body, #heading { margin: 0 }
#heading h1 { margin: 10px; }
#heading p { margin: 5px; }
66

67.

Проблемы
<body>
<div id=“heading”>
<h1>Тензор</h1>
<p>С 1996 года...</p>
body, #heading { margin: 0 }
#heading h1 { margin: 10px; }
#heading p { margin: 5px; }
<body>
67

68.

Проблемы
<body>
<div id=“heading”>
<h1>Тензор</h1>
<p>С 1996 года...</p>
body, #heading { margin: 0 }
#heading h1 { margin: 10px; }
#heading p { margin: 5px; }
<div>
<body>
68

69.

Проблемы
<body>
<div id=“heading”>
<h1>Тензор</h1>
<p>С 1996 года...</p>
body, #heading { margin: 0 }
#heading h1 { margin: 10px; }
#heading p { margin: 5px; }
<h1>
<div>
<p>
<body>
69

70.

Проблемы
<body>
<div id=“heading”>
<h1>Тензор</h1>
<p>С 1996 года...</p>
body, #heading { margin: 0 }
#heading h1 { margin: 10px; }
#heading p { margin: 5px; }
<h1>
<div>
<p>
<body>
Границы вывалились из #heading!!!
70

71.

Проблемы
Как починить?
1. Установить блоку, из которого вывалились границы
бордер или паддинг
#heading {
padding-top: 1px;
/* или */
border-top: 1px solid transparent;
}
71

72.

Проблемы
Как починить?
1. Установить блоку, из которого вывалились границы
бордер или паддинг
Плюсы: самый простой способ
Минусы: размер блока увеличится
72

73.

Проблемы
Как починить?
2. Заменить маржин на паддинг с нужной стороны
h1 {
margin: 10px;
margin: 0 10px 10px 10px;
padding-top: 10px;
}
73

74.

Проблемы
Как починить?
2. Заменить маржин на паддинг с нужной стороны
Плюсы: визуально полностью идентично тому, что хотели
Минусы: неочевидный набор правил
74

75.

Проблемы
Как починить?
3. «Вырвать» из потока
#heading {
position: absolute;
/* или */
float: left;
}
75

76.

Проблемы
Как починить?
3. «Вырвать» из потока
Плюсы: визуальная идентичность ожидаемому
Минусы: меняется раскладка, усложняются стили
76

77.

Float
77

78.

Float
<div>
<div id=“a”>...</div>
<div id=“b”>...</div>
<div id=“c”>...</div>
</div>
#a
#b
<div>
#c
78

79.

Float
<div>
<div id=“a”>...</div>
<div id=“b”>...</div>
<div id=“c”>...</div>
</div>
#b {
float: left;
}
#a
#b
<div>
#c
79

80.

Float
1. Смещается к указанной стороне
2. Перестает занимать место,
схлопывается
#a
#b
<div>
#c
80

81.

Float
1. Смещается к указанной стороне
2. Перестает занимать место,
схлопывается
3. Следующие за ним блочные боксы
подтягиваются на его место
#a
#b <div>
#c
81

82.

Float
1. Смещается к указанной стороне
2. Перестает занимать место,
схлопывается
3. Следующие за ним блочные боксы
подтягиваются на его место
4. Строчные боксы внутри
пододвинувшихся начинают обтекать
его.
#a
xxxx
#b <div>
xxxxxxxx
xxxxxxxxxx
82

83.

Float
#b, #c { float: left }
#a
#b <div>
#c
83

84.

Float
#b, #c { float: left }
Если влезет, подтянется к предыдущему
float-блоку
#a
#b <div>
#c
84

85.

Float
#b, #c { float: left }
Если влезет, подтянется к предыдущему
float-блоку
Если не влезет, встанет за ним
#a
#b
<div>
#c
85

86.

Float
Что случается с родительским блоком?
Он не учитывает float-боксы при расчете
высоты
<div>
#a
#b
#c
86

87.

Float
Что случается с родительским блоком?
Он не учитывает float-боксы при расчете
высоты
<div>
#a
#b
#c
87

88.

Float
Что случается с родительским блоком?
Он не учитывает float-боксы при расчете
высоты
При этом идущие за родителем блоки
тоже подтянутся!
<div>
#a
xxxxxxxxxx
#b
xxxxxx
xxx
<div> #c
xxx
xxx
88

89.

Float
Что делать, если мы хотим предотвратить
«подтягивание» блока?
<div>
#a
xxxxxxxxxx
#b
xxxxxx
xxx
<div> #c
xxx
xxx
89

90.

Float
Что делать, если мы хотим предотвратить
«подтягивание» блока?
Свойство clear
Значения:
• left
• right
• both
<div>
#a
xxxxxxxxxx
#b
xxxxxx
xxx
<div> #c
xxx
xxx
90

91.

Float
Что делать, если мы хотим предотвратить
«подтягивание» блока?
Свойство clear
Значения:
• left – нет флоатов слева
• right – нет флоатов справа
• both – нет по любой стороне
<div>
#a
xxxxxxxxxx
#b
xxxxxx
xxx
<div> #c
xxx
xxx
91

92.

Float
Что делать, если мы хотим предотвратить
«подтягивание» блока?
Свойство clear
.someblock {
clear: left;
}
<div>
#a
#b
.someblock
92

93.

Float
Что делать, если мы хотим предотвратить
«подтягивание» блока?
Свойство clear
.someblock {
clear: left;
}
<div>
#a
#b
Xxxxxxxxxx
Xxxxxx
xxx
93

94.

Полезные ссылки
94

95.

Учебник
• http://softwaremaniacs.org/blog/category/primer/ отличный учебник по верстке
• http://softwaremaniacs.org/blog/2005/09/05/css-layoutflow-margins/
• http://softwaremaniacs.org/blog/2005/12/01/css-layoutfloat/
95

96.

Вопросы есть?
96

97.

Спасибо за внимание!