Тут использованы для отступов и размеров были использованы стили заданные браузером по умолчанию. Нужно было задать второму элементу списка HTML класс.
Позиционирование
Здесь есть небольшая сложность, о которую некоторые «споткнулись» – то, что здесь присутствует два элемента section, один вложенный в другой, не позволяет нам написать стили для контейнера или внутреннего элемента используя только селектор section.
Несколько возможных решений:
Задать родительскому элементу класс — например “container”, а внутренний элемент выбирать при помощи селектора .container section, тогда правила написанные для родительского элемента будут применяться только к нему, как и правила написанные для внутреннего элемента
Можно использовать селектор section, но поскольку правила будут применяться и для внутреннего элемента, то нужно будет переопределить стили для него при помощи селектора section section (означающего «выбрать все элементы section, у которых есть родитель section)
Главное преимущество использования классов – в том что мы могли бы изменить код как хотим, вставить какие угодно элементы внутри нашего дерева и если мы специально не выделили эти элементы классами, то они не будут приобретать нежелательные стили
Кроме того, я кажется недостаточно хорошо объяснил разницу между отступами и свойствами задающими координаты, давайте посмотрим на эти свойства еще раз и вспомним в чем разница
Отступы описывают положение элемента в потоке относительно родителя и других элементов. Свойства margin-right и margin-bottom влияют на то, как близко к этому элементу будет следующий элемент в потоке
Координаты описывают расположение элемента относительно родителя, никак не влияя на «сестринские» элементы, элемент перестает занимать место в потоке. Кроме того, при указании значения для только одной из сторон (top или bottom и left или right) элемент будет позиционирован относительно соответствующей стороны родителя, то есть:
Раскладка
Как некоторые из вас заметили, тут результата можно было добиться и при помощи positon: absolute.
Стандарты
Мы работаем с браузерами, специальными программами для просмотра HTML страниц, стили для которых определены в CSS. Эти программы разрабатывают разные компании и разные люди (для браузеров с открытым кодом) — как они все соглашаются на то, каким образом должны вести себя элементы, к котороым применяются какие-то свойства? Как появляются новые свойства?
Когда браузеры только появились, часто компании вроде Microsoft или Netscape придумывали свои собственные «расширения» которые позволяли добиться каких-то результатов, которые другие браузеры не умели понимать и отображать. Это приводило к тому, что у людей, работающих над сайтами не было возможности сделать что-то, что выглядело бы похоже и работало определенным образом в любых браузерах.
Для того, чтобы веб оставался открытым и общим для пользователей разных браузеров, появилась организация W3C (WWW Consortium), которая определяет веб стандарты. То есть существует набор текстовых документов, спецификаций, где написаны рекомендации и комментарии для разработчиков браузеров и веб страниц. Эти рекомендации и правила описывают как именно должны воспринимать код HTML и CSS браузеры и какого результата можно ожидать при написании того или иного кода.
Для того, чтобы двигать интернет вперед, не ломая при этом существующие сайты и позволяя разработчикам пробовать новые свойства разработчики бразуеров придумали использовать специальные приставки, префиксы для названий стилевых свойств.
Прекрасным примером будет свойство border-radius – году в 2006 или 2007, самым модным термином в среде веб-разработчиков был «веб 2.0». Для того, чтобы ваш сайт можно было назвать «веб 2.0», лого должно было отражаться от «мокрого пола» и иметь наклейку beta, где-нибудь должна была вращаться гифка обознащающая процесс загрузки, а все контейнеры должны были иметь закругленные уголки.
Однако CSS не поддерживал такого свойства и для того, чтобы добиться нужного визуального эффекта применялись сумасшедшие техники с использованием нескольких элементов оберток и кучи картинок. Но в какой-то момент, я думаю, что первым был Firefox, появилась экспериментальная поддержка свойства -moz-border-radius, обратите внимание на префикс “-moz-”.
ВАЖНО! CSS устроен так, что если какое-то свойство написано с использованием правильного синтаксиса, но незнакомо браузеру, браузер просто пропустит это свойство. Этот механизм позволяет нам задавать свойства только для определенных браузеров и использовать самые новые возможности.
Box-model, как работает раскладка для элемента
В CSS существует специальный термин “box model”, который означает набор правил, по которым рассчитывается ширина, высота и внутренние, и внешние отступы для любого элемента.
По умолчанию, ширина элемента увеличивается, когда элементу задаётся внутренний отступ (padding). Кроме того, ширина границы тоже влияет на ширину элемента.
Оранжевым цветом выделены ширина и высота элемента (width: 200px; height: 200px;)
Красным – внутренние отступы (padding: 20px;)
Черным – граница (border: 4px solid black)
Важно! Мы задаем значение свойства width или height, но на деле размеры элемента внутри потока будут складываться из значений ширины или высоты, внутренних отступов и ширины границ
На что это влияет? Почему мы говорим об этом? Как обычно, важно представлять себе поведение потока — то есть, как элемент влияет на следующий элемент.
Или, например, давайте возьмем наше домашнее задание на раскладку элементов
Трубка взрыва, основываясь большей частью на сейсмических данных, сменяет многолетнемерзлый фирн, за счет чего увеличивается мощность коры под многими хребтами. Фумарола продольно разогревает металлический меандр, что в общем свидетельствует о преобладании тектонических опусканий в это время. Глубина очага землетрясения варьирует липарит, так как совершенно однозначно указывает на существование и рост в период оформления палеогеновой поверхности выравнивания. Перенос, а также в преимущественно песчаных и песчано-глинистых отложениях верхней и средней юры, высвобождает пирокластический орогенез, в тоже время поднимаясь в пределах горстов до абсолютных высот 250 м. Боксит сменяет грунт, что обусловлено не только первичными неровностями эрозионно-тектонического рельефа поверхности кристаллических пород, но и проявлениями долее поздней блоковой тектоники. Плита, с зачастую загипсованными породами, восстановлена.
Мы задали ширину элементов при помощи процентных значений.
Но результат получился некрасивым — текст заполнеяет контейнер целиком, внутри нету никаких полей и глазам неприятно смотреть на это. Что будет если мы добавим внутренние отступы этим элементам?
Трубка взрыва, основываясь большей частью на сейсмических данных, сменяет многолетнемерзлый фирн, за счет чего увеличивается мощность коры под многими хребтами. Фумарола продольно разогревает металлический меандр, что в общем свидетельствует о преобладании тектонических опусканий в это время. Глубина очага землетрясения варьирует липарит, так как совершенно однозначно указывает на существование и рост в период оформления палеогеновой поверхности выравнивания. Перенос, а также в преимущественно песчаных и песчано-глинистых отложениях верхней и средней юры, высвобождает пирокластический орогенез, в тоже время поднимаясь в пределах горстов до абсолютных высот 250 м. Боксит сменяет грунт, что обусловлено не только первичными неровностями эрозионно-тектонического рельефа поверхности кристаллических пород, но и проявлениями долее поздней блоковой тектоники. Плита, с зачастую загипсованными породами, восстановлена.
Оттого, что у всех дочерних для контейнера элементов увеличилась фактическая ширина в потоке, но их ширина уже и так в сумме давала 100% ширины родителя, последний элемент не вместилась в строку и сместился вниз.
Эту проблему можно решить создав по дополнительному элементу внутри каждого из детей, и для этих элементов задать внутренний отступ, но это требует большого количества дополнительного кода.
К счастью, в последние несколько лет появилось отличное решение для этой проблемы — новое свойство, которое сейчас уже поддерживается во всех современных браузерах box-sizing: border-box;. Это свойство переопределеяет то, как будет рассчитываться ширина элементов таким образом, что внутренние отступы больше не будут увеличивать конечную ширину или высоту элемента. Его можно задавать при помощи селектора * для всех элементов на странице и это очень помогает при раскладке элементов макетов — я рекомендую всегда использовать это свойство для всех ваших стилей.
Поскольку новые свойства работают не сразу во всех браузерах, имеет смысл проверять поддержку и необходимость написания префиксов на сайте Can I Use
Mobile first
Сегодняшний макет мы сделаем следуя практике mobile first
Mobile First — это философия впервые сформулированная Luke Wroblewski в 2011 году. Эта философия заключается в том, чтобы думать о мобильном контексте в первую очередь, — проектировать и разрабатывать начиная с мобильных устройств.
Почему этот подход полезен:
Больше 70% населения планеты имеет мобильный телефон. На более чем 85% всех проданных мобильных устройствах установлен браузер – так что вы увеличиваете свою аудиторию и делаете свой контент максимально доступным
При проектировании и дизайне главный фокус достается той части вашей идеи, которая наиболее важна. Мобильные экраны имеют на 80% меньше места для того, чтобы донести до пользователя основную функцию вашего сайта или приложения.
Появляются новые технологические возможности и новые способы взаимодействия с устройствами (геолокация, тач и мультитач и т.д.)
Responsive или адаптивный веб дизайн
Это еще один термин, который обозначает технику адаптирования дизайна / раскладки сайта в зависимости от ширины экрана.
Для этой техники характерны:
Наличие сетки
Пропорциональное изменение размеров встраиваемых ресуросов — картинок, видео и т.д.
Только HTML и базовые стили. Важно обратить внимание на использование классов и на «сетку» (реализованную при помощи padding:0 3%).
+ собственный шрифт. Мы использовали свой собственный шрифт — давайте посмотрим как вы можете выбрать другой шрифт и как его использовать. Google Fonts
