Рубрика: <span>CSS</span>

vh (viewport height), vw (viewport width) — это новые единицы измерения, разработаны для адаптивной верстки и размеры зависят от окон браузера (размеров устройств). vh (1% высоты окна, то есть если задать font-size:1vh, то на экране монитора с высотой экрана 1000px размер шрифта будет равен 10px) зависит от высоты окна браузера, а vw (1% ширины окна), соответственно, от ширины окна браузера. Также есть связанная с ними величина, которая ограничивает их vmin — по наименьшему из величин vh, vw, а vmах — по наибольшему значению из значений величин vh, vw.

rem (корневой шрифт, первый символ r, означает root и переводится как корень) — сначала размер шрифта настраивается в px в теги <html> (там же меняются) и затем относительно тега <html> применяются в единицах измерения rem на весь html документ — глобально.

Пример использования rem css html код

 
html {
        font-size: 18px;
    }
    div.font1 >span {
      font-size: 0.7rem;
    }
    div.font2 >span {
      font-size: 0.9rem;
    }

 

<div class="font1">        
    <span>Пример<br>
        <span>отображения <br>
            <span>текста<br>
                <span>с использованием 0.7 rem</span>
            </span>
        </span>
    </span>
</div>
<div class="font2"> 
    <span>Пример<br>
        <span>отображения <br>
            <span>текста<br>
                <span>с использованием 0.9 rem</span>
            </span>
        </span>
    </span>
</div> 
Пример
отображения
текста
с использованием 0.7 rem
Пример
отображения
текста
с использованием 0.9 rem

em (ex- высота шрифта) — относительная единица самого элемента и размер шрифта масштабируется только относительно свойства font-size (значение шрифта переопределяется в зависимости от вложенности).

Пример использования em css html код

 
 span {
      font-size: 0.7em;
    } 
<span>Пример<br>
        <span>отображения <br>
            <span>текста<br>
                <span>с использованием em</span>
            </span>
        </span>

    </span>
Пример
отображения
текста
с использованием em

% — размер шрифта в процентах относительно родительского элемента.

Пример использования процентов % css html код

 
    div.font3 span {
      font-size: 80%;
    }
<div class="font3">        
    <span>Пример<br>
        <span>отображения <br>
            <span>текста<br>
                <span>с использованием 0.7 em</span>
            </span>
        </span>
    </span>
Пример
отображения
текста
с использованием 0.7 em

CSS

flexbox

Свойство

display: flex;

выравнивает блоки вдоль одной линии по горизонтали (главная ось по горизонтали).

display flex

flex-direction

Свойство flex-direction позволяет управлять направлением главной оси. Если добавить ещё свойство flex-direction: column; , то блоки выравниваются вдоль одной линии по вертикали

display: flex;
flex-direction: column;

flex-direction column

по горизонтали (выравнивание по левому верхнему краю браузера)

display: flex;
flex-direction: row;

display flex

поменять порядок блоков на обратный для колонки flex-direction: column-reverse;

display: flex;
flex-direction: column-reverse;
flex-direction column-reverse
поменять порядок блоков на обратный для ряда flex-direction: row-reverse; (выравнивание по правому верхнему краю браузера)
display: flex;
flex-direction: row-reverse;
flex-direction row-reverse
justify-content
Свойство justify-content позволяет выравнивать содержание flex блока
justify-content:center; /* выравнивание по центру */
justify-content: flex-start; /* выравнивание происходит от начала главной оси */
justify-content: flex-end; /* выравнивание происходит от конца главной оси */
При использовании justify-content: space-between; первый и последний элемент выравниваются по самому краю главной оси (край браузера), остальные элементы равномерно распределяются и пространство между ними тоже равномерно заполняется.
justify-content space-between
Свойство justify-content: space-around; все элемент выравниваются равномерно и пространство равномерно распределяется между ними начиная и заканчивая с краев
justify-content space-around
align-items
Еще об свойстве align-items — выравнивание в отличие от свойства justify-content происходит от поперечной оси.

align-items:stretch; /* по умолчанию, элементы растягиваются, в блоках необходимо указать свойство height: auto; , также нужно учитывать свойство

max-width и min-width */
align-items stretch
align-items:flex-start; /* выравнивание по верхнему краю */
align-items flex-start
align-items:flex-end; /* выравнивание по нижниму краю */
align-items flex-end
align-items:center; /* выравнивание по центру */
center flexbox выравнивание по центру
align-items:baseline; /* выравнивание по базовой линии */
align-items baseline
 flex-wrap
Свойство flex-wrap задает поведение блокам, или вдоль одной линии даже если они не помещаются, или смещаются слева направо, если не помещаются в окне браузера.
flex-wrap:nowrap; /* значение по умолчанию, при изменении размера браузера блоки сжимаются, запрет переноса*/
nowrap
flex-wrap:wrap; /* при изменении размера браузера блоки сдвигаются, переносятся вниз*/
flex-wrap wrap
flex-wrap: wrap-reverse;  /* то же, что и wrap, только расположение блоков в обратном порядке, перенос вверх*/
flex-wrap wrap-reverse
flex-flow
Свойство flex-flow объединяет в себе два рассмотренных свойства flex-wrap и flex-direction, пример записи
flex-flow: column wrap;
align-content
Свойство align-content активируется совместно с flex-wrap:wrap; (когда блоки идут в несколько строк и применяется для их выравнивания).
align-content:stretch; /* по умолчанию, блоки растягиваются по вертикали, также нужно учитывать свойство max-width и min-width */
align-content:center; /* выравнивание по центру */
align-content: flex-start; /* выравнивание происходит от начала главной оси */
align-content: flex-end; /* выравнивание происходит от конца главной оси */
align-content: space-between; /* выравнивание между блоками равномерное */
align-content: space-around; /* выравнивание вокруг блоков равномерное */
align-self
Свойство align-self задает уникальное свойство блоку (элементу) и предназначено для выравнивания элементов.
 align-self :stretch; /* блоки растягиваются */
