Пятница, 11 Мая 2012 15:01

Свойство overflow

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

Свойство overflow имеет следующие значания:

 

  • auto
  • hidden
  • scroll
  • visible

 

Свойство применяется для блочных элементов с указанными размерами высоты и ширины.

Auto - полосы прокрутки появляются только в случае необходимости, когда содержимое блока больше, чем его размеры

Hidden - содержимое блока, которое не помещается в его размеры, скрывается

Scroll - полосы прокрутки появляются в любом случае

Visible - содержимое отображается, даже если оно больше самого блока 

 

Примеры применения свойств:

 

Overflow: auto

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

 

<div style="width: 300px; height: 200px; overflow: auto"><img src="http://kate-land.net/media/demos/slider_gallery2/images/home_slider4.jpg"></div>

 

 

 

 

Overflow: hidden

Аналогично, картинка больше блока. Но теперь мы не видим те ее части, которые в блок не поместились. Они просто скрыты.

 

 

<div style="width: 300px; height: 200px; overflow:hidden"><img src="http://kate-land.net/media/demos/slider_gallery2/images/home_slider4.jpg" /></div>
 
 
 
 
 
 
Overflow: scroll
 
Для наглядности, я уменьшила размеры картинки. Но полосы прокрутки все равно отображаются.
 
 
<div style="width: 300px; height: 200px; overflow:scroll"><img src="http://kate-land.net/media/demos/slider_gallery2/images/home_slider4.jpg" width="100" /></div>
 
 
 
 
 
 
 
Overflow: visible
 
В этом примере картинка снова больше, чем блок. Как мы можем видеть, какртинка отображается полного размера, независимо от размеры блока. Я обвела блок красным бордером, чтобы было видно где он заканчивается 
 
<div style="width: 300px; height: 200px; overflow:visible border: 1px solid red;"><img src="http://kate-land.net/media/demos/slider_gallery2/images/home_slider4.jpg" /></div>
 
 
 
 
 
 
 
 
 
 

You have no rights to post comments

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