Как создать квадрат в css
Перейти к содержимому

Как создать квадрат в css

  • автор:

Как создать квадрат в css

Если вы нажмете кнопку «Сохранить», ваш код будет сохранен и вы получите URL, с который вы можете поделиться с другими.

Нажав кнопку «Сохранить», вы соглашаетесь с нашим правила и условия.

Все коды в общих файлах предоставляется пользователями и принадлежат объявлениям.

Все общие файлы становятся общедоступными. Лицензия не применяется.

Любой код может быть удален без предупреждения (если он считается оскорбительным, поврежденным или по любая другая причина).

schoolsw3.com не несет ответственности за любые утраты или повреждения любого рода во время использования предоставленного кода.

Не удалось сохранить код

В коде слишком много символов.

Ваш код был сохранен

Файл был сохранен в:

Сохранить на Google диске

Если у вас есть аккаунт Google, вы можете сохранить этот код на Google диске.

Google попросит вас подтвердить доступ к Google диску.

Сохранить файл на Google диск

Сохранить файл как: Сохранить файл

Открыть файл из Google диска

Если вы сохранили файл на Google диске, вы можете открыть его здесь:

Открыть файл с Google диска

Открыть файл

Резиновые квадраты на CSS

Резиновые квадраты на CSS

Если блоки используются не для текста, а например, для фоновых картинок, слой fl-col-text не нужен.

HTML:

CSS:

box-sizing : border-box ;
display : flex ;
flex-wrap : wrap ;
margin : 10px 0 ;
width : calc ( 25% — 20px ) ;
margin : 10px ;
position : relative ;
overflow : hidden ;
border : 8px solid #BFE2FF ;
.fl-col:after < padding-top : 100% ; float : left ; padding : 20px ; position : absolute ; width : 100% ; height : 100% ; display : flex ; flex-flow : column ; align-items : center ; justify-content : center ; font-size : 30px ; color : #337AB7 ; Нравится 5 В закладки

  • Опубликовано: 24.08.2020
  • Рубрики: Вкладки, блоки и списки — простые решения
  • Метки: CSS
  • 8318 просмотров
Смотрите также:

Заголовок, перекрывающий блок с рамкой

Заголовок, перекрывающий блок с рамкой

Заголовок на прозрачном фоне, перекрывающий блок с рамкой на CSS

Тень для clip-path

Тень для clip-path

Пример создания тени для ограниченной области clip-path

Внутренний border-radius у блока

Внутренний border-radius у блока

Имитация закругленных углов, как у css-свойства border-radius, но с отрицательным радиусом

Как сделать квадрат в css

Как известно из курса геометрии, квадрат — равносторонний прямоугольник. Для того чтобы сформировать квадрат в CSS достаточно чтобы у блока высота и ширина были одинаковы. Рассмотрим пример:

Исходный HTML документ

 class="container">  class="square-1">
class="square-2">
class="square-3">
/* расположим все фигуры в ряд, добавим между ними отступ */ .container  display: flex; gap: 20px; > /* стили квадратов */ .square-1  background-color: #cc5de8; height: 100px; width: 100px; > .square-2  background-color: #339af0; height: 75px; width: 75px; > .square-3  background-color: #38d9a9; height: 50px; width: 50px; > 

enter image description here

Результат

Рисование с использованием блоков

Давайте продолжим работу с нашим простым набором данных, используемым ранее:

var dataset = [ 5, 10, 15, 20, 25 ];

Мы будем использовать его для генерирования супер-простой столбиковой диаграммы. Столбиковые диаграммы по сути являются набором прямоугольников, а HTML тег — это самый простой способ нарисовать прямоугольник(Опять же, для веб-браузера все является прямоугольниками, поэтому вы можете запросто адаптировать этот пример для использования span-ов или любых других элементов на ваше усмотрение).

Этот div может быть легко приспособлен для отображения столбика:

(Следуя веб-стандартам, этот код является семантически неверным. Обычно мы не должны использовать пустой блок div для реализации визуальных эффектов, но при написании кода в этом руководстве мы отклоняемся от правил.)

