Bloklar joylashuvi mavzusini davom ettiraman, navbatdagi CSS xususiyatimiz «clip» deb nomlanadi va bu xususiyat blok ichidagi kontentni, qancha qismi  namoyon bo‘lishini aniqlashtirib beradi. Bu xususiyat ichiga koordinata nuqtalari beriladi va shu nuqtalar orasida yotgan kontent qismi ko‘rinadi holos.

Kontent faqatgina to‘rtburchak ko‘rinishda kesib olinishi mumkin va beriladigan koordinata o‘qlari quyidagi ketma-ketlikda beriladi: Y1, X1, Y2, X2. Bu koordinata o‘qlari oldidan «rect» degan kalit so‘z ishlatiladi. Tushunarli bo‘lishi uchun misol ko‘ramiz.

<html>
 <head>
  <title>Clip</title>
  <style>
  .clip{
 position: absolute;
   clip: rect(40px, 180px, 150px, 10px);
   width: 250px;
   color: white;
   background: red;
   border: 1px solid blue;
   padding: 20px;
   }
  </style>
 </head>
 <body>
<div class="clip"> Hozirgi vaqtda viruslarni yo'qotish
uchun ko'pgina usullar ishlab chiqilgan va
bu usullar bilan ishlaydigan dasturlarni antiviruslar deb atashadi.
Antiviruslarni, qo'llanish usuliga ko'ra, quyidagilarga ajratishimiz
mumkin: detektorlar, faglar, vaktsinalar, privivkalar, revizorlar.</div>
 </body>
 </html>

Natija tushunarli bo‘lishi uchun, koordinatalarni ko‘rsatib o‘taman.

css15_1

Navbatdagi CSS xususiyatimiz bloklarni ko‘rinarli va ko‘rinmas holga keltiradi, ya’ni «visibility» xususiyati. Bu amalni «display» orqali ham amalga oshirish mumkin, lekin bu ikkisini farqi bor. «Visibility» orqali blokni ko‘rinmas holga olib kelsa, blok uchun ajratilgan joyni hech kim ishlata olmaydi, ya’ni blok joyi saqlanib qoladi, «display» xususiyatida esa blok joyi saqlanmaydi(display haqida keyinroq). Bu xususiyatni quyidagi asosiy qiymatlari mvjud:

visible — blokni ko‘rinarli holga olib keladi;

hidden — blokni ko‘rinmas holga olib keladi;

Misol ko‘ramiz,

<html>
 <head>
  <title>Visibility</title>
  <style>
  .vis{
  height:150px;
  width:200px;
  background:black;
  color:white;
  border:1px solid gray;
  visibility:hidden;
   }
  </style>
 </head>
 <body>
<div class="vis">Boxing Day!</div>
<div>Boxing Day!</div>
 </body>
 </html>

Natijada, «vis» klasi bilan yozilgan yozuv ko‘rinmaydi, lekin 150×200 o‘lchamdagi joy bo‘sh qoldiriladi va undan keyin keyingicss15_2 elementlar chiqariladi.

Agar, «visibility:visible» qilib blokni ko‘rintirsak, quyidagi ko‘rinishda bo‘ladi.

css15_3

Davom etamiz, bloklarni hosil qildik, uni ichini to‘latdik ham deylik, agar blok ichidagi kontent blok ichiga sig‘masa nima bo‘ladi? bu holni ham CSS o‘ylab qo‘ygan. Aynan kontent blok ichiga sig‘masa nima qilish kerakligini «overflow» xususiyati orqali berib qo‘yishimiz mumkin, uning quyidashi qiymatlari mavjud:

visible — kontent blok ichiga sig‘masa ham to‘liq ko‘rsatish;

hidden — kontentning faqat blok ichiga sig‘gan qismi ko‘rinadi holos;

scroll — har doim o‘tkazgich(prokrutka)  ko‘rsatish;

auto — o‘tkazgich faqat kerak bo‘lganda paydo bo‘ladi.

Eng yaxshisi, «auto» qiymati bo‘lsa kerak, yana o‘ziz bilasiz, demak misol ko‘ramiz:

<html>
 <head>
  <title>Over</title>
  <style>
  .over{
                height:90px;
                width:150px;
                background:yellow;
                overflow:auto;
   }
  </style>
 </head>
 <body>
<div class="over">
Glory, glory, Man United
Glory, glory, Man United
Glory, glory, Man United
As The Reds Go Marching On On On
</div>
 </body>
 </html>

Qiymatdan ko‘rinib turibdiki(auto), kerak bo‘lsa o‘tkazgich paydo bo‘ladi, bizning misolda kerak.

css15_4

Keyingi CSS xususiyatimiz, vertikal bo‘ylab joylashtirish deb nomlanadi, ya’ni «vertical-align«. Elementni vertikal bo‘ylab tekislash yoki shu elementni istalgancha yuqori va pastga o‘rnatish mumkin. Quyidagi qiymatlarni qabul qiladi:

baseline — elementni vertikal bo‘ylab asosiy chiziqga o‘rnatish(odatiy hol);

bottom — eng quyida turgan element bilan bir chiziqga joylashtirish;

middle — elementni vertikal bo‘ylab asosiy chiziq markazidan boshlab  o‘rnatish;

sub — quyi indeks ko‘rinishida joylashtirish;

super — yuqori yendeks ko‘rinishida joylashtirish;

text-bottom — elementning eng quyi chiqig‘i bo‘ylab joylashtirish;

text-top — elementning eng yuqori chizig‘i bo‘ylab joylashtirish;

top — eng yuqori turgan element bilan bir chiziqga joylashtirish;

Bu qimatlardan tashqari, foizlar, piksellar ko‘rinishida ham qiymat berish mumkin, mening fikrimcha piksellar orqali berganingiz qulayroq. Misol ko‘ramiz,

<html>
 <head>
  <title>ver_align</title>
  </head>
 <body>
<div style="font-size:30px;">
<span style="vertical-align:sub">M</span>anch<span style="vertical-align:middle;">e</span>se<span style="vertical-align:bottom;">R</span>
<span style="vertical-align:10px">U</span>
<span style="vertical-align:8px">N</span>
<span style="vertical-align:6px">I</span>
<span style="vertical-align:4px">T</span>
<span style="vertical-align:2">E</span>
<span style="vertical-align:middle">D</span>
</div>
 </body>
 </html>

Natijasi chiroyli ko‘rinishga ega bo‘ladi:

css15_5