Latest web development tutorials
×

CSS курс

CSS курс CSS Краткое введение CSS грамматика CSS Id и Class селектор CSS создать CSS фон(background) CSS текст(text) CSS шрифты(Fonts) CSS ссылка(link) CSS стили списка(ul) CSS таблица(table) CSS Box модель CSS рамка(border) CSS контур(outline) CSS маржа(margin) CSS начинка(padding) CSS Группировка и вложенность CSS размер(Dimension) CSS дисплей(display) CSS разместить(position) CSS терка(float) CSS выравнивать(align) CSS Сочетание селекторов CSS Псевдо-классы CSS Псевдо-элемент CSS Панель навигации CSS Выпадающее меню CSS Галерея изображений CSS Прозрачное изображение/непрозрачный CSS технологии мозаики изображения CSS Тип носителя CSS селекторы атрибутов CSS резюме CSS примеров

CSS3 курс

CSS3 курс CSS3 Краткое введение CSS3 рамка(border) CSS3 фон CSS3 постепенное изменение CSS3 Текстовые эффекты CSS3 шрифты CSS3 2D изменение CSS3 3D изменение CSS3 переход CSS3 анимация CSS3 Multi-колонки CSS3 Пользовательский интерфейс

CSS Адаптивный дизайн

Viewport Grid View Медиа-запросы изображение видео(video) рамка

CSS справочное руководство

CSS справочное руководство CSS селектор CSS Речь Ссылка CSS Web Безопасные шрифты CSS анимация CSS блок CSS цвет CSS значения цвета CSS название цвета CSS шестнадцатеричный цвет

CSS Display (дисплей) и видимость (видимость)

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

Вставка 1

Вставка 2
Вставка 3

Скрытые элементы - дисплей: нет или видимость: скрытый

Скрыть элемент с помощью атрибута дисплея установлено значение "Нет", или собственности видимость "скрытой". Заметим, однако, эти два метода будут получаться различные результаты.

видимость: скрытый, чтобы скрыть элемент, но скрытый элемент остается такой же, как до оккупации и не спрятался пространство. То есть, хотя элемент скрыт, но до сих пор влияют на макет.

примеров

h1.hidden {visibility:hidden;}

Попробуйте »

дисплей: нет, чтобы скрыть элемент, и скрытые элементы не занимают места. Другими словами, этот элемент не только скрыт, и пространство, занимаемое исходного элемента исчезнет из макета страницы.

примеров

h1.hidden {display:none;}

Попробуйте »


CSS Дисплей - Блок и встроенные элементы

Блок элемент является элементом, занимая всю ширину разрыва строки до и после него.

Примеры блочных элементов:

  • <H1>
  • <P>
  • <Div>

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

Примеры встроенных элементов:

  • <SPAN>
  • <a>

Как изменить элемент отображения

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

Следующий пример показывает элементы списка в качестве встроенных элементов:

примеров

li {display:inline;}

Попробуйте »

Следующие элементы пример пролетных как блок элементов:

примеров

span {display:block;}

Попробуйте »

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


примеров

Другие примеры

Как отображать встроенный элемент.

Этот пример демонстрирует, как отображение встроенных элемента.

Как отобразить блок - элемент.

Этот пример показывает, как отобразить элемент блочного элемента.

Как использовать коллапс недвижимости стол.

Этот пример демонстрирует, как использовать таблицу свойств коллапса.