Ölçülərin ölçülməsi

3.1 width xüsusiyyəti

CSS-də blokların ölçüləri veb səhifələrin layout qurulmasında böyük rol oynayır. Onlar elementlərin necə göstəriləcəyini və ətrafındakı elementlərlə necə qarşılıqlı əlaqədə olacağını müəyyən edir. İndi isə width, height, max-width və max-height xüsusiyyətlərini nəzərdən keçirəcəyik, hansılar ki, blokların ölçülərini təyin etməyə imkan verir.

width xüsusiyyəti elementin enini təyin edir. Bu, müxtəlif ölçü vahidləri ilə təyin edilə bilər, məsələn, piksellər (px), faizlər (%), em, rem və digər.

Dəyərlər

• Avtomatik dəyər: auto — elementin eni onun məzmunu və ətraf mühiti əsasında avtomatik təyin edilir
• Absolyut vahidlər: px, pt, cm, mm, in və digər
• Nisbi vahidlər: %, em, rem, vw, vh və digər

İstifadə nümunəsi:

    
      .box {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-fixed {
        width: 200px;
      }

      .box-percentage {
        width: 50%;
      }
    
  

    
      <div class="box box-fixed">Sabit en (200px)</div>
      <div class="box box-percentage">Faizlə eni (50%)</div>
    
  

Kod izahı:

• .box-fixed: sabit eni olan 200 piksel genişlikdə element
• .box-percentage: valideyn elementin 50%-i enində olan element

3.2 height xüsusiyyəti

height xüsusiyyəti elementin hündürlüyünü təyin edir. Bu həmçinin müxtəlif ölçü vahidlərində də təyin oluna bilər.

Qiymətlər:

• Avtomatik dəyər: auto — elementin hündürlüyü onun məzmunu və ətrafına əsaslanaraq avtomatik olaraq təyin olunur
• Absolyut vahidlər: px, pt, cm, mm, in və digərləri
• Nisbi vahidlər: %, em, rem, vh, vw və digərləri

İstifadə nümunəsi:

    
      .container {
        height: 300px;
      }

      .box {
        color: white;
        padding: 10px;
      }

      .box-fixed-height {
        height: 150px;
        background-color: #2ecc71;
      }

      .box-percentage-height {
        height: 50%;
        background-color: #7a5c71;
      }
    
  

    
      <div class="container">
        <div class="box box-fixed-height">Sabit hündürlük (150px)</div>
        <div class="box box-percentage-height">Faizlə hündürlük (50%)</div>
      </div>
    
  

Kodun izahı:

• .box-fixed-height: hündürlüyü 150 piksel olan element
• .box-percentage-height: valideyn elementinin 50%-i qədər hündürlüyə malik olan element

3.3 max-width Xüsusiyyəti

max-width xüsusiyyəti bir elementin maksimum enini təyin edir. Bu, elementin müəyyən edilən dəyərdən genişlənməsinin qarşısını alan bir məhdudiyyətdir.

Dəyərlər:

• Məhdudiyyət yoxdur: none — element istənilən enə qədər genişlənə bilər
• Absolyut vahidlər: px, pt, cm, mm, in və digərləri
• Nisbi vahidlər: %, em, rem, vh, vw və digərləri

İstifadə nümunəsi:

    
      .box {
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-max-width {
        width: 100%;
        max-width: 300px;
      }
    
  

    
      <div class="box">100% (varsayılan olaraq)</div>
      <div class="box box-max-width">Maksimum eni 300px</div>
    
  

Kodun açıqlaması:

• .box-max-width: maksimum eni 300 piksel olan element. Məzmun elementin 300 pikseldən daha genişlənməsinə icazə verməyəcək

3.4 max-height Xassəsi

max-height xassəsi elementin maksimum hündürlüyünü müəyyən edir. Bu, elementin təyin edilmiş dəyərdən kənara çıxmasının qarşısını alan məhdudiyyətdir.

Dəyərlər:

• Məhdudiyyət yoxdur: none — element istənilən genişliyə qədər genişlənə bilər
• Absolut vahidlər: px, pt, cm, mm, in və digərləri
• Nisbi vahidlər: %, em, rem, vh, vw və digərləri

İstifadə nümunəsi:

    
      .box {
        background-color: #9b59b6;
        color: white;
        padding: 10px;
        max-height: 35px;
        overflow: auto;
      }
    
  

    
      <div class="box">
        <p>Scroll-u göstərmək üçün əlavə mətn.<br>Scroll-u göstərmək üçün əlavə mətn.<br>Scroll-u göstərmək üçün əlavə mətn.</p>
      </div>
    
  

Kodun izahı:

• .box-max-height: maksimum 100 piksel hündürlüyü olan element. Əgər elementin tərkibi bu dəyəri aşarsa, overflow: auto; xassəsi sayəsində scroll yaranacaq.