CSS урок 13. Другие свойства блоков CSS и блочная верстка сайта

Дата изменения: 23 ноября 2018
Цель урока: Знакомство со свойствами блоков float, clear, margin-left, margin-right, max-width и max-height. с принципами табличной верстки CSS. Получение навыков использования блочной верстки сайта css

Свойства блоков width, max-width, height, max-height

width

ширина блока

max-width

height

высота блока

max-height

 
 
Возможные значения для всех свойств:

  • auto
  • величина в пикселях
  • %

Пример:

.div1{
	width:100%;
	background-color:#ccc;
}
.div2{
	width:50%;
	height:100px;
	background-color:#fc3;
}
</style></head> 
<body>
<div class="div1">div1
	<div class="div2">div2</div>
</div>

Результат:

высота и ширина блока css

float

блочность или обтекание

В обычном состоянии элемент div — блочный:
слои div в css

При использовании float элемент теряет блочность и выравнивается согласно значению:
css float left

При этом следует иметь в виду, что если блок, следующий дальше, не имеет установленного свойства float, то сам блок поместится за блок со значением свойства float:left. А содержимое блока (текст) будет обтекать блок со значением свойства float:left:

свойство float

Рис. Расположение блоков при использовании свойства float


Возможные значения float:

  • left
  • элемент выравнивается по левому краю, давая остальным элементам обтекать его справа

  • right
  • элемент выравнивается по правому краю, давая остальным элементам обтекать его слева

  • none
  • обтекание не задается (значение по умолчанию)

  • inherit
  • значение наследуется от родителя

Пример:

.left{
    float: left; /* Обтекание по правому краю */
    background: #fd0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    width: 40%; /* Ширина блока */
}
.right{
    float: right; /* Обтекание по правому краю */
    background: #fd0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    width: 40%; /* Ширина блока */
}
</style></head> 
<body>
<div class="left">float: left</div>
<div>Это пример обычного div. Это пример обычного div. Это пример обычного div. Это пример обычного div. Это пример обычного div.Это пример обычного div. Это пример обычного div.Это пример обычного div.Это пример обычного div. Это пример обычного div.</div>
<br/>
<div class="right">float: right</div>
<div>Это пример обычного div. Это пример обычного div. Это пример обычного div. Это пример обычного div. Это пример обычного div.Это пример обычного div. Это пример обычного div.Это пример обычного div.Это пример обычного div. Это пример обычного div.</div>
</div>

Результат:

css float left и right

clear

отмена обтекания
свойство css clear, отмена обтекания

Возможные значения:

  • left
  • отмена обтекания элемента слева

  • right
  • отмена обтекания элемента справа

  • both
  • отмена обтекания элемента и справа и слева

  • none
  • нет отмены обтекания (значение по умолчанию)

  • inherit
  • значение наследуется от родителя

Пример:

.left{
    float: left; /* Обтекание по правому краю */
    background: #fd0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    width: 40%; /* Ширина блока */
}
.clear{
    clear: left; /* Обтекание по правому краю */
}
</style></head> 
<body>
<div class="left">float: left</div>
<div class="clear">Это пример div с clear. Это пример div с clear.</div>

Результат:

свойство css clear пример

margin-left и margin-right

или выравнивание блока по центру

  • Значение auto для свойств margin-left и margin-right выравнивает блок по центру в своем контейнере (или браузере). При этом у элемента должна быть задана ширина.
  • Пример:

    .center{
        background: #fd0; /* Цвет фона */
        border: 1px solid black; /* Параметры рамки */
        width: 300px; /* Ширина блока */
        margin-left: auto;
        margin-right: auto;
    }
    </style></head> 
    <body>
    <div class="center">Это пример div</div>

    Результат:

    выравнивание блока по центру css

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

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

    *
    *

    Вставить формулу как
    Блок
    Строка
    Дополнительные настройки
    Цвет формулы
    Цвет текста
    #333333
    Используйте LaTeX для набора формулы
    Предпросмотр
    \({}\)
    Формула не набрана
    Вставить