Так как это div, его атрибуты width и height заданы в CSS-стилях. Каждый столбик в нашей диаграмме будет наследовать те же свойства(исключение только height), поэтому ниже приведен код для описания общих стилей и выделен в CSS-класс bar:

div.bar < display: inline-block; width: 20px; height: 75px; /* We'll override this later */ background-color: teal; >

Теперь к каждому div‘у надо присвоить класс bar, чтобы наши общие стили применялись к нему:

Добавить атрибут класса к элементу с использованием D3 можно с помощью метода selection.attr(). Очень важно понимать разницу между методами attr() и style().

Установка атрибутов

Метод attr() используется для установки элементу атрибута и его значения. HTML-атрибутом является любая пара свойство/значение, которые можно включать для элемента между скобками <>. Например, эти HTML-элементы:

    

в общем хранят 5 атрибутов(и соответствующих им значения), все из них могут быть установлены с использованием метода attr():

class | caption id | country src | logo.png width | 100px alt | Logo

Для установки нашим div‘ам класса bar мы можем использовать:

.attr("class", "bar")

Заметка по классам

Заметьте, что у элемента class является HTML-атрибутом. Класс, в свою очередь, используется для ссылки на правила в CSS-стилях. Это может вызывать некоторую путаницу, поскольку есть разница между установкой атрибута class и применении стиля напрямую к элементу через написание стилей в атрибуте элемента style. Вы можете использовать оба варианта. Конечно, вы должны использовать подход, который больше вам по душе, но я рекомендую использовать описание класса в CSS-свойствах, а затем применить этот класс к множественным элементам(путем установки атрибута class), или прописать все стили в атрибуте style элемента(когда определенное свойство должно быть уникальным).

Также я хочу вскользь упомянуть о методе D3 classed(), который может быть использован для быстрого применения или удаления классов стилей элемента. Строка кода выше может быть заменена на:

.classed("bar", true)

Вернемся к столбикам

Сложив все это вместе с нашим набором данных, получим законченный D3 код:

var dataset = [ 5, 10, 15, 20, 25 ]; d3.select("body").selectAll("div") .data(dataset) .enter() .append("div") .attr("class", "bar");

Результат работы кода

Загляните на демо-страницу с этим кодом. Чтобы убедиться в этом, откройте исходники кода, и откройте веб-инспектор, чтобы увидеть, что происходит. Вы должны увидеть пять вертикальных столбиков, которые сгенерированы по одному для каждого значения в наборе данных. Без пробелов между ними, они смотрятся как один большой квадрат.

Устанавливаем стили

Метод style() используется для установки CSS-свойств и значений напрямую. HTML-элеметну. Это эквивалентно включению CSS-правил в атрибут style прямо в HTML-коде, как на примере:

В столбиковой диаграмме высота каждого столбика должна быть фукнцией от соответствующего значения. Давайте добавим это в конец нашего D3 кода:

.style("height", function(d) < return d + "px"; >);

Результат работы кода

Взгяните на результат на демо-странице. Вы должны увидеть маленькую стобиковую диаграмму!

Когда D3 проходит через каждое значение входного набора, значение d будет хранить соответствующее значение набора данных. Поэтому мы устанавливаем высоту в зависимости от значения d(текущее значение) и прибавляем px(то есть указываем единицу измерения). Высота div‘ов будет таким: 5px, 10px, 15px, 20px и 25px.

Это может выглядеть немного просто, поэтому давайте сделаем наши столбики немного выше:

.style("height", function(d) < var barHeight = d * 5; //Scale up by factor of 5 return barHeight + "px"; >);

и добавим небольшой просвет справа от каждого столбика:

margin-right: 2px;

Результат работы кода

Круто! Здесь представлена наша финальная демо-страница. Опять же, просмотрите исходники кода, а затем, используя веб-инспектор сравните с окончательной страницей.

Автором оригинального текста книги D3 Tutorials является Scott Murray
На русский язык перевел Ivanov Sergey. 2014 год

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *