В этой части учебника, будет рассказываться про блочно строчный элемент в CSS, да и вообще, про то как менять тип у элементов.
Как менять типы элементов в CSS:
Для начала надо рассмотреть как вообще менять тип у элементов, делается это очень просто, вам нужно использовать свойство display, вот не большой пример.
1 | <p>Этот <span>текст</span> блочный элемент</p> |
Тут мы используем внутри абзаца тег <span> и вы должны знать, что этот тег строчный, но сейчас благодаря CSS, сделаем его блочным.
1 2 3 | span { display: block; } |
Вот результат.
Как вы видите слово текст, который находился в строчном теги <span>, стал блочным, это понятно из ходя от того, что слово перенеслось на другую строчку, потому что блочный тип занимает 100% ширины родительского элемента.
Блочно строчный элемент:
Теперь нужно объяснить что такое блочно строчный элемент в CSS и как с ними работать.
Что такое блочно строчный элемент:
Блочно строчный тип элемента в CSS, это когда элемент имеет свойства как блочного, так и строчного элемента.
Это нужно, что бы ставить несколько блоков в один ряд, раньше для этого использовались таблицы, что как вы понимаете не очень удобно в каком то смысле.
Работа с блочно строчными элементами:
Теперь перейдём к самой работе, она достаточно простая, но по началу она не понятна, особенно для совсем новичков.
Для примера сделаем пять блоков, которые должны встать в один ряд.
1 2 3 4 5 6 7 | <div> <div class="green"></div> <div class="green"></div> <div class="green"></div> <div class="green"></div> <div class="green"></div> </div> |
То есть просто сделали внутри одного блока, пять других блоков, теперь перейдём к CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 | div { width: 500px; height: 120px; background-color: red; } div .green { width: 50px; height: 100px; background-color: green; margin-left: 10px; display: inline-block; } |
Как видите, задаём размеры всем элементам и цвета, элемент в котором у нас будут хранится блоки в строчку, делаем красным цветам, а сами блоки зелёным, также им задаём левый внешний отступ, чтобы они не сливались и назначаем блочно строчный тип, вот результат.
Как видите всё работает так, как вам надо.
Но вы можете заметить, что блок выравнивается по левому краю, а что если нужно выравнивать по правому краю, для этого есть свойство float в CSS, вот как с ним работать.
1 2 3 4 5 6 7 8 9 | div .green { width: 50px; height: 100px; background-color: green; margin-right: 10px; margin-top: 10px; display: inline-block; float: right; } |
Мы добавили float: right и margin-top: 10px, что бы были верхние отступы, также margin-right, что бы справа был отступ, вот результат.
Как видите всё работает так как надо.
Вывод:
В этой части учебника рассказывалось про блочно строчный тип элемента в CSS, и узнали про свойство float.
Подписываетесь на соц-сети:
Оценка:
Загрузка...