Blok elementləri ilə əməliyyatlar

Brauzerdə səbəbi tap

Inspect ilə elementi seç. Elements sənədin cari DOM quruluşunu, Styles uyğun və üstündən xətt çəkilmiş qaydaları, Computed yekun xassələri göstərir. Brauzerin ilkin üslubları da nəticəyə təsir edir. DevTools-da dəyişiklik adətən fayla yazılmır və yeniləmədə itir.

<a class="tag" href="/lessons/m1-lesson-02/">HTML</a>
<a class="tag" href="/lessons/m1-lesson-04/">CSS</a>

Nümunə

.tag {
  display: inline-block;
  width: 120px;
  padding: 12px;
  margin: 8px;
  border: 1px solid currentColor;
}

Nümunə

display nəyi dəyişir?

block yeni blok qutusu yaradır, inline mətn axınında qalır və ona verilən en/hündürlük blokdakı kimi işləmir. inline-block mətn axınında yanaşı durur, amma en və hündürlük qəbul edir. none elementin layout-dakı yerini də götürür.

Nümunədə display dəyərini dəyişərək nəticəni ölç. visibility: hidden ilə display: none-u müqayisə et: birincidə yer saxlanır. Görünməyən vacib idarəetmənin istifadəçiyə necə açılacağını düşün. Səhvi tapdıqdan sonra doğru qaydanı CSS mənbə faylına köçür.

Əlavə qeydlər və mənbələr

DevTools-un Elements və Styles bölmələrində sənəd ağacını və tətbiq edilən qaydaları araşdır. display vasitəsilə block, inline, inline-block və none davranışlarını dəyiş və nəticənin səbəbini izah et.

Niyə vacibdir?

CSS qaydalarını anlamaq dizaynı təsadüfi düzəlişlərlə deyil, məqsədli şəkildə qurmağa imkan verir.

Əvvəlki biliklər

HTML və semantik struktur

Bu mövzuda

Elements və Styles
Computed ölçülər və box model
display və element davranışı

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Elementin davranışını dəyiş

Eyni blok üçün display dəyərlərini yoxla. Sonra inline-block seç.

display

Hədəf: inline-block davranışını göstər.

Məzmun

.element { display: block; }

Özün sına

Bir keçidi əvvəl inline, sonra inline-block et. Eyni padding, width və height ilə fərqi ölç və düzəlişi mənbə faylında saxla.

Nəticəni necə yoxlayım?

Computed panelində ölçünü tapır, inline və inline-block fərqini göstərir və müvəqqəti DevTools düzəlişini faylda saxlayırsan.

Gözlənilən nəticə

İkinci keçid 120×50 px sahə tutur.
Birinci keçiddə width və height sətir daxili elementin ölçüsünü həmin qaydada təyin etmir.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

inline element width və height ilə blok kimi ölçülənmir. inline-block eyni sətirdə qalaraq bu ölçüləri qəbul edir.

index.html

<!doctype html>
<html lang="az">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nümunə səhifə</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Əvvəl: <a class="tag inline" href="#html">HTML</a> mətn.</p><p>Sonra: <a class="tag block" href="#css">CSS</a> mətn.</p><p id="html">HTML</p><p id="css">CSS</p>
</body>
</html>

styles.css

.tag{width:120px;height:50px;padding:8px;background:#e9f881}.inline{display:inline}.block{display:inline-block;box-sizing:border-box}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.