CSS свойство display - block. Что это такое и к чему приведет?

5 / 5

Автор: Администратор

06.09.2016

Теги: css, display, block, свойство

В этой статье речь пойдет о таком свойстве, как display и его значении block.

Свойство display позволяет изменить способ отображения определенного элемента на странице. Если в качестве значения задать block - тогда это приведет к тому, что любой элемент будет отображаться аналогично тегу div.

Это значит, что если не задана ширина, то она примет значение 100% и элемент станет тянутся на всю ширину. Так же это значит, что без свойства float, другие элементы не смогут оказаться слева или справа на одному уровне с этим элементом. Так же это значит, что элемент можно отцентровать при помощи свойства margin, и начинаем работать свойство padding для этого элемента.

Например, таким образом можно изменить способ отображения тега <a> или <span>. Зачем такое нужно? В случае, когда мы хотим сделать ссылку кнопкой или каким то специальным образом отобразить элемент <span>.

Рассмотрим простой пример:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta name="viewport" content="width=device-width" />    
<link rel="stylesheet" href="/css/template.css" type="text/css" />
<title>Страница</title>
</head>
<body>
	<a href="#">Кнопка-ссылка</a>
</body>
</html>

/* Общие стили */
body {
	margin:0;
}
/* Общие стили закончилась */


a {
	display:block;
	padding:10px;
	width:200px;
	text-align:center;
	margin:20px auto;
	background:#4E0E0F;
	color:#fff;
	text-decoration:none;
	border-radius:6px;
	box-shadow:0 2px 6px rgba(0,0,0,0.3);
}

	a:hover {
		box-shadow:none;
	}

Результат можно увидеть на демо-странице:

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

Авторизоваться с помощью:

Поиск по сайту

Топ 10 активных пользователей

Имя пользователя Баллы
gawk
44.20
ZOMRO
30.60
hr@proovelab
15.00
intuit89
8.40
Varvarka
4.00
Akyla58
3.00
AnnaOl
3.00
dimasik_3557
3.00
ErcardSa
3.00
Galinamuh
3.00

Рекламные ссылки

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

Похожие материалы

Языки программирования сайтов Просмотров 15670

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее

Удобное собрание CSS хаков для самых поп... Просмотров 10630

Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее

!important в CSS Просмотров 3959

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее

Как подключать свои шрифты на сайт, или ... Просмотров 6113