Четверг, 07 Февраля 2013 13:34

Тег div

Written by 
Оцени эту запись
(2 Голоса)

Элемент <div> является блочным, начинается с новой строки и добавляет перенос строки после себя. Элемент <div> предназначен для выделения части содержимого для задания ему особого оформления, для объединения блочных элементов. Элемент <div> является частью HTML страницы и может служить для создания разметки страницы.

 

Тег div

Атрибуты <div>

 

Элементу <div> применимы все глобальные атрибуты и атрибуты событий. Кроме этого, в спецификации HTML4 описан атрибут align(не поддерживается в HTML5), который задает выравнивание внутреннего содержимого блока. Атрибут align может принимать значения left(выравнивание содержимого слева), right(справа), center(по центру) и justify(на всю ширину).

 

Разметка страницы

 

Хочу подчеркнуть, что тег <div> является одним из самых основных элементов HTML. Совместно с CSS при помощи <div> можно не только объединять элементы для оформления, но и делать разметку страницы:

 

 

 
 
 
 
 

 

HTML код:

 

 

 

<div class="wrapper_div">
<div class="header_div"></div>
<div class="left_div"></div>
<div class="right_div"></div>
<div class="center_div"></div>
<div class="clear_div"></div>
<div class="footer_div"></div>
</div>
 
При помощи набора элементов <div> и CSS свойства float можно легко создать простой трехколоночный макет.
 
 
 
Примечание 1. Элемент <div> поддерживается всеми основными браузерами.
 
 
 
Примечание 2. Элемент <div> должен содержать открывающий и закрывающий теги:
 
 
<div>Text</div>
 

Размеры элемента <div> и свойство overflow

 
 
По умолчанию по ширине элемент <div> занимает 100% ширины родителя, а по высоте зависит от содержимого. Но это можно изменить, задав элементу фиксированные размеры:
 
 
div {
width: 300px;
height: 200px;
}
 
 
Или же можно задать размеры блока в процентах, которые отсчитываются от размеров родительского элемента:
 
 
div {
width: 30%;
height: 20%;
}

 

При большом количестве содержимого элемента <div> и при заданных его фиксированных размерах, содержимое может вылазит за пределы блока. Это можно контролировать при помощи CSS свойства overflow:

 

  • hidden -- скрывает содержимое, которое не помещается в элемент 
  • scroll -- добавляет полосы прокрутки для прокрутки содержимого внутри элемента
  • auto -- добавляет полосы прокрутки только когда содержимого слишком много 

 

Атрибуты class и id

 

Для стилизации (оформления) элемента <div> можно использовать CSS стили, задав блоку <div> атрибут class:

 

 

<div class="my_class">Text</div>

 

<style>

.my_class {

color: red;

}

</style>

 

 

Пример:

 

Text

 

 

Для обращения к элементу из JavaScript нужно задать элементу атрибут id(идентификатор):

 

<div id="my_elem">Click Me</div>

 

<script>

function (){

var a = document.getElementById('my_elem');

a.addEventListener('click', function (){

alert('Thank You!');

})

}

</script>

 

 

Пример:

 

Click Me

 

 

Атрибут contenteditable

 

В HTML5 появился очень интересный атрибут contenteditable, которые делает элемент редактируемым. Чаще всего данный атрибут применяется к элементу <div>. При помощи атрибута contenteditable можно изменять содержимое элемента, например, текст. Атрибут может принимать значения true или false.

 

 

<div contentaditable="true"></div>

 

 

Пример:

 

 

Вы можете редактировать этот текст

 

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов