belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
CSS >>>

5.1. Определение вида элемента

Еще в курсе изучения языка гипертекстовой разметки HTML мы упоминали о строчных и блочных элементах, а также о свойстве display, которое отвечает за то, как элемент будет отображаться браузером. В частности, узнали, что строчным элементам соответсвует значение inline, а блочным – block. Теперь же, настало время перечислить все значения, принимаемые ненаследуемым свойством display:

Использование некоторых значений свойства display показано в примере 5.1.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Свойство display</title>
	<style>
		.class_1{
		color: green;
		border: solid 2px blue;
		width: 250px;
		}
	</style>
</head>
<body>
	<span class="class_1">
		По умолчанию элемент 'span' является строчным элементом.
	</span>
	<p class="class_1">
		По умолчанию абзац является блочным элементом.
	</p><br>
	
	<p class="class_1" style="display: inline">
		Теперь абзац стал строчным элементом и его ширина 
		определяется содержимым.
	</p><br><br>
	<span class="class_1" style="display: block">
		Теперь элемент 'span' стал блочным элементом.
	</span><br>
	
	<p style="display: inline">Первый строчный 'p'.</p>
	<p class="class_1" style="display: inline-block">inline-block 'p'</p>
	<p style="display: inline">Второй строчный 'p'.</p>
</body>
</html>

Пример 5.1. Использование значений свойства display

Кстати, не забываем про универсальное значение inherit, которое указывает, что для элемента наследуется значение аналогичного свойства родительского элемента.

Контрольные вопросы и задания

  1. Подробно опишите свойство display.

Словарь новых английских слов

display [dɪˈspleɪ] – показывать, демонстрировать.
inline [ɪnˈlaɪn] – строчный.
run [rʌn] – бежать, скользить.
table [ˈteɪb(ə)l] – таблица, стол.
caption [ˈkæpʃn] – заголовок.
cell [sel] – отсек, ячейка.
row [rou] – ряд.
column [ˈkɑːləm] – столбец, колонка.
group [ɡruːp] – группа.
head [hed] – голова, головной.
foot [fʊt] – ступня, основание, нижняя часть.
list [lɪst] – список, каталог.
item [ˈaɪtəm] – пункт, параграф.
none [nʌn] – никакой, ничто.
relative [ˈrelətɪv] – относительный.
static [ˈstætɪk] – неподвижный, статичный.
move [mu:v] – двигать, перемещать.
absolute [ˈæbsəluːt] – абсолютный, безусловный.
fixed [fɪkst] – неподвижный, закрепленный.
bottom [ˈbɑːtəm] – самый нижний, последний.
clip [klɪp] – урезать, обрезать.
float [floʊt] – плавать.
margin [ˈmɑːrdʒən] – поле страницы, запас.
overflow [oʊvərˈfloʊ] – переполнять.
hidden [ˈhidn] – скрытый, спрятанный.
clear [klɪə] – очищать.
both [boʊθ] – оба.
visibility [ˌvɪzəˈbɪləti] – видимость, обзор.
collapse [kəˈlæps] – сплющивание.
opacity [oʊˈpæsəti] – непрозрачность.
align []əˈlaɪn – ставить в ряд.
vertical [ˈvəːtɪk(ə)l] – вертикальный, отвесный.
middle [ˈmɪdl] – средний.
resize [rɪˈsaɪz] – изменять размер.
Комментарии (4)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
MikeBY
Странно, почему в примере 5.1 у первого и третьего элемента различны расстояния после точки. Оба ведь строчные...
№13 от 2017-10-17 23:34:58
Нравится ()
Ответить
Петр Романовский
MikeBY
MikeBY
Странно, почему в примере 5.1 у первого и третьего элемента различны расстояния после точки. Оба ведь строчные...
2017-10-17 23:34:58
MikeBY, хорошее наблюдение! Попробуйте в Firefox, там этого пробела не будет. Он
появляется, например, в Опере, Хроме или том же Яндексе.

