2.10 Súwret jaylastırıwdıń túrli usillarınan paydalanıw.
Eger hújjetti tómenge aylandırsańiz, belgilengen obyekt óz ornında qalǵanlıǵı kózge túsedi. Kóriwińiz múmkin, bul obyekt 100 piksel tómende jaylasqan hám onıń gorizontal jılısıwı 0, salıstırmalı jaylastırılǵan element bolsa 8 piksel joqarıda hám shep tárepten 110 piksel jıljıtıp jaylasqan.
2.5 mısal. Túrli jaylastırıw mánislerinen paydalanıw.
<!DOCTYPE html>
<html>
<head>
<title>Positioning</title>
<style>
#object1 {
position :absolute;
background:pink;
width :100px;
height :100px;
top :100px;
left :0px;
}
#object2 {
position :relative;
background:lightgreen;
width :100px;
height :100px;
top :-8px;
left :110px;
}
#object3 {
position :fixed;
background:yellow;
width :100px;
height :100px;
top :100px;
left :236px;
}
</style>
</head>
<body>
<br><br><br><br><br>
<div id='object1'>Absolyut jaylastiriw</div>
<div id='object2'>Salistirmali jaylastiriw</div>
<div id='object3'>Belgilengen jaylastiriw</div> </body>
</html>
Súwrette dáslep basqa eki elementler menen bir sızıqta jaylasqan object3 element betti joqarıǵa aylandırılǵanda óz ornında qaldi hám endi bul element tómendegi basqa eki elementler menen salıstırǵanda tómenge jılısqan bolıp qaldi.
2.10. Bloklı model hám bettiń maketi
Bettiń maketine tásir kórsetetuǵın CSS tiń qásiyetleri blok modeline tiykarlanǵan. Blok modeli bul elementti qorshaǵan qásiyetlerdiń toplamı bolıp esaplanadı. Haqıyqatındada bunday qásiyetler bárshe elementlerde bar (yamasa bolıwı múmkin), eger olardıń shetlerin oshiriw múmkin bolsa:
body { margin:0px; }
Obyekttiń blok modeli obyekttiń shetinen yaǵniy sırtınan baslanadı. Onıń ishinde shegara bar boladı, soń shegara menen mazmunnın arasındaǵı bos jer boladı. Eń sońında obyekt mazmuni keledi.
Eger bloklı model menen islesiwdi úyrenseńiz onda professionallı jobalastirilǵan betlerdi jaratıwǵa háreketlense boladı. Sebebi tek gána bul qásiyetler bettiń stilli bezewin kóplegenin anıqlaydı.
Maydanlardı ornatiw
Maydan bloklı modeldiń eń sońǵı dárejesi bolıp esaplanadı. Ol elementlerdi bir-birinen ajıratadı hám aqılıy paydalanıwdı talap etedi. Mısal sıpatında kóz aldımızǵa keltireyik siz bir neshe elementlerdiń janında 10 pikselli maydandı belgilewge qarar ettińiz. Eger olardı bir-biriniń ústine jaylastırsaq onda nátiyjede olardıń arasında maydanlardı qosqanda 20 pikselli boslıq payda boladı.
Biraq CSS bul mashqalanı tártiplestiredi: eger maydanları bar eki element bir biriniń ústinen jaylastırıw kerek bolsa onda olardı bir birinen ajıratiliw ushın eki maydannan eń úklenin paydalanadı. Eger eki maydanda birdey bolsa onda tek birewi paydalanadı. Bunnan siz ózińizdiń qálegen nátiyjeńizge erisesiwińiz múmkin. Biraq bunnan siz soni názerde tutiwińiz kerek eger belgilengen jaylastırıw berilgen bolsa elementlerdiń maydanları qosılmaydı.
Element maydanları margin qásiyeti járdeminde tolıǵı menen, yamasa bir birinen bólek margin-left, margin-top, margin-right hám margin-bottom qásiyetler járdeminde ózgertiliwi múmkin. Margin qásiyetin ornatılǵanda bir, eki, úsh yamasa tórt argumentlerin kórsetiw kerek, nátiyjede tómendegi qaǵıyda da kórsetilgen effektke erisemiz:
/* bárshe maydanlar eni 1 piksel */
margin:1px;
/* Joqarı hám tómengi maydanlar 1 piksel, shep hám oń maydanlar 2 piksel */
margin:1px 2px;
/* Joqarı maydanı 1 piksel, oń hám shep maydanı 2 piksel, tómengi maydanı 3 piksel */
margin:1px 2px 3px;
/* joqarı maydanı 1 piksel, oń maydanı 2 piksel, tómengi maydanı 3 piksel, shep maydanı 4 piksel */
margin:1px 2px 3px 4px;
2.11 súwrette 2.6 mısalda brauzerge júklengen kodı kórsetilgen, bul kodta margin qásiyeti (qalın shrift penen kórsetilgen) <table> elementiniń ishinde jaylasqan tórtmúyeshlik elementlerge qollanıladı. Keste úlkenligi belgilenmegen, sońıń ushın ol ishki <div> elementti tıǵız qılıb orap aladı. Sonıń ushın joqarıda 10 piksel enli maydan, oń tárepte 20 piksel, tómende 30 piksel hám shep tárepte 40 piksel maydan payda boladı.
2.6 mısal.Maydandi qollanıwdıń izbe-izligi
<!DOCTYPE html>
<html>
<head>
<title>Maydanlar</title>
<style>
#object1 {
background:lightgreen;
border-style:solid;
border-width:1px;
font-family:Courier New;
font-size:14px;
width:100px;
height:100px;
padding:5px;
margin:10px 20px 30px 40px;
}
table {
padding:0;
border:1px solid black;
background:cyan;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div id='object1'>margin:<br>10px 20px 30px 40px;</div>
</td>
</tr>
</table>
</body>
</html>
