Користење на CSS плови Сопственост за дизајн на веб-страници
CSS сопственост е многу важна сопственост за изгледот. Тоа ви овозможува да ги поставите дизајните на вашата веб-страница токму онака како што сакате да ги прикажете - но за да го користите, мора да разберете како функционира.
Во лист со стил, сопственоста на CSS float изгледа вака:
. право (плови: десно; }
Ова му кажува на прелистувачот дека сè со класата на "десно" треба да се движи надесно.
Вие ќе го доделите вака:
класа = "десно" />
Што можете да плови со CSS плови имот?
Не можете да плови секој елемент на веб-страница. Можете да плови само елементи на блок-ниво . Ова се елементи кои заземаат блок од простор на страната, како слики (), ставови (), поделби () и листи ().
Други елементи кои влијаат на текстот, но не создаваат поле на страницата, се нарекуваат внатрешни елементи и не можат да се лебдат. Ова се елементи како распон (), линии паузи (), силен акцент () или курзив ().
Каде се плови?
Можете да плови елементи оддесно или од лево. Секој елемент кој го следи флуидираниот елемент ќе тече околу лебдечкиот елемент од другата страна.
На пример, ако плови со слика налево, секој текст или други елементи што следат ќе се движат околу него надесно. И ако плови со слика десно, секој текст или други елементи што следат ќе тече околу него лево. Сликата што е сместена во блок на текст без никаков стил на пловење ќе се прикаже, сепак, прелистувачот е поставен да прикажува слики.
Ова е обично со првата линија на следниот текст прикажан на дното на сликата.
Колку ќе лебдат?
Елементот што се лебди ќе се движи колку што е можно лево или десно од контејнерот. Ова резултира во неколку различни ситуации во зависност од тоа како е напишан вашиот код.
За овие примери, ќе лебдам мал DIV елемент лево:
- Доколку лебдечкиот елемент нема однапред дефинирана ширина, ќе потрае колку хоризонтален простор како што е потребно и достапно, без оглед на пловиот. Забелешка: некои прелистувачи се обидуваат да ги стават елементите покрај пловечките елементи кога ширината не е дефинирана - обично му дава на елементот кој не лебди само мала количина на простор. Значи, секогаш треба да дефинирате ширина на лебдечки елементи.
- Ако елементот за контејнерот е елементот HTML, лево DIV ќе седи на левата маргина на страницата.
- Ако елементот сад сама е содржан од нешто друго, лебдечкиот DIV ќе седи на левата страна на контејнерот.
- Може да се гнездате пловечки елементи, и тоа може да резултира со пливање завршува во изненадувачко место. На пример, ова плови е лева лебдечка DIV во десниот лебдечки DIV.
- Пловечки елементи ќе седат еден до друг ако има простор во контејнерот. На пример, овој контејнер има три DIP-елементи со ширина од 100px кои лебдат во широк контејнер од 400px.
Можете дури и да користите плови за да креирате распоред на фото галерија. Ставаш секоја минијатура (најдобро функционира кога сите тие се со иста големина) во DIV со насловот и плови на DIV елементите во контејнерот.
Не е важно колку е широк прозорецот на прелистувачот, сликите ќе се поделат рамномерно.
Исклучување на пловилото
Откако ќе знаете како да добиете елемент за плови, важно е да знаете како да го исклучите плови. Исклучете го плови со CSS јасното својство. Можете да ги избришете левите лебди, десно плови или и двете:
јасно: лево;
јасно: десно;
јасно: и двете;
Секој елемент кој го поставивте јасното својство, ќе се појави под елемент кој се движи во таа насока. На пример, во овој пример првите два параграфи од текстот не се исчистени, но третиот е.
Играјте со јасна вредност на различни елементи во вашите документи за да добиете различни ефекти на распоред.
Еден од најинтересните флотирани распореди е серија слики по десната или левата колона до текстот на текстот. Дури и ако текстот не е доволно долг за да се движите низ сликата, можете да го користите јасното на сите слики за да бидете сигурни дека тие се појавуваат во колоната, а не веднаш до претходната слика.
HTML (повторете го овој став):
Дуи на авторите се затвораат за време на престојувалиштето во засолниште. Купидатот не е парен, а лабава и долна магла.
CSS (за да ги плови сликите налево):
img.float {float: left;
јасно: лево;
маргина: 5px;
}
И надесно:
img.float {float: right;
јасно: десно;
маргина: 5px;
}
Користење плови за распределба
Откако ќе разберете како функционира имотот на float, можете да почнете да го користите за да ги поставите вашите веб страни. Ова се чекорите што ги преземам за да креирам веб-страница со лебдење:
- Дизајн на изгледот (на хартија или во графика алатка или во мојата глава).
- Определете каде ќе бидат разделени страниците.
- Определи ги ширините на разните контејнери и елементите во нив.
- Плови сè. Дури и најоддалечениот сад елемент лебдеше лево, така што знам каде ќе биде во однос на пристаништето за преглед на прегледникот.
Додека ги познавате ширините (процентите се во ред) на вашите распореди за распоред, можете да го користите имотот плови за да ги ставите каде што припаѓаат на страницата. И убаво е, не мора да се грижите колку за моделот на кутијата да се разликува за Internet Explorer или Firefox.