4.1 Box-sizing xüsusiyyəti
CSS-də box-sizing xüsusiyyəti element ölçüləri modelini idarə etmək üçün güclü bir vasitədir. Bu, elementin ölçülərinin, genişlik və hündürlük daxil olmaqla, həmçinin padding, sərhədlər və xarici aralıqların necə hesablandığını müəyyən edir. Aşağıda biz box-sizing-in necə işlədiyini və onun veb-səhifənin layoutuna necə təsir edə biləcəyini ətraflı şəkildə nəzərdən keçirəcəyik.
Əsas box-sizing modelləri
Content-box (məzmun modeli)
content-box dəyəri bütün elementlər üçün defolt dəyərdir. Bu modeldə elementin ölçüləri (width və height) yalnız məzmunun ölçülərini müəyyən edir, padding və sərhədlər istisna olunur. Bu o deməkdir ki, padding və sərhədlər elementin ümumi genişlik və hündürlüyünə əlavə olunur.
Border-box (sərhəd modeli)
border-box dəyəri ölçü modelini elə dəyişir ki, elementin ölçüləri (width və height) padding və sərhədləri də daxil edir. Bu o deməkdir ki, padding və sərhədlər elementin ümumi genişlik və hündürlüyünə daxildir, bu isə ölçülərin hesablanmasını və idarə edilməsini sadələşdirir.
Box-sizing istifadəsinin nümunəsi:
.box {
background-color: #3498db;
color: white;
padding: 20px;
border: 5px solid #2c3e50;
margin: 10px;
width: 200px;
height: 100px;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
<div class="box content-box">Content-box: genişlik və hündürlük yalnız məzmunu daxil edir.</div>
<div class="box border-box">Border-box: genişlik və hündürlük padding və sərhədləri daxil edir.</div>
Kodun izahı:
.box: bütün box-lar üçün base stil, padding, sərhədlər və ölçüləri daxil edir.content-box: box-sizing: content-box dəyəri olan element, burada genişlik və hündürlük yalnız məzmunu daxil edir.border-box: box-sizing: border-box dəyəri olan element, burada genişlik və hündürlük padding və sərhədləri daxil edir
4.2 Box-sizing-in layout-a təsiri
Məzmun modeli (Content-box)
box-sizing: content-box; istifadə olunan zaman, otstup və sərhədlər elementin ümumi eni və hündürlüyünə əlavə olunur. Bu, ölçülərin və elementlərin mövqeyini hesablayarkən əlavə nəzərə alınma tələb edə bilər.
İstifadə nümunəsi
Bu halda, elementin ümumi eni 200px + 20px (padding) * 2 + 5px (border) * 2 = 250px, və ümumi hündürlük 100px + 20px (padding) * 2 + 5px (border) * 2 = 150px olacaq.
.content-box {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box content-box">Content-box: eni və hündürlük yalnız məzmunu əhatə edir.</div>
Sərhəd modeli (Border-box)
box-sizing: border-box; istifadə olunan zaman, otstup və sərhədlər verilən eni və hündürlüyə daxil edilir. Bu, ölçüləri və elementin ölçüsünü idarə etməyi asanlaşdırır, xüsusilə də adaptiv layout yaradarkən.
İstifadə nümunəsi:
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box border-box">Border-box: eni və hündürlük otstup və sərhədləri də əhatə edir.</div>
4.3 Adaptiv layout yaratmaq
box-sizing: border-box; istifadəsi adaptiv layout qurmağı asanlaşdırır, çünki elementlərin ölçüləri padding və border-i də daxil edir, gözlənilməz daşmaları qarşısını alır.
İstifadə nümunəsi:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
background-color: #f4f4f4;
}
.item {
flex: 1 1 calc(33.333% - 20px);
padding: 20px;
border: 5px solid #3498db;
background-color: #fff;
}
<div class="container">
<div class="item">Element 1</div>
<div class="item">Element 2</div>
<div class="item">Element 3</div>
<div class="item">Element 4</div>
<div class="item">Element 5</div>
<div class="item">Element 6</div>
</div>
Kod izahı:
* { box-sizing: border-box; }: səhifədəki bütün elementlərdə sərhəd modelinin tətbiqi ilə ölçülərin idarə edilməsini asanlaşdırır.container: adaptiv layout ilə Flex-container.item: genişliyi bərabər paylanan və padding və border-i ümumi genişliyə daxil edən Flex-elementlər
4.4 Fiksə olunmuş ölçülər ilə daxili boşluqlar
box-sizing: border-box; istifadəsi elementlərin daxili boşluqları ilə fiksə olunmuş ölçüləri təyin etməyə imkan verir və həddindən artıq dolma haqqında narahat olmadan istifadə olunur.
İstifadə nümunəsi:
.fixed-size {
box-sizing: border-box;
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #2ecc71;
background-color: #ecf0f1;
text-align: center;
line-height: 150px; /* Mətnin şaquli istiqamətdə ortalanması */
}
<div class="fixed-size">
Fiksə olunmuş ölçülər
</div>
Kodun izahı:
.fixed-size: padding və border daxil olmaqla 300x150 piksel olan fiksə olunmuş ölçüləri ilə element, bu onun ölçülərinə tam nəzarət etməyə imkan verir
GO TO FULL VERSION