Откуда же 'ноги растут'? Попробуем разобраться. Ага, скорее всего, дело в том, что
браузеры, кроме Firefox, преобразовали переносы строк перед закрывающими тегами
указанных элементов в зависимости от того, идут ли после них элементы 'br'
(принудительные переносы строк) или нет (посмотрите внимательно код). Попробуйте
скопировать код и посмотреть его на локалке. Только добавьте 'br' и после первого
элемента (наш 'span'), тогда у него тоже появится пробел. В тоже время, если убрать
перевод строки перед закрывающим тегом третьего элемента (элемент 'p'), то эти
браузеры сработают, как и Firefox, пробелов не будет.

Короче, как видим, браузеры могут косячить с переводом разрывов строк в коде в пробелы
при отображении содержимого на экране. И вообще, косяки есть у всех и не только такие
мелкие! К этому нужно привыкать и учиться их обходить таким образом, чтобы наши сайты
выглядели одинаково во всех браузерах. Хотя следует отметить, что в настоящее время
все производители стараются максимально придерживаться стандартов, что значительно
облегчает нам жизнь) Спасибо им за это!
№19 от 2017-10-18 13:09:31
Нравится ()
Ответить
MikeBY
Петр Романовский
Петр Романовский
MikeBY, хорошее наблюдение! Попробуйте в Firefox, там этого пробела не будет. Он
появляется, например, в Опере, Хроме или том же Яндексе.

Откуда же 'ноги растут'? Попробуем разобраться. Ага, скорее всего, дело в том, что
браузеры, кроме Firefox, преобразовали переносы строк перед закрывающими тегами
указанных элементов в зависимости от того, идут ли после них элементы 'br'
(принудительные переносы строк) или нет (посмотрите внимательно код). Попробуйте
скопировать код и посмотреть его на локалке. Только добавьте 'br' и после первого
элемента (наш 'span'), тогда у него тоже появится пробел. В тоже время, если убрать
перевод строки перед закрывающим тегом третьего элемента (элемент 'p'), то эти
браузеры сработают, как и Firefox, пробелов не будет.

Короче, как видим, браузеры могут косячить с переводом разрывов строк в коде в пробелы
при отображении содержимого на экране. И вообще, косяки есть у всех и не только такие
мелкие! К этому нужно привыкать и учиться их обходить таким образом, чтобы наши сайты
выглядели одинаково во всех браузерах. Хотя следует отметить, что в настоящее время
все производители стараются максимально придерживаться стандартов, что значительно
облегчает нам жизнь) Спасибо им за это!
2017-10-18 13:09:31
Петр Романовский, Да, всё работает. Но теперь непонятно, почему между первым(строчным) и вторым(блочным) элементом есть отступ. А между третьим(строчным) и четвёртым(блочным) отступ почему то отсутствует. Хотя по логике вещей он должен быть. У него почему то margin: 0px. С чем это может быть связано?
№23 от 2017-10-18 19:10:18
Нравится ()
Ответить
Петр Романовский
MikeBY
MikeBY
Петр Романовский, Да, всё работает. Но теперь непонятно, почему между первым(строчным) и вторым(блочным) элементом есть отступ. А между третьим(строчным) и четвёртым(блочным) отступ почему то отсутствует. Хотя по логике вещей он должен быть. У него почему то margin: 0px. С чем это может быть связано?
2017-10-18 19:10:18
MikeBY, по умолчанию (т.е. если мы не задаем эти самые отступы явно) браузеры как раз и задают блочным элементам свои отступы (margins). Поэтому я и советую в учебнике обнулять для всех элементов отступы в самом начале таблицы стилей. А далее, уже устанавливать любые отступы по своему усмотрению. В данном же случае для четвертого элемента мы использовали display: block, поэтому браузер и не установил значение отступов по умолчанию. Короче, советую обнулять отступы, чтобы потом не было сюрпризов.
№25 от 2017-10-18 20:05:53
Нравится ()
Ответить
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх