Потому, что они иерархические, то есть поддерживают вложенность.
В нашем примере в див с классом row, вложены дивы с классом col.
В стилях мы записали это так:
.row{
display:table-row;
}
.col{
display:table-cell;
border:1px solid black;
width: 50%;
}
Но могли сделать и так, чтобы показать вложенность:
.row{
display:table-row;
}
.row .col{
display:table-cell;
border:1px solid black;
width: 50%;
}
А теперь сделаем что-то реальное полезное, сверстаем страничку такого вида:
(Файлы во вложении)
Полезные ресурсы:
● http://htmlbook.ru - html, css
● http://www.w3schools.com/html/default.asp - html
● http://www.w3schools.com/css/default.asp - css
● http://www.lipsum.com - генератор lorem ipsum
● https://jsfiddle.net/
ДЗ:
1. Добавить в нашу заготовку заголовок h2.
2. Добавить нумерованный список.
3. Добавить маркированный список и используя css, убрать маркеры (гугл в помощь).
4. Почитать и разобраться зачем нужны: float, clear, margin, padding, блочные и инлайновые элементы, потому, что ЭТО нам все скоро ПРИГОДИТСЯ!
