Labaratoriya-1

Natijasi:


Flexbox
Flex direction - asosiy o'qning yo'nalishini belgilab beradi va flex
items shu o'qga nisbatan joylashganligi uchun, ularning ham
yo'nalishi belgilanadi.
Flex wrap - odatda flex elementlarimiz bitta liniyada joylashadi lekin
flex wrap yordamida bu holatni o'zgartirish mumkin
Flex flow - flex-direction va flex-wrap xossalari uchun qisqartma
hisoblanadi
Justify content - asosiy o'qi bo'ylab elementlarni joylashuvini
belgilaydi va qo'shimcha bo'sh joyni taqsimlashga yordam beradi
DOCTYPE html>

Header

box1

box2

box3

main content

Sidebar

footer

.container{

width: 800px;
height: 500px;
background-color: azure;
}
.head{
height: 100px;
background-color: rgb(208, 64, 64);
}
.section{
height: 300px;
display: flex;
justify-content: space-between;
}
.content {
width: 580px;
display: flex;
flex-direction: column;
justify-content:space-evenly;
}
.box{
height: 80px;
display: flex;
justify-content: space-between;
}
.box > div{
width: 180px;
background-color: aqua;
}
.maincontent{
height: 160px;
background-color: coral;
}
.sidebar{
width: 200px;
height: 260px;
background-color: #444;
margin-top:20px;
}
.footer{
height: 100px;
background-color: rgb(79, 79, 228);
}

Natijasi:



O’lchov birliklari
CSS unit - CSS xossasining o'lchovini bildiradi. O'lchov birliklari ishlatilinadigan CSS xossalari: font-size, margin, padding, border, width, height, top, right, bottom, left va boshqalar
Eslatma: Raqam va birlik o'rtasida bo'shliq paydo bo'lishi mumkin emas. Biroq, agar qiymat bo'lsa 0, birlik o'tkazib yuborilishi mumkin.
Ba'zi CSS xususiyatlari uchun salbiy uzunliklarga ruxsat beriladi.
Uzunlik birliklarining ikki turi mavjud: mutlaq va nisbiy .
Absolute (mutloq) units - mutloq o'lchov birliklari qanday ko'rsatilgan bo'lsa hudda shunday ekranga chiqadi. Absolute o'lchov birliklarini ishlatish tavsiya etilmaydi chunki ular ekranga qarab o'z olchovini o'zgartirmaydi
Relative (nisbiy) units - nisbiy o'lchov birliklari boshqa uzunlik o'lchoviga nisbatan o'z uzunligini belgilaydi. Turli xil ekranlarga moslashishi mumkin
Position xossasi static yoki relative qiymatiga ega bo'lgan payti, biz ko'rsatgan foiz qiymatimiz eng yaqin block turidagi avlodining content qiymatiga nisbatan o'lchamga ega bo'ladi
Position xossasi absolute qiymatiga ega bo'lgan payti, biz ko'rsatgan foiz qiymatimiz eng yaqin positioned avlodining content va padding qiymatlarini yig'indisiga (content + padding) nisbatan o'lchamga ega bo'ladi
Foiz o'lchov birligi position xossasining qiymatiga qarab o'zgaradi. Ya'ni foiz o'lchov birligi "position"ning bir qiymati uchun boshqacha ikkinchi qiymati uchun esa umuman boshqa natijani beradi.
position: fixed
Position xossasi fixed qiymatiga ega bo'lgan payti, biz ko'rsatgan foiz qiymatimiz viewportga nisbatan o'lchamga ega bo'ladi.
em - o'lchov birligi bo'lib, elementimizning font-size xossasiga asoslanib hisoblanadi. Agar elementimizning font-size xossasi bo'lmasa, u ota-ona (parent) elementning font-size qiymati, unda ham bo'lmasa keyingi ajdodining (ancestor) font-size qiymatiga asoslanadi.
rem - o'lchov birligi bo'lib, sahifamizning root (ildiz) elementining font-size xossasiga asoslanib hisoblanadi. Root element bu html elementimizdir. Odatda html elementimiz 16px font qiymatiga ega bo'ladi.