align-self :center; /* выравнивание по центру */
 align-self : flex-start; /* выравнивание происходит от начала главной оси */
 align-self : flex-end; /* выравнивание происходит от конца главной оси */
align-self: baseline; /* выравнивание по базовой линии */
gap
Свойство gap создает между блоками колонок и рядов интервал (раздвигает между собой), пример
gap: 5px;
column-gap
Свойство column-gap создает задает между колонками интервал, пример
column-gap: 5px;
flex-grow
flex-grow задает коэффициент увеличение блока. При flex-grow:1; и более блоки растянутся и заполнят свободное место на всю ширину экрана браузера. По умолчанию flex-grow:0; это значит что блоки не увеличиваются и не заполняют свободное пространство.
Пример
flex-grow:0; /* для красного блока */
flex-grow:0; /* для красного блока */
flex-grow:0; /* для зеленого блока */
grow при нуле
Пример для одинаковых блоков, но разными значениями.
flex-grow:1; /* для красного блока */
flex-grow:5; /* для зеленого блока */
flex-grow:10; /* для синего блока */
grow
flex-shrink
Свойство flex-shrink противоположно свойству flex-grow. Наименьшее значение коэффициента для flexgrow, является наибольшим значением для flex-shrink. По сути, flex-shrink обладает противоположным свойством относительно flex-grow.
flex-shrink:1; /* для красного блока */
flex-shrink:5; /* для зеленого блока */
flex-shrink:10; /* для синего блока */
Свойство flex-basis задает базовую ширину блока через width:30%; и например для остальных блоков width:auto;. Свойство flex (по умолчанию flex: 0 1 auto;) задается или одним значением -grow, или двумя — grow, shrink, или тремя значениями grow, shrink, basis.
order
Свойство order меняет порядок блоков, например
order:2; /* для красного блока */
order :1; /* для зеленого блока */
order :0; /* для синего блока */

order порядок блоков

CSS

Выровнять по горизонтали тег div  и текст заключенный в div по середине css код

.centr {
    position: relative;
    background-color:orange;
    width: 500px;
    margin: 0 auto;
}
.titleCenter {

    display: block;
    text-align: center;
}
<div class="centr"><span class="titleCenter">Выравниваем</span></div>

Результат выравнивания div по середине и горизонтали

Выравниваем

Как выровнять по горизонтали несколько div не заданной width (шириной) по середине css код

.centr-multidiv {
    text-align: center;
}
.first-block, .second-block,.third-block,.four-block {
display: inline-block;
width: 140px;
height: 200px; 
line-height: 150px;
margin-right: -0.25em;
}
.first-block, .second-block,.third-block,.four-block {
display: inline-block; 
}
.first-block{
background-color:aqua;
}
.second-block{
background-color:yellowgreen;
}
.third-block{
background-color:violet;
}
.four-block{
background-color:tomato;
}

<div class="centr-multidiv">
        <div class="first-block">1</div>
        <div class="second-block">2</div>
        <div class="third-block">3</div>
        <div class="four-block">4</div>
        </div>

Вывод и выравнивание множество блоков div по середине

1
2
3
4

Выравнивание блока заданного в процентах div с использованием display: table

* {
  margin: 0;
}
.wrap-main{
  display: table;
  width: 40%;
  background-color:aquamarine;
 	margin-left: auto;
 	margin-right: auto;
}
.block-children{
    display: table-cell;
  height: 60px;
  text-align: center;
  vertical-align: middle;
  /*overflow: auto;*/
}
<div class="wrap-main"><div class="block-children">Выровнять по вертикали</div></div>

Результат выравнивания блока div с применением table

Выровнять по вертикали

Как выровнять содержание текста внутри блока div

 
 .block-centr1 {
height: 100px;
line-height: 100px;
width: 200px;
text-align: center;
background-color:rgb(200, 253, 236);
}
<div class="block-centr1">Выровнять текст</div>

Результат выравнивания содержания текста внутри блока div по вертикали и горизонтали

Выровнять текст

CSS

CSS выпадающее меню на div

 
.menu-down-my{
    position: relative;
    display:inline-block;
}
.button-menu-down-my{
    color:white;
    background-color:gray;
    /*border-radius:10px;*/
    border:none;
    padding: 10px;
    font-size: 18px;
}
.link-menu-down-my{
    display: none;
    position: absolute;
    min-width: 180px;
    /*color:white;*/
    background-color:grey;
    z-index: 1;
}
.link-menu-down-my a{

    display: block;
    padding: 10px 10px;
    text-decoration: none;
    font-size: 18px;
    color:white;
    
}
.link-menu-down-my a:hover{
    background-color:rgb(67, 54, 110);
}
.menu-down-my:hover .link-menu-down-my{
    display: block;
}
.menu-down-my:hover .button-menu-down-my{
    background-color:rgb(67, 54, 110);
}
<div class="menu-down-my">
    <button class="button-menu-down-my">Выпадающее меню</button>
    <div class="link-menu-down-my">
    <a href="#">Ссылка меню 1</a>
    <a href="#">Ссылка меню 2</a>
    <a href="#">Ссылка меню 3</a>
    <a href="#">Ссылка меню 4</a>
    </div>
</div>

Результат работы простого выпадающего меню на CSS

CSS