Размер коробки макета тахионов
Tachyons — это набор инструментов CSS, который используется для создания адаптивного веб-сайта. В этой статье мы узнаем, как включить размер коробки с помощью Tachyons.
Размер окна в Tachyons используется для создания различных размеров окна на веб-странице. Каждый элемент, который мы используем на веб-странице, имеет блоки разного размера. Примерами являются HTML, body, div, article и многие другие.
Классы размеров коробки Tachyons Layout:
Для этого нет предопределенных классов, которые тахионы предоставляют, нам нужно использовать классы ширины, чтобы зафиксировать ширину коробки.
Элементы разных размеров перечислены ниже:
- HTML: этот элемент используется для определения HTML-страницы.
- body: этот элемент используется для определения тела или содержимого страницы.
- div: этот элемент используется для определения разделения веб-страницы.
- article: этот элемент используется для включения статей на веб-страницу.
- section: Этот элемент используется для определения раздела на веб-странице.
- main: этот элемент используется для определения главного на веб-странице.
- нижний колонтитул: этот элемент используется для определения нижнего колонтитула на веб-странице.
- заголовок: этот элемент используется для определения заголовка содержимого.
- form: этот элемент используется для определения формы на веб-странице.
- набор полей: этот элемент используется для определения набора полей на веб-странице.
- легенда: этот элемент используется для определения легенды на веб-странице.
- pre: Этот элемент используется для выделения элемента.
- code: этот элемент используется для включения кода на веб-страницу.
- a: Этот элемент используется для включения ссылки на веб-страницу.
- h1,h2,h3,h4,h5,h6: эти элементы используются для определения заголовка содержимого.
- p: этот элемент используется для определения абзаца на веб-странице.
- ul: этот элемент используется для определения неупорядоченного списка.
- ol: этот элемент используется для определения упорядоченного списка.
- li: этот элемент используется для определения списка на веб-странице.
- dl: этот элемент используется для определения списка описаний.
- dt: Этот элемент используется для определения термина/имени в списке описания.
- dd: этот элемент используется для описания термина/имени в списке описания.
- textarea: этот элемент используется для управления многострочным вводом текста.
- table: этот элемент используется для определения таблицы на веб-странице.
- td: этот элемент используется для элемента Data Cell.
- th: этот элемент используется для создания заголовка таблицы.
- tr: этот элемент используется для элемента Table Row.
- input[type="email"]: этот элемент используется для определения типа ввода электронной почты.
- input[type="number"]: этот элемент используется для определения типа ввода числа.
- input[type="password"]: этот элемент используется для определения типа ввода пароля.
- input[type="tel"]: этот элемент используется для определения типа ввода телефона.
- input[type="text"]: этот элемент используется для определения типа ввода текста.
- input[type="URL"]: этот элемент используется для определения типа ввода URL.
Пример 1: Пример ниже демонстрирует размер окна макета Tachyons.
Выход:
Объяснение: В приведенном выше коде мы использовали два разных элемента: элемент <HTML> и элемент <body> , и мы ясно видим, что эти два блока имеют разные размеры. Мы можем изменить размер каждого элемента, определив размер этого элемента с помощью ширины и высоты или полей и отступов.
Пример 2: В приведенном ниже примере мы увидим разные размеры коробки.
Выход:
Ссылка: https://tachyons.io/docs/layout/box-sizing/