|
CSS orqali elementning joylashishishi, ko`rinishi xususiyatlarini boshqarish (clear, clip, display, float, overflowBog'liq Screenshot 2022-06-16 at 10.08.12 AM
9.CSS orqali elementning joylashishishi, ko`rinishi xususiyatlarini boshqarish (clear, clip, display, float, overflow,
vertical-align, visibility) Clear-suzuvchi elementlarning qaysi
tomonlarida suzishga ruxsat berilmaganligini aniqlaydi.Sintaksisi clear: none|left|right|both|initial|inherit;
Img{ float:left;}
p.clear{ clear:both;}Clip-joylashtirilgan elementning tarkibini ko'rsatadigan maydonini belgilaydi. Ushbu sohaga mos kelmaydigan har qanday narsa kesiladi va ko'rinmas holga
keltiriladi.
Sintaksisi: clip: rect(Y1, X1, Y2, X2) | auto | inherit
#layer { position: absolute;
clip: rect(40px, auto, auto, 40px);
width: 200px;}
Display-Elementning hujjatda qanday ko'rsatilishini aniqlaydigan ko'p maqsadli xususiyat.
Sinatksisi:display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-
header-group | table-row | table-row-group
.example {
border: 1px solid black;
display:inline;}
Float- element qanday suzishi kerakligini belgilaydi.
Sintaksisi:float: none|left|right|initial|inherit;
.layer1{
float:left;
background:#1fd0;}
Overflow- agar u to'liq mos kelmasa va belgilangan o'lchamdan tashqarida bo'lsa, blok elementining tarkibini aks ettiradi.
Sintaksisi:overflow: auto | hidden | scroll | visible | inherit
.layer{
Overflow:scroll;
Width:50px; height;100px;}
Vertical-align-Elementni atrofdagi matn yoki jadval katakchasiga nisbatan vertikal ravishda tekislaydi.
Sintaksisi:vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
Img{ vertical-align:bottom;}
Visibility-elementning ko’rinish yoki ko’rinmasligini aniqlaydi.
Sintaksisi: visibility:visible|hidden
img{visibility:hidden;}
10.CSS orqali elementning o`lchamlari xususiyatlarini boshqarish
(width, height, min-width, min-height, max-width, max-height) Width-Blok yoki almashtiriladigan
elementlarning kengligini belgilaydi (masalan, tegi). Sintaksisi: width: auto|value|initial|inherit… Img{width:500px;}Height-Blok yoki almashtiriladigan elementlarning balandligini
belgilaydi(masalan, tegi) Sintaksisi: width: auto|value|initial|inherit Img{height:500px;} min-width- Elementning minimal kengligini o'rnatadi.
Agar brauzer oynasining kengligi belgilangan minimal element kengligidan kichikroq bo'lsa, u holda elementning kengligi o'zgarishsiz qoladi va oynada gorizontal o'tish satri paydo
bo'ladi.
Sintaksisi: min-width: auto|value|inherit
#container { min-width: 420px;}
Min-height- Elementning minimal balandligini o’rnatadi.
Sintaksisi: min-height: auto|value|inherit
#container { min-height: 420px;}
Max-width- Elementning maksimal kengligini o’rnatadi
Sintaksisi:max-width: auto|value|none|inherit
#container{max-width:500px;}
Max-height - Elementning maksimal balandlikni o’rnatadi
Sintaksisi:max-height: auto|value|none|inherit
#container{max-height:500px;}
Do'stlaringiz bilan baham: |
|
|