занимал всю ширину страницы (или какую-то его часть) и при этом размер шрифта масштабировался? Так чтобы при разных размерах окна обозревателя высота шрифта была разной.
Отслеживать
6,343 5 5 золотых знаков 25 25 серебряных знаков 54 54 бронзовых знака
задан 14 апр 2012 в 19:09
8,657 18 18 золотых знаков 73 73 серебряных знака 181 181 бронзовый знак
У шрифта нет высоты, его размеры пропорциональны в зависимости от px! Переобоснуйте вопрос, ибо сейчас он выглядит за гранью фантастики! А учитывая заголовок вопроса, ответ от @Ёхарный Бабай вполне адекватен!
14 апр 2012 в 20:34
Могу ошибаться, но по-моему, тут без JS и только средствами CSS будет сложно справиться.
14 апр 2012 в 20:48
Наверное, JS + css свойство transform Вам помогут.
14 апр 2012 в 20:54
Если вас устраивает один из ответов поставте рядом с ним галочку
16 апр 2012 в 13:04
Не пойму. Так текст по умолчанию занимает всю ширину блока, вопрос в размере шрифта. А для адаптивности можно задать в em. Или я что-то не так понял?
30 мар 2018 в 12:15
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
Как оказалось, задача элементарно решается в HTML5 с помощью встроенного SVG (проверено в Chrome и Firefox). Пример:
Отслеживать
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
ответ дан 16 апр 2012 в 6:14
8,657 18 18 золотых знаков 73 73 серебряных знака 181 181 бронзовый знак
Отслеживать
ответ дан 14 апр 2012 в 19:10
Ёхарный Бабай Ёхарный Бабай
3,403 4 4 золотых знака 34 34 серебряных знака 50 50 бронзовых знаков
Это не будет работать. Посмотрите. Возможно, я неверно выразил свою мысль: нужно, чтобы высота шрифта менялась в зависимости от размеров страницы. Примерно этот эффект можно получить, если сделать фон картинкой, на которой будет текст.
14 апр 2012 в 19:34
function onres() < var browwidth = document.documentElement.clientWidth; var myp = document.getElementById("myp"); myp.style.fontSize = browwidth / 5 + "px"; >window.onresize = onres; onres();
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Открываем блочную модель
Мы познакомились с HTML и CSS, знаем как они выглядят и как выполнить некоторые основы. Теперь мы собираемся погрузиться немного глубже и подробно рассмотреть, как элементы отображаются на странице и задаются их размеры.
В процессе мы обсудим тему, известную как блочная модель и как она работает с HTML и CSS. Мы также рассмотрим несколько новых свойств CSS и используем некоторые значения размеров, о которых рассказывали в уроке 3. Давайте начнём.
Как отображаются элементы?
Прежде чем перейти к блочной модели, нам надо понимать, как отображаются элементы. В уроке 2 мы рассмотрели разницу между блочными и строчными элементами. Быстро напомним, что блочные элементы занимают всю доступную ширину независимо от их содержимого и начинаются с новой строки. Строчные элементы занимают ширину, которая требуется для содержимого и выстраиваются на одной строке, друг за другом. Блочные элементы, как правило, используются для больших кусков контента, таких как заголовки и структурные элементы. Строчные элементы, как правило, применяются для маленьких частей содержимого, таких как несколько слов, выделенных жирным или курсивным начертанием.
display
Как именно отображаются элементы — как блочные или строчные или как-то ещё, определяется свойством display . Каждый элемент содержит значение свойства display по умолчанию, но как и с любым другим значением свойств, это значение может быть переписано. Есть немало значений для свойства display , но наиболее распространённые это block , inline , inline-block и none .
Мы можем изменить значение свойства display элемента, выбрав этот элемент в CSS и задав новое значение свойства display . Значение block сделает этот элемент блочным.
Значение inline сделает этот элемент строчным.
Самое интересное это значение inline-block . Его использование позволит элементу вести себя как блочный, включая все свойства блочной модели (которые мы вскоре рассмотрим). Однако, элемент будет отображаться на строке с другими элементами, а не будет начинаться с новой строки по умолчанию.
Демонстрация inline-block
Пространство между строчно-блочными элементами
Одним из важных отличий строчно-блочных элементов является то, что они не всегда соприкасаются или отображается непосредственно друг за другом. Обычно между двумя элементами будет небольшое пространство. Это пространство, возможно и раздражает, но это нормально. Мы обсудим, почему оно существует и как его убрать в следующем уроке.
В заключение, используя значение none полностью скрываем элемент и отображаем страницу, словно элемента не существует. Любые элементы, вложенные в такой элемент, также будут скрыты.
Знание, как отображаются элементы и как изменить display довольно важно, так как display оказывает влияние на отображение блочной модели. В процессе обсуждения блочной модели мы обязательно взглянем на эти разные последствия и как они могут повлиять на представление элемента.
Что такое блочная модель?
В соответствии с концепцией блочной модели, каждый элемент на странице представляет собой прямоугольный блок и может иметь ширину, высоту, поля, границы и отступы.
Это стоит повторить: Каждый элемент на странице представляет собой прямоугольный блок.
Рис. 4.01. Когда мы смотрим на каждый элемент по отдельности, то можем увидеть, что все они прямоугольны, независимо от их представленных форм
Каждый элемент на каждой странице соответствует блочной модели, так что это невероятно важно. Давайте взглянем на неё, наряду с несколькими новыми свойствами CSS, чтобы лучше понять, как мы можем с этим работать.
Работа с блочной моделью
Каждый элемент представляет собой прямоугольный блок и есть несколько свойств, которые устанавливают размер этого блока. Внутренность блока определяется шириной и высотой элемента, который может быть задан свойством display , содержимым элемента или свойствами width и height . padding и затем border расширяют размеры блока наружу от ширины и высоты элемента. Наконец, любой указанный margin идёт за пределами рамки.
Каждая часть блочной модели соответствует свойству CSS: width , height , padding , border и margin .
Взглянем на эти свойства внутри некоторого кода:
В соответствии с блочной моделью общая ширина элемента может быть рассчитана по следующей формуле:
Рис. 4.02. Блочная модель включает базовую высоту и ширину плюс padding, border и margin
Используя эти формулы, мы можем найти общую высоту и ширину блока из нашего примера.
Ширина: 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px Высота: 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px
Блочная модель, без сомнения, одна из наиболее запутанных частей HTML и CSS. Мы устанавливаем значение свойства width как 400 пикселей, но фактическая ширина нашего элемента 492 пикселя. По умолчанию блочная модель коробка аддитивна. Таким образом, для определения фактического размера блока мы должны принять во внимание поля, границы и отступы для всех четырёх сторон блока. Наша ширина включает не только значение свойства width , но и размер левого и правого поля, левую и правую границу, левые и правые отступы.
Пока многие из этих свойств не несут большого смысла и это нормально. Для уточнения давайте поближе посмотрим на все эти свойства width , height , padding , border и margin , которые формируют блочную модель.
width и height
У каждого элемента есть ширина и высота по умолчанию. Эта ширина и высота может быть равна нулю, но браузеры по умолчанию отображают каждый элемент с размером. В зависимости от того, как отображается элемент, ширина и высота по умолчанию может быть соответствующей. Если элемент является ключевым в макете страницы, для него может потребоваться задать определённые значения свойств width и height . В этом случае значения свойств для не строчных элементов могут быть указанными.
width
По умолчанию ширина элемента основана на значении display . У блочных элементов ширина по умолчанию 100% и занимает всё доступное горизонтальное пространство. Строчные и строчно-блочные элементы расширяются и сжимаются горизонтально для размещения их содержимого. Строчные элементы не могут иметь фиксированный размер, таким образом, ширина и высота относятся только к не строчным элементам. Чтобы задать определённую ширину для не строчных элементов, используйте свойство width :
height
Высота элемента по умолчанию определяется его содержимым. Элемент будет расширяться и сжиматься по вертикали при необходимости, чтобы вместить его содержимое. Установить определённую высоту для не строчных элементов можно через свойство height :
Размеры строчно-блочных элементов
Пожалуйста, помните, что строчные элементы не принимают свойства width и height и любые их значения. Блочные и строчно-блочные элементы, однако, принимают свойства width и height и соответствующие им значения.
margin и padding
В зависимости от элемента, браузеры могут применять отступы и поля по умолчанию для элемента, чтобы помочь с удобочитаемостью. Мы, как правило, видим это на текстовых элементах. Поля и отступы по умолчанию для этих элементов могут отличаться от браузера к браузеру и от элемента к элементу. В уроке 1 мы обсуждали использование сброса CSS чтобы все эти значения по умолчанию стали нулевыми. Это позволяет нам работать с нуля и задать собственные значения.
margin
Свойство margin позволяет нам установить пространство, которое окружает элемент. margin находятся за пределами любых границ и полностью прозрачны в цвете. Они могут использоваться для позиционирования элементов в конкретном месте на странице или добавить пустое пространство, сохраняя все другие элементы на безопасном расстоянии. Вот свойство margin в действии:
Одной из причуд margin являются вертикальные значения, сверху и снизу, они не применяются к строчным элементам, но применяются к блочным и строчно-блочным элементам.
padding
Свойство padding очень похоже на свойство margin , однако располагается внутри границ элемента. Свойство padding используется, чтобы задать пространство непосредственно внутри элемента. Вот код:
Свойство padding в отличие от margin работает вертикально для строчных элементов. Вертикальный padding может сливаться со строкой выше или ниже данного элемента, но будет отображаться.
margin и padding для строчных элементов
Строчные элементы ведут себя немного по-другому, чем блочные и строчно-блочные элементы, когда дело доходит до отступов и полей. Для строчных элементов margin работает только горизонтально — слева и справа от элементов. padding работает на всех четырёх сторонах строчных элементов, однако вертикальные поля сверху и снизу могут выходить за пределы строки выше и ниже элемента.
Отступы и поля работают как обычно для блочных и строчно-блочных элементов.
Установка margin и padding
В CSS существует несколько способов установить значения определённых свойств. Мы можем использовать обычную запись, в которой перечисляется несколько свойств и значений одно за другим, в котором у каждого значения есть собственное свойство. Или мы можем использовать сокращённую запись, перечисляя несколько значений одного свойства. Не у всех свойств есть сокращённый вариант, таким образом, мы должны убедиться что используем правильное свойство и структуру значений.
Свойства margin и padding существуют в обычном и сокращённом виде. При использовании сокращённого свойства margin , чтобы установить одно значение для всех четырёх сторон элемента мы задаём одно значение:
Чтобы установить одно значение для верхней и нижней стороны, а другое значение для левой и правой стороны элемента, укажите два значения: вначале сверху и снизу, затем слева и справа. Здесь для мы задаём отступы 10 пикселей сверху и снизу и 20 пикселей слева и справа:
Чтобы установить уникальные значения для всех четырёх сторон элемента, укажите эти значения в следующем порядке: сверху, справа, снизу и слева, двигаясь по часовой стрелке. Здесь мы задаём для отступы 10 пикселей сверху, 20 пикселей справа, 0 пикселей снизу и 15 пикселей слева.
Использование свойства margin или padding с любым числом значений считается сокращением. В обычной записи мы можем установить значение только для одной стороны используя уникальные свойства. После имени каждого из свойств ( margin или padding в данном случае) идёт дефис и сторона блока, к которой должно применяться значение: top, right, bottom или left. Например, свойство padding-left принимает только одно значение и установит левое поле для этого элемента, свойство margin-top принимает только одно значение и установит верхний отступ для этого элемента.
Когда мы хотим определить только одно значение margin или padding , то лучше использовать обычную запись. Это сохраняет наш код наглядным и помогает избежать путаницы по пути вниз. Например, вы действительно хотите установить margin в 0 сверху, справа и слева элемента или же на самом деле хотите установить margin снизу в 10 пикселей? Использование обычной записи для свойств и значений помогает нам это делать осмысленно. С другой стороны, когда имеешь дело с тремя или более значениями, сокращение невероятно полезно.
Цвет отступов и полей
Свойства margin и padding полностью прозрачны и не принимают какие-либо цветовые значения. Но будучи прозрачными они показывают цвет фона связанных элементов. Для margin мы видим цвет фона родительского элемента, а для padding видим цвет фона элемента, к которому применяется padding.
Границы
Границы располагаются между отступами и полями, создавая рамку вокруг элемента. Для свойства border требуется три значения: ширина, стиль и цвет. Сокращённая запись для border задаётся этом же порядке — ширина, стиль, цвет. В обычной записи эти три значения могут быть разбиты по свойствам border-width , border-style и border-color . Обычная запись полезна для изменения или переписывания отдельного значения границы.
Ширина и цвет границ могут быть определены с помощью обычных единиц размера и цвета CSS, как описано в уроке 3.
У границ может быть различный внешний вид. Наиболее распространённые значения solid , double , dashed , dotted и none , но есть и несколько других на выбор.
Вот код для сплошной серой границы толщиной 6 пикселей для всех четырёх сторон :
Демонстрация border
Границы для отдельных сторон
Как и со свойствами margin и padding границы могут быть размещены на одной стороне элемента за раз при желании. Это требует новых свойств: border-top , border-right , border-bottom и border-left . Значения для этих свойств такие же, как и для border : ширина, стиль и цвет. При желании можно сделать так, чтобы граница появлялась только внизу элемента:
Кроме того, стилями для отдельных сторон можно управлять на ещё более тонком уровне. Например, если мы хотим изменить только ширину нижней границы, то можем использовать следующий код:
Такое довольно специфичное свойство границы включают в себя ряд разделённых дефисом слов, начинающихся с border, затем идёт выбранная сторона — top, right, bottom или left, а затем width, style или color, в зависимости от желаемого свойства.
Радиус границы
Пока мы рассматриваем границы и их разные свойств, нам нужно изучить свойство border-radius , которое позволяет нам закруглять углы элемента.
Свойство border-radius принимает единицы размера, в том числе проценты и пиксели, которые определяют радиус скругления углов элемента. Единственное значение закругляет все четыре угла элемента в равной степени; два значения закругляют левый верхний/правый нижний и правый верхний/левый нижний углы в таком порядке; четыре значения закругляют левый верхний, правый верхний, правый нижний и левый нижний углы в таком порядке.
При рассмотрении порядка, когда несколько значений применяются к свойству border-radius (заодно к margin и padding ), помните, что они идут по часовой стрелке, начиная с левого верхнего угла элемента.
Демонстрация border-radius
Свойство border-radius также может быть разбито на ряд свойств, которые позволяют нам изменить радиусы отдельных углов элемента. Эти свойства начинается с border, продолжаются с положения угла по вертикали (top или bottom) и горизонтали (left или right) и завершаются radius. Например, для изменения правого верхнего угла может быть использовано свойство border-top-right-radius .
Размеры блока
До сих пор блочная модель была аддитивной. Если вы установили для width 400 пикселей, затем добавили 20 пикселей padding и border 10 пикселей на каждой стороне, фактическая полная ширина элемента становится 460 пикселей. Помните, мы должны сложить значения свойств width , padding и border вместе, чтобы получить реальную полную ширину элемента.
Блочная модель, однако, может быть изменена, чтобы вычисления происходили иначе. CSS3 ввёл свойство box-sizing , которое позволяет нам точно менять, как блочная модель работает и как вычисляются размеры элемента. Это свойство принимает три основных значения — content-box , padding-box и border-box , каждое из которых оказывает несколько разное влияние на вычисление размера блока.
content-box
Значение content-box является значением по умолчанию, оставляя блочную модель в качестве аддитивной. Если мы не используем свойство box-sizing , то это будет значением по умолчанию для всех элементов. Размер элемента начинается со свойств width и height , далее к ним добавляются значения свойств padding , border или margin .
Свойства и значения специфичные для браузера
Что означают все эти дефисы и буквы в свойстве box-sizing?
Когда был представлен CSS3, браузеры постепенно начали поддерживать разные свойства и значения, включая свойство box-sizing, путём добавления вендорных префиксов. Когда части спецификации CSS3 будут завершены и выпущены новые версии браузеров, эти префиксы станут всё менее и менее актуальными. Со временем префиксы вряд ли будут проблемой, однако, они всё ещё обеспечивают поддержку некоторых старых браузеров. Мы можем работать с ними время от времени и, возможно, даже захотим использовать их, если нам нужна поддержка старых браузеров.
Вендорные префиксы можно увидеть для свойств и значений, всё зависит от спецификации CSS. Здесь они показаны для свойства box-sizing. Разработчики браузеров были свободны в выборе, когда использовать префикс, а когда нет. Таким образом, одни свойства и значения требуют префиксы для некоторых браузеров, а другие нет.
Ниже, когда свойство или значение требует вендорный префикс, то префикс будет использоваться только для представления этого свойства или значения (в интересах сохранения нашего кода простым и кратким). Не забудьте добавить необходимые префиксы, когда вы станете писать реальный код.
Для справки, наиболее распространённые префиксы изложены здесь:
Mozilla Firefox: -moz-
Microsoft Internet Explorer: -ms-
Webkit (Google Chrome и Apple Safari): -webkit-
padding-box
Значение padding-box изменяет блочную модель путём включения всех значений свойства padding внутри width и height элемента. При использовании значения padding-box , если у элемент width равно 400 пикселей и padding 20 пикселей вокруг всех сторон, фактическая ширина останется 400 пикселей. При увеличении padding на любое значение, размер содержимого внутри элемента сжимается пропорционально.
Если мы добавим border или margin , эти значения будут добавлены к свойствам width или height для вычисления полного размера блока. Например, если мы добавим border 10 пикселей и padding 20 пикселей вокруг всех сторон элемента, у которого width 400 пикселей, фактическая полная ширина будет 420 пикселей.
border-box
Наконец, значение border-box изменяет блочную модель так, чтобы любые значения свойств border или padding включались внутри width и height элемента. При использовании значения border-box , если для элемента указаны width 400 пикселей, padding 20 пикселей и border 10 пикселей вокруг всех сторон, фактическая ширина останется 400 пикселей.
Если мы добавим margin , эти значения должны учитываться для расчёта полного размера блока. Независимо от того, какое значение свойства box-sizing применяется, любые значения margin не будут добавляться в вычисления полного размера элемента.
Рис. 4.03. Различные значения box-sizing позволяют по разному вычислять ширину элемента и блока целиком
Выбор размера блока
Вообще говоря, лучшее значение box-sizing для применения — это border-box . Это значение намного упрощает нам математику. Если мы хотим, чтобы весь элемент был 400 пикселей в ширину, он останется 400 пикселей в ширину, независимо от того, какие значения padding или border мы к нему добавляем.
Кроме того, мы можем легко смешивать значения длины. Скажем, мы хотим, чтобы наш блок занимал 40% в ширину. Добавление padding 20 пикселей и border 10 пикселей для всех сторон элемента не сложно и мы по-прежнему можем гарантировать, что фактическая ширина нашего блока останется 40%, несмотря на использование пикселей в другом месте.
Единственный недостаток свойства box-sizing в том, что как часть спецификации CSS3 она не поддерживается во всех браузерах, особенно не хватает поддержки в старых версиях. К счастью, это становится всё менее и менее актуальным, поскольку выходят новые версии. Скорее всего, мы можем безопасно использовать свойство box-sizing , но если вы заметили какие-то проблемы, стоит посмотреть с каким браузером они связаны.
Инструменты разработчика
В большинстве браузеров есть то, что известно как Инструменты разработчика. Эти инструменты позволяют нам проверить элемент на странице, увидеть, где этот элемент живёт в HTML-документе и посмотреть, какие свойства и значения CSS к нему применяются. Большинство из этих инструментов также включают в себя схему блочной модели, чтобы показать вычисленный размер элемента.
Чтобы увидеть Инструменты разработчика в Google Chrome, откройте меню, выберите «Дополнительные инструменты», а затем «Инструменты разработчика». После этого откроется панель в нижней части окна браузера, которая предлагает несколько инструментов для проверки нашего кода.
Щелчок по стрелке в нижней части этой панели позволяет выделять и щёлкать по разным элементам на странице, чтобы узнать о них больше информации.
После выбора элемента мы увидим несколько вкладок в правой части панели «Elements» в инструментах разработчика. Выбор вкладки «Computed» покажет нам подробную блочную модель для нашего выбранного элемента.
Поиграйте с инструментами разработчика, будь они в Google Chrome, Mozilla Firefox, Apple Safari или других браузерах; можно многое узнать просматривая наш код. Я вообще оставляю панель инструментов всегда открытыми при написании HTML и CSS. И также часто проверяю код других сайтов, чтобы увидеть, как они сделаны.
Рис. 4.04. Инструменты разработчика Google Chrome, которые помогают нам проверять HTML и CSS на любой странице
Блочная модель является одной из самых запутанных частей при изучении HTML и CSS. Она также является одной из самых мощных частей HTML и CSS и как только мы это освоим, практически всё остальное, вроде позиционирования содержимого, пойдёт довольно легко.
На практике
Давайте перепрыгнем обратно к нашему сайту Styles Conference к центральной части страницы и добавим ещё немного содержимого.
Начнём настройку размера нашего блока с версии border-box , которая упростит установку размеров всех наших элементов. В нашем файле main.css, чуть ниже сброса, добавим комментарий, чтобы определить код для создания нашей сетки и макета сайта. Мы положим всё это ниже сброса, чтобы они шли в правильном порядке в каскаде. Отсюда мы можем использовать универсальный селектор *, наряду с универсальными псевдоэлементами *:before и *:after для выбора всех мыслимых элементов и изменения box-sizing на border-box . Помните, что мы собираемся включить вендорные префиксы для свойства box-sizing , так как это относительно новое свойство.
/* ======================================== Сетка ======================================== */ *, *:before, *:after
.container
на странице, по одному на героя нашего раздела (раздел, который представляет нашу конференцию) и одному для раздела тизеров.
на каждой странице элементом с классом container .
/* ======================================== Типографика ======================================== */ h1, h3, h4, h5, p
Теперь создадим некоторые стили для этих классов в нашем CSS. Ниже нашего набора правил типографики сделаем новый раздел для кнопок. Для начала добавим класс btn и применим некоторые общие стили, которые будут для всех кнопок. Мы хотим, чтобы у всех кнопок был border-radius 5 пикселей. Кнопки должны отображаться как inline-block, поэтому мы можем добавить поля со всех четырёх сторон без проблем и уберём все margin.
Мы также хотим включить стили, характерные для этой кнопки, которые делаем с помощью класса btn-alt . Сюда добавим однопиксельную рамку серого цвета, padding 10 пикселей сверху и снизу и padding 30 пикселей слева и справа от кнопки.
.btn-alt
Далее мы хотим создать новый раздел в файле CSS для стилей главной страницы и как только будем готовы, станем использовать класс hero, чтобы установить padding для всех четырёх сторон элемента
.
/* ======================================== Главная страница ======================================== */ .hero
Наш сайт начинает складываться воедино, особенно главная страница.
Рис. 4.05. Главная страница Styles Conference постепенно принимает форму после нескольких обновлений
Демонстрация и исходный код
Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.
Универсальный селектор
На первом этапе данного упражнения мы представили универсальный селектор. В CSS звёздочка (*) это универсальный селектор, который выбирает каждый элемент. Вместо перечисления всех отдельных элементов мы можем использовать звёздочку для выбора всех элементов.
Псевдоэлементы :before и :after также упомянутые на этом этапе — это элементы, которые могут динамически генерироваться через CSS. Мы не станем применять эти элементы в нашем проекте, однако, при упоминании универсального селектора также хорошим тоном будет включить эти псевдоэлементы на случай, если они когда-нибудь появятся.
Резюме
Возьмите пирожок и погладьте себя по голове. Я подожду.
Изучение всех разных частей блочной модели — это немалый подвиг. Эти понятия, даже кратко изложенные, заняли довольно много времени до полного освоения, но мы находимся на верном пути.
Вкратце, в этом уроке мы говорили о следующем:
Как отображаются разные элементы.
Что такое блочная модель и почему она так важна.
Как изменить размер элементов с учётом высоты и ширины.
Как добавить к элементам margin, padding и border.
Как изменить размер элементов и влияние блочной модели.
Теперь у нас есть лучшее понимание того, как отображаются элементы и вычисляются их размеры. Настало время переходить к позиционированию этих элементов.
Ресурсы и ссылки
The CSS Box Model via CSS-Tricks
HTML Borders via Quackit.com
См. также
border
box-sizing
display
display в CSS
height
margin
margin в CSS
padding
width
Абсолютное позиционирование
Блочные элементы
Вкладки на CSS
Выравнивание с помощью флексбоксов
Высота и ширина в CSS
Добавление треугольника
Использование в вёрстке
Колесо для сокращённых свойств
Описание float
Отзывчивый веб-дизайн
Оформление ссылок
Повёрнутые рамки
Поток
Примеры использования float
Размеры
Размеры блока
Рамка вокруг изображений
Свойства текста в CSS
Свойство border
Свойство margin
Создание флексбоксов
Спойлер
Строчно-блочные элементы
Строчные элементы
Схлопывающиеся margin
Как получить ширину элемента в пикселях?
Есть элемент div , в CSS файле у него прописано свойство width: 90% . Kак в JS получить ширину этого элемента в пикселях?
Отслеживать
51.6k 200 200 золотых знаков 61 61 серебряный знак 242 242 бронзовых знака
задан 7 мая 2018 в 20:11
Don2Quixote Don2Quixote
1,705 3 3 золотых знака 12 12 серебряных знаков 26 26 бронзовых знаков
Если есть jquery $(‘div’).innerWidth();
7 мая 2018 в 20:20
@AndrewB Мне на чистом нужно было, но спасибо 🙂
8 мая 2018 в 20:42
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
В зависимости, какую ширину вы хотите получить, можно использовать различные свойства:
offsetWidth — это ширина блока, включая все padding, border, но без margin.
clientWidth — это ширина блока, включая padding, но без border, margin и без scroll. Если блоки инлайновые, то ширина блока будет равна 0.
getBoundingClientRect().width — это ширина блока высчитывается по принципу clientWidth , но даёт дробное число.
Так что, в данном случае можно ответить тремя ответами:
CSS Flexbox предназначен для создания гибких макетов. С помощью этой технологии можно очень просто и гибко расставить элементы в контейнере, распределить доступное пространство между ними, и выровнять их тем или иным способом даже если они не имеют конкретных размеров.
CSS Flexbox позволяет создать адаптивный дизайн намного проще, чем с использованием Float и позиционирования.
Flexbox можно использовать как для CSS разметки целой страницы, так и её отдельных блоков.
Поддержка CSS Flexbox браузерами
CSS Flexbox поддерживается всеми используемые на сегодняшний момент современными браузерами (с использованием префиксов: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+).
Создание CSS разметки с помощью Flexbox начинается с установки необходимому HTML элементу CSS-свойства display со значением flex или flex-inline .
После этого данный элемент становится flex-контейнером , а все его непосредственные дочерние элементы – flex-элементами . При этом когда мы говорим о flexbox то подразумеваем под этим только элемент с display:flex или display:flex-inline и все элементы непосредственно расположенные в нём. Таким образом в CSS Flexbox имеется всего два типа элементов: flex-контейнер и flex-элемент.
.flex-container
flex-элемент #1
flex-элемент #2
flex-элемент #3
По умолчанию flex-элементы во flex-контейнере занимают всю его высоту.
Значение flex или flex-inline определяет то, как flex-контейнер будет представлен на странице. Если его необходимо отобразить в виде блока , то используйте значение flex . Если элемент необходимо представить как строку , то используйте значение flex-inline . В этом случае он будет занимать столько места странице, сколько необходимо для отображения его элементов.
Устройство flex-контейнера. Направление осей
На рисунке представлена схема устройства flex-контейнера:
Направление расположение flex-элементы в flex-контейнере определяется посредством осей.
В CSS Flexbox имеются две оси. Первая ось называется главной (по умолчанию она направлена слева направо). Вторая — поперечная (по умолчанию направлена сверху вниз), она всегда перпендикулярно главной . Главная ось задаёт основное направление flex-элементов во flex-контейнере, а поперечная ось определяет их направление при переносе на новую линию.
По умолчанию элементы во flex-контейнере располагаются вдоль направления главной оси (т.е. слева направо) на одной линии.
Направление главной оси можно изменить, осуществляется это с помощью CSS-свойства flex-direction .
С помощью этого свойства можно сделать так, чтобы flex-элементы располагались не рядами (rows), а колонками (columns). Осуществляется это с помощью значения column или column-reverse .
По умолчанию flex-элементы не переносятся на новую линию, даже когда им не хватает места в текущей линии. Они просто выходят за её пределы.
Но это можно изменить. Разрешить перенос flex-элементов на новые линии осуществляется с помощью установки flex-контейнеру CSS свойства flex-wrap со значением wrap или wrap-reverse .
flex-wrap: wrap; /* nowrap (только на одной линии - по умолчанию) wrap (разрешить перенос flex-элементов на новые линии) wrap-reverse (осуществлять перенос flex-элементов в обратном порядке) */
Значения wrap и wrap-reverse CSS-свойства flex-wrap определяют направление поперечной оси .
Свойства flex-direction и flex-wrap можно указать с помощью универсального CSS свойства flex-flow :
flex-flow: row nowrap; /* 1 значение - flex-direction, 2 значение - flex-wrap */
Выравнивание flex-элементов
Во Flexbox выравнивание элементов внутри контейнера осуществляется по двум направлениям (осям).
Выравнивание flex-элементов по направлению главной оси
Выравнивание элементов вдоль основной оси осуществляется с помощью CSS свойства justify-content :
justify-content: flex-start; /* flex-start (flex-элементы выравниваются относительно начала оси) – по умолчанию flex-end (flex-элементы выравниваются относительно конца оси) center (по центру flex-контейнера) space-between (равномерно, т.е. с одинаковым расстоянием между flex-элементами) space-around (равномерно, но с добавлением половины пространства перед первым flex-элементом и после последнего) */
Выравнивание flex-элементов вдоль поперечной оси
Выравнивание flex-элементов во flex-контейнере по направлению поперечной оси осуществляется с помощью CSS-свойства align-items :
align-items: stretch; /* stretch (растягиваются по всей длине линии вдоль направления поперечной оси) – по умолчанию flex-start (располагаются относительно начала поперечной оси) flex-end (относительно конца поперечной оси) baseline (относительно базовой линии) center (по центру) */
Выравнивание линий flex-контейнера
CSS Flexbox позволяет выравнивать не только сами flex-элементы, но и линии на которых они расположены.
align-content: stretch /* stretch (растягиваются по всей длине поперечной оси) – по умолчанию flex-start (относительно начала поперечной оси) flex-end (относительно конца поперечной оси) center (по центру) space-between (равномерно, т.е. с одинаковым расстоянием между линиями) space-around (равномерно, но с добавлением половины пространства перед первой линией и после последней) */
Свойство align-content имеет смысл использовать только тогда, когда flex-элементы во flex-контейнере располагаются на нескольких линиях. Чтобы это произошло, необходимо, во-первых, чтобы ширина всех flex-элементов была больше ширины flex-контейнера, а во-вторых flex-контейнер должен иметь в качестве CSS-свойства flex-wrap значение wrap или wrap-reverse .
CSS-свойство align-self
Свойство align-self в отличие от предыдущих ( justify-content , align-items и align-content ) предназначено для flex-элементов. Оно позволяет изменить выравнивание flex-элемента вдоль направления поперечной оси. Свойство align-self может принимать такие же значения как align-items .
align-items: stretch; /* auto (по умолчанию) || stretch || flex-start || flex-end || baseline || center */
По умолчанию flex-элементы отображаются во flex-контейнере в том порядке, в котором они расположены в HTML коде. Для изменения порядка следования одних flex-элементов относительно других в CSS Flexbox можно использовать свойство order . Данное CSS свойство выстраивает flex-элементы во flex-контейнере в порядке возрастания их номеров.
order: 0; /* 0 (по умолчанию) целое положительное или отрицательное число */
.flex-container { display: flex; } /* переместим 2 flex-элемент в конец */ .flex-container_element-2 { order: 2; } /* передвинем 3 элемент до 2 */ .flex-container_element-3 { order: 1; } /* расположим 4 flex-элемент до 1 */ .flex-container_element-4 { order: -1; }
Управление шириной flex-элемента
Во Flexbox есть несколько CSS свойств, определяющих то, какая ширина может быть у flex-элемента.
CSS-свойство flex-basis
Данное свойство предназначено для установления начальной ширины flex-элементу. Задавать значение ширины можно посредством различных единиц измерения, таких как px, %, em и др. По умолчанию данное свойство имеет значение auto (в этом случае ширина элемента будет рассчитываться автоматически на основании его содержимого).
Конечная ширина flex-элемента будет определяться в зависимости от значений CSS-свойств flex-grow и flex-shrink , которые установлены не только для этого элемента, но и для других flex-элементов этого flex-контейнера.
CSS-свойство flex-grow
Это свойство определяет, может ли начальная ширина flex-элемента увеличиваться (расти). Увеличение ширины flex-элемента осуществляется за счёт свободного пространства линии. В качестве значения CSS-свойства flex-grow указывается целое число. Именно это значение и определяет (если оно больше или равно 1) какую часть свободного пространства flex-элемент заберёт себе.
В этом примере, если flex-элементы расположены на одной линии и в ней есть свободное пространство (600×(1-0,8)=120px):
к ширине элемента .flex-container_element-1 добавится 1/5 часть этого пространства (120×1/5=24px);
к ширине элемента .flex-container_element-2 добавится 4/5 части этого пространства (120×4/5=96px).
Другими словами, CSS свойство flex-grow позволяет не просто указать, что ширина flex-элемента может вырасти, но и задать, насколько эта величина может вырасти по отношению к другим элементам.
По умолчанию CSS свойство flex-grow имеет значение 0. Это означает, что flex-элемент не может расти (увеличивать свою ширину).
CSS-свойство flex-shrink
Данное свойство определяет, может ли ширина flex-элемента уменьшиться. Уменьшение ширины flex-элемента будет осуществляться только в том случае, если ширины линии будет не достаточно для отображения всех flex-элементов, расположенных в ней. Необходимая ширина рассчитывается на основании начальной ширины, который имеет каждый flex-элемент в ней.
Ширина flex-контейнера 500px. Для отображения flex-элементов необходимо 600px. В итоге не хватает 100px. В этом примере уменьшаться могут 2 flex-элемента ( .flex-container_element-1 и .flex-container_element-2 ). Ширина первого flex-элемента .flex-container_element-1 в данном случае составит 300 – 1/4*100= 275px. Ширина второго flex-элемента .flex-container_element-2 в данном случае составит 300 – 3/4*100= 225px.
Значение по умолчанию:
flex-shrink: 1;
Если вам необходимо запретить уменьшение ширины flex-элементу, то в качестве значения свойства flex-shrink необходимо указать число 0.
CSS-свойство flex
Для удобной установки flex-grow , flex-shrink и flex-basis можно использовать CSS свойство flex .
В этом разделе создадим простой адаптивный макет всей страницы на CSS Flexbox.
Структура макета будет состоять из 3 секций:
header (для вывода заголовка и основного меню);
main (для отображения основной части);
footer (для футера).
Основную часть (main) в свою очередь разделим ещё на 2 раздела (их позиционирование будем осуществлять с помощью CSS Flexbox). На больших экранах (>=992px) эти разделы выстроим горизонтально, а на остальных — вертикально (<992px).
В CSS для поддержки макета большинством браузеров добавлены свойства с префиксами и max-width .
Для «превращения» блока во flex-контейнер используется класс row . Установку ширины flex-элементам .col__article и .col__aside внутри flex-контейнера выполнено с использованием CSS-свойства flex .
В качестве примера разметим посредством flexbox ещё футер и создадим в элементе .col__article блок состоящий из трёх элементов (минимальная ширина одного элемента — 300px). В футере разместим четыре блока (минимальная ширина одного блока — 200px).
Если статья понравилась, то поделитесь ей в социальных сетях:
Комментарии: 90
20.03.2022, 17:06
Здравствуйте. Верстаю на Bootstrap 5, и вот в таком же шаблоне как здесь в примере в сайдбаре мне надо 2 блока которые идут один под другим, и которые при просмотре на мобильном устройстве должны: верхний блок уехать верх, потом основной контент и после основного контента второй блок. Что то никак не могу понять как сетку построить для такого варианта? спс
29.11.2021, 02:13
Александр, доброго времени суток! Не могу найти причину данной проблемы: При первоначальном заходе на эти: 1) страница 1 2) страница 2 сайта с мобильного телефона шрифт описания учебника, отображается большего размера чем нужно… При обновлении страницы, шрифт становится нужного размера… Пример в фото: 1 страницы: itchief.ru/assets/uploadify/2/6/f/26ffac9c31100cad12461489e589176b.jpg itchief.ru/assets/uploadify/b/7/4/b74cd2493526cd5826cb2a322ba44605.jpg
Все вроде хорошо и с таблицей стилей и html, но все равно шрифт прыгает. Может вы знаете в чем может быть причина и как можно это исправить. Спасибо! 😉 Вот фрагмент css отвечающий за отображение этой части:
И если нужно codepen.
Александр Мальцев
29.11.2021, 13:02
Привет! На мобильном телефоне у меня такой проблемы нет. Попробуйте в режиме инкогнито или кэш в телефоне очистить.
29.11.2021, 13:40
Александр, спасибо!) В том то и дело, что пробовал все, и очистить все данные браузера и режим инкогнито, и все вместе сразу, даже телефон брал другой (правда все android), разные браузеры, все тоже самое… При первоначальном заходе шрифт большего размера, при обновлении страницы он уменьшается и становится нужного размера… Понятия не имею из-за чего…
Александр Мальцев
29.11.2021, 14:16
Попробуйте для ссылок, которые содержат элементы с display: block, то же установить блочное отображение:
Ещё попробуйте расположить стили в следующем порядке:
p { font-size: 15px; line-height: 1.2; } .col__item p { color: black; font-size: 1rem; } @media screen and (min-width: 480px) { p { font-size: 17px; } .col__item p { font-size: 1.0786rem; } }
29.11.2021, 14:26
Александр, еще раз Спасибо! Попробую. Странная штука однако, взял щас другой телефон с которого ни разу не заходили на сайт, там все нормально отображается… Хотя все данные в браузере удалял, как в гугл, так и яндекс. Спасибо!)
30.04.2021, 12:43
Здравствуйте, помогите мне пожалуйста з сайтом, я не знаю как исправить оптимизацию с мобильным видом. На версии ПК и планшет сайт сидит нормально но на телефоне сайт движется по разным сторонам. Не знаю даже в каком направлении двигаться. Спасибо за ваше время
30.03.2021, 14:27
Александр, приветствую! Вроде и ерундовый вопрос, а я что то завис… Не могли бы взглянуть и подсказать, адекватное ли решение? Есть страница, на ней фото книг и краткое пояснение, что за книга. (Вы так же мне подсказывали, как реализовать это). Так вот, при добавлении текста после списка книг, этот текст постоянно прыгает… Как пример: itchief.ru/assets/uploadify/f/4/0/f407dd1b1634bb067144082bfdcbc504.jpg А в этом примере при уменьшении количества книг ( li ), появляется отступ itchief.ru/assets/uploadify/b/e/f/befc1bc8fb42765c43db751e9a4f2812.jpg Из за того, что на каждой странице разное количество книг, получаются так называемые «скакуны» текст прыгает из за постоянно уменьшающегося и прибавляющегося margin… Как можно сделать чтобы отступ был постоянный и он не прыгал каждый раз? P.S. Методом проб, понял что можно убрать margin и вроде как все встает на свои места, повторюсь вроде и ерунда, но хотелось бы услышать выше мнение, может как то более адекватно можно сделать это.
.col__item:last-child { margin-bottom: 0; }
Александр Мальцев
02.04.2021, 14:17
Привет! Удали это правило:
.col__item:last-child { margin-bottom: 0; }
В результате он всегда будет на 20px ниже располагаться.
Если нужно без отступа, то можно просто добавить к нему трицательный отступ:
Александр, Доброго времени суток! Только щас заметил при наполнении контентом, что текст выходит за границы блока… Причем если я за место текста прописываю lorem200, то текст за границу не выходит, как то странно получается не знаете в чем причина? itchief.ru/assets/uploadify/e/d/2/ed2443519713c287f052516b0fd7cbaa.png
04.01.2021, 01:13
Александр, с этим вроде разобрался просто нужно пробелы ставить, чтобы нормально все переносилось.
Александр Мальцев
04.01.2021, 08:51
Привет! В этом случае можно добавить CSS свойство для перевода строки при её превышении границ блока:
Александр, приветствую! Как вы думаете почему так происходит и вообще критично ли это? Когда я сужаю окно браузера до минимальных значений, то контейнеры header и footer начинают сильно сжиматься относительно другого контента. Вот пример: где появляется белая полоса itchief.ru/assets/uploadify/9/8/5/98594595590ea219f17a6bb0f8412ca7.png точно такая же и в footer. Из-за чего так происходит вы случайно не знаете? Причем почему-то в code pen все происходит нормально, только при просмотре в браузере в режиме адаптивного дизайна (на мазиле и хроме. ) codepen.io/man129/pen/PoGKOBx
Александр Мальцев
24.12.2020, 16:09
Привет! Установите в CSS:
body { word-break: break-all; }
На таких размерах, конечно, не стоит проверять, нужно хотя бы с 320px.
24.12.2020, 23:41
Ясно! Тогда не буду заморачиваться. Спасибо в очередной раз!
04.12.2020, 00:29
Александр, приветствую в очередной раз!) Александр, если Вас не затруднит, можете показать как и с помощью чего, можно просто реализовать следующую задачу: Есть список из цифр он большой, как сделать чтобы вверху над этим списком было некое окно, куда можно было ввести значение например «10» и происходила фильтрация по этому списку, скрывались ненужные т.е 1,2,3 и т.д., а осталась только цифра 10? codepen.io/man129/pen/WNGrpVj
Вот как пример фотка: itchief.ru/assets/uploadify/d/c/9/dc9b966e17cbe171d1d87bf7311a455e.png Спасибо! P.S Прошу прощения, что мб пишу не в профильный раздел, но профильный я не нашел, да если честно особо и не понимаю в какой раздел отнести этот вопрос.
05.12.2020, 00:23
Александр, еще раз приветствую! Я уже писал про этот вопрос выше, но вроде нашел в Инете 1 вариант решения этой задачи. Но смущают некоторые моменты. Можете взглянуть адекватный ли код?)) codepen.io/man129/pen/rNMxXqp Меня смущают 2 момента: 1) Когда указываю в окне поиска цифру 1, то также отображаются числа 10,11,12,13 и тд. Вы не знаете как сделать поиск более точным? Или как бы вы сделали? А второй момент что это решение на java, можно ли решить эту задачу более простым вариантом, возможно ли, что из-за java увеличится скорость загрузки станицы? И не подскажите можно ли 2 совершенно разных java закинуть в 1 чтобы уменьшить скорость загрузки?) Скорее всего я «запариваюсь» но пытаюсь найти ответы, и особо про это ни кто не пишет. Спасибо!
Александр Мальцев
05.12.2020, 13:44
Привет! Если нужно по полному совпадению, то тогда нужно с использованием знак равенства (открыть):
if (txtValue.toUpperCase() === filter)
Да, вы можете весь JavaScript код поместить в один файл, а затем его минимизировать (чтобы уменьшить его размер).
05.12.2020, 14:05
Александр, Спасибо за быстрый ответ! Но, немножко не до понял. 1) Теперь в этом примере все точно, но появился такой момент, что как только я ввел число, а потом стер его (т.е поле осталось чистым) то список с числами не появляется… itchief.ru/assets/uploadify/e/1/0/e10238ca6405e932f89f40418977775b.png
2) А второй момент не совсем понял, можете чуть подробнее пояснить в каком смысле уменьшить код?) (Или каr можно сделать это в этом примере?) По идее там же все связано.
Александр Мальцев
05.12.2020, 14:28
1. Поправьте эту строчку на следующую:
if (txtValue.toUpperCase() === filter
Александр Мальцев
20.12.2020, 07:05
Привет! Это можно также решить ещё с помощью JavaScript. Но тут будет немного посложнее. Сначала необходимо получить ширину скроллбара:
function getScrollbarWidth() { return window.innerWidth - document.documentElement.clientWidth; } var widthScrollbar = getScrollbarWidth();
После этого в функцию myFunction добавить код, который будет рассчитывать исчез ли скроллбар и если да, то добавлять эту величину в padding-right для элемента body (открыть пример):
Александр, спасибо огромное за ваш труд! Но я все таки воспользуюсь 1 вариантом т.к для меня он более понятен нежели java, хоть вариант с java смотрится более элегантным. Но у меня опять «newby question» Будет ли считаться такой вариант добавления overflow-y: scroll; к body правильным? т.к тут я 2 раза обращаюсь к тегу body? Или как адекватно это сделать?)
Да, всё правильно. В первом правиле вы устанавливаете стили для html и body, а во втором – только для body.
24.12.2020, 23:40
01.12.2020, 17:53
День добрый. Возможно ли на флекс реализовать такую схему размещения элементов? Верхняя часть — обычный экран, нижняя — при уменьшении ширины. Не могу сказать, что новичок в деле верстки, но реализовать решение именно на флекс не могу.
Александр Мальцев
04.12.2020, 14:43
Привет! Пример (открыть):
26.11.2020, 21:23
Александр, Приветствую! Вы случаем не знаете как сделать aside (где находится меню) в мобильной версии по высоте на одном уровне, чтобы он не прыгал в зависимости от контента не поломав при этом сам макет? Вот пример на 2 фото: itchief.ru/assets/uploadify/6/1/d/61d7f57d7fded52e880c346afc00d467.jpg и друго фото где много контента: itchief.ru/assets/uploadify/7/c/3/7c3878fe6f592797685e02707a38d2c4.png P.S. Пробовал играться размерами flex элементов, но все меняется криво… Ссылка на pen codepen.io/man129/pen/VwKwWWO
Александр Мальцев
30.11.2020, 13:42
Привет! Добавьте какую-то определённую минимальную высоту для «.col__aside»:
.col__aside { min-height: 50vh; }
30.11.2020, 14:48
Спасибо Александр! Но дело в том, что я хочу сделать высоту на уровне этой строчки «Меню»не больше, чтобы не было пустого места и если указываю min-height, она будет все равно больше этой строчки при малом количестве контента, но не меньше заданого значения. Пробовал уже и max-height, и играл с флекс, но все равно aside расширяется…
Александр Мальцев
01.12.2020, 15:32
Тогда задайте блокам для маленьких экранов вертикальное расположение (flex-direction: column). Колонки aside установите высоту по содержимому (flex-basis: auto), а article — всю оставшуюся (flex-grow: 1).
01.12.2020, 23:21
Александр, Спасибо. Все получилось!
30.10.2020, 17:20
Александр, доброго времени суток! Если Вам не сложно, можете взглянуть и подсказать в чем моя ошибка в 2 моментах?
1) Не могу понять правильно ли я оформил в плане записи код с помощью flex, пункт Part c номерами книг. ( codepen.io/man129/pen/mdExBvB
2)Как сделать чтобы Пункт — Текст Описание при уменьшении размера( например просмотр на смартфоне и тд) не переносились(
Александр Мальцев
01.11.2020, 03:13
и
. Для решения 2 проблемы просто установите для col__item по умолчанию 100%, а при ширине viewport, например, с 420px — 50%:
Александр, Спасибо за помощь! Я тоже думал, что лучше осуществить это через маркированный список, но получается какая то дичь, поэтому и начал делать через
. Если Вас не затруднит можете показать на моем примере хотя бы как сделать 2 строчки с номерами книг?
Во 2 пункте все Супер, Спасибо! Только @media (min-width: 620px) думаю это не существенно, т.к при установке 420 все текст в пункте (он длинный) съезжает…
P.S. Еще раз Спасибо за подсказки и помощь с дурацкими вопросами, но я пытаюсь разобраться и понять все это! =)
03.11.2020, 14:25
Александр, а как можно выровнить
Part 1 c другими li в одну строчку, а то получается вот так… itchief.ru/assets/uploadify/6/0/7/607cc1381238c1e29dc444ed95899be0.jpg Я попробывал это сделать с помощью padding: .nums__title {4px 2px 4px 0;}, меняя высоту, но это все не точно, как сделать чтобы они были по умолчанию в 1ряд? Спасибо!
Александр Мальцев
03.11.2020, 14:43
03.11.2020, 14:46
Либо же вообще такой вариант прокатит? Чтобы не выравнивать div: тогда элементы сами выровняться.
Александр Мальцев
03.11.2020, 15:01
Можно и так, но семантически не совсем корректно.
03.11.2020, 15:10
Александр, ради бога извините, я пойду уже походу застрелюсь и точно не буду сегодня Вас мучать.Я все правильно понимаю, неужели чтобы начать новую Part 2 c новой строчки нужно полностью прописывать div заново вот так?
Неужели нельзя прописать все под эдиным блоком div > И как быть когла, элементы переносятся на другую строчку 1 элементы который стоит на новой строке не было отступа?
Александр Мальцев
03.11.2020, 15:31
Сделайте тогда без маркированного списка. В этом случае будет минимальный код: codepen.io/itchief/pen/OJXEWea.
03.11.2020, 15:45
Нет, Александр, меня все устраивает! Наверно не так выразился? Имеется ввиду, этот код который вы подсказали, а я продолжил, а именно новые Part2, Part3 по правильному записывается именно так? Всегда прописывая div nums__wrapper»>?
Александр Мальцев
03.11.2020, 15:53
03.11.2020, 19:33
Thank! Александр, а как можно сделать одинаковый отступ у разных цифр к примеру 1 и 10? itchief.ru/assets/uploadify/6/1/9/619f0996ee56bd8b49328950ca275963.jpg Я так думаю, нужно задать новый класс для цифр от 1-10. codepen.io/man129/pen/NWrzbew В очередной раз Благодарю.
Александр Мальцев
04.11.2020, 02:38
В этом случае им нужно просто задать определённую ширину: codepen.io/itchief/pen/pobKKZL
04.11.2020, 03:50
Вы решили все 1 строчкой, а я начал назначать классы для цифр 1-9… Чтобы задать им отступ… А решение было в 1 строчке… Сам себе жизнь усложняю.
Александр Мальцев
04.11.2020, 04:23
Не надо так. Делайте как можно более просто.
05.11.2020, 23:21
Я стараюсь) Александр, доброго времени суток! Если Вас не затруднит, могли бы вы взглянуть на мой код?) codepen.io/man129/pen/KKMBbzL 1) Я сделал галерею картинок, но получилось как всегда не очень… В общем необходимо сделать блок, в котором будут фото на всю ширину экрана, как и для mobile так и для PK. (Реализовал это с помощью флекс, но не знаю правильно ли, и нужно ли все это оборачивать дивом. Как бы вы сделали это сами, чтобы не получилось много ненужного кода? По факту я просто указал flex-direction: column; (все что касается этого блока, вcе в нижней части css кода)
2) Это уже второстепенное, но не пойму как норм реализовать подпись к картинкам, а то вычитал что через уже ни кто не далает, тогда как сделать?) Да и само название галереи в моем случае просто указал через div, чтобы добавить подчеркивание. Огромное — человеческое Спасибо Вам за помощь.
07.11.2020, 22:37
Александр, Приветствую! Я осознаю, что мы вопросы кажутся вам идиотскими, но мне правда не к кому обратиться… и я пытаюсь разобраться в них поскольку мне это необходимо,(как говорил ранее получается не очень). Поэтому прошу помочь мне разобраться пускай в глупых, но необходимых вопросах, которые я написал ранее, чуть выше, когда у вас будет время. Я же, в свою очередь постараюсь меньше задавать эти вопросы…
Александр Мальцев
11.11.2020, 15:48
Flexbox не нужен, если фотографии необходимо разместить вертикально, и чтобы они занимали всю ширину блока, в котором они расположены. Для этого можно создать следующие стили и разметку:
..
Александр Мальцев
11.11.2020, 15:50
Я так не считаю. Просто не всегда получается ответить сразу.
11.11.2020, 19:49
Огромное Спасибо!) Просто ради интереса, для чего нужен font-size: 0; в теге figure? Это так для себя, просто не могу понять?
Александр Мальцев
12.11.2020, 13:44
Пожалуйста! Для того чтобы убрать пробелы вокруг inline-block элементов. Чтобы было более понятно сделал этот пример.
12.11.2020, 15:47
Спасибо за наглядный пример и что не поленились я даже визуально показали как это все выглядит, визуально я понял что к чему но, пробуя менять конкретно в примере который ниже, разницы хоть убей не вижу, да и (inline-block, там нет), либо вы имеете ввиду тег figure, насколько я понимаю он же блочный и все манипуляции происходят с ним?) Еще раз благодарю!
..
Александр Мальцев
12.11.2020, 15:54
Нет, это про тег img. Он по умолчанию inline-block.
12.11.2020, 15:57
Ясно, Спасибо.
16.11.2020, 02:52
Александр, приветствую! Подскажите пожалуйста в этом примере codepen.io/itchief/pen/oNLQQOr который вы уже видели) Если неправильно указать путь к картинке, то аlt (альтернативный текст) не показывается. Я думаю что это из за position: relative. Существенно ли это или можно забить? Гугл пишет что якобы это влияет на SEO., но по факту он то у меня указан а просто не отображается. Спасибо!
16.11.2020, 12:58
Методом проб понял, что это из-за font-size:0. Но так и не разобрался в вопросе существенно ли это для seo? По факту он то у меня указан, а просто не отображается.
Александр Мальцев
16.11.2020, 14:55
Добавьте для этого случая размер:
figure > img { width: 100%; font-size: 16px; }
16.11.2020, 21:32
В очередной раз Спасибо!
19.10.2020, 14:07
Добрый день. Спасибо за статью!
Как сделать обтекание flex блоком вокруг flex элементов? flex блок занимает ширину 310px и справа от 3 и 6 flex элемента будет пустое синее пространство. Как сделать так, чтобы этого пустого пространства от flex элементов не было? flex элемент растягивать не надо, сам flex блок должен обтекать все его элементы. Спасибо.
14.10.2020, 19:49
Александр, снова Здравствуйте! Подскажите, что я сделал не так? Необходимо сделать список картинок так, чтобы текст располагался слева (что собственно я и сделал с помощью align:left.Но как я это сделал граница элемента растягивается не по картинке, а по последнему тегу, и следовательно, если я добавляю еще одну картинку с текстом все накладывается друг на друга и получается полная ерунда… =( Подскажите может во flex, это делается по другому? И как это грамотно сделать? codepen.io/man129/pen/LYZGGve p.s. Пересмотрел много всего, но там все работает только когда идет сплошной текст…
Александр Мальцев
15.10.2020, 12:16
Здравствуйте! Разметка должна быть такая?
В этом случае нужно просто отменить обтекание:
.img_1{ . /* отменяем обтекание */ clear: both; }
15.10.2020, 13:20
Александр, извиняюсь. Я наверно не так выразился… Если сделаю так как вы указали будет сплошной список. А необходимо сделать так (нашел пример) Чтобы на одной строке была и картинка и текст справа от картинки. Грубо говоря всего на 1 строке 2 дива, в каждом из них картинка и описание этой картинки слева, чтобы была возможность кликнуть на картинку или текст и перейти на нужную страницу. Если не сложно можете показать как это сделать в codepen.io/man129/pen/LYZGGve ??
Александр Мальцев
15.10.2020, 14:18
15.10.2020, 18:51
Александр, огромное Спасибо за помощь!)
28.09.2020, 15:27
Добрый день! Спасибо за статью! Подскажите пожалуйста, как в этом примере сделать так, чтобы при малом заполнении основной части, footer был снизу а не поднимался вслед за основной частью?
Александр Мальцев
28.09.2020, 15:53
Привет! Прижать футер к низу можно так:
DocumentHEADERMAIN
28.09.2020, 16:06
Спасибо за быстрый ответ! Но я только учусь всем азам верстки. Если вам не сложно, можете конкретно на показать на примере, приведённом в этой статье?
Александр Мальцев
29.09.2020, 13:08
Для примера, приведённого в этой статье:
