CSS float: опис, карактеристики

Плови - една од основните функции на јазикот на CSS (Cascading се со Style Sheets - форматирање каскадни). Овој јазик постои од 1996 година и се уште продолжува да се развива. Во моментов, програмерите се користи третата верзија на CSS. Со CSS програмски јазик, можно е да се создаде убава и пријатен сајт кој не ќе се појави застарени или непријатно за корисникот, дури и ако не се користи JavaScript. Модерни можности на третата верзија на дозволата.

Исто така, програмерите можат да го користат повеќе практични опции за форматирање, како што Flexbox или позиција за промена на елемент на простор на сајт, но првите нешта прво. За да почнат да се разбере предностите и недостатоците пливачки својства.

CSS плови - зошто е тоа потребно?

Плови - имот за позиционирање елементи. Секој ден, тоа може да се види на страниците на весниците и списанијата, гледајќи во сликите и текстот, што е многу уредно ги обвива околу. и CSS при использовании функции Float должно произойти то же самое. Во светот на HTML и CSS код со користење на пливачки функција треба да се случи истото. Но, треба да се запамети дека сликата уредување не е секогаш главната цел на оваа функција. Може да се користи за да се создаде популарниот локацијата на елементи на сајт во две, три, четири колони. Всушност, пливачки CSS имотот се користи во речиси сите HTML-елемент. Знаејќи основите на уредување на елементи на изгледот користење на функцијата за пливачки, а потоа и на имотот, да се создаде било кој дизајн на сајт не ќе биде тешко.

Специјални програми ДТП понекогаш може да се игнорира слики, и да одат над нив. Доволно слични работи се случуваат и ќе се прикаже веб дизајн, со само светлината на текстот, наместо да се искачи на сликата (ако се користи неправилно пливачки својства) до него или под него, но не секогаш, каде што треба инвеститорот.

CSS Носете опис на имотот

Всушност, можноста за употреба на пливачки имотот е многу добар кец на десетка во дупка за секој веб дизајнер. Но, за жал, недостатокот на разбирање на тоа како функционира ова може да доведе до судири и други елементи на таги сајт од овој вид. Претходно, исто така, такви ситуации се случи, бидејќи на грешки во пребарувачи. Сега тајната за тоа како правилно да ги користат пливачки имот ќе се отвори, и нема проблеми со тоа не треба да биде поголема.

Ние пливачки имот има четири вредности:

• Плови: наследување;
• Плови: право;
• Плови: лево;
• Плови: ништо;

За оние кои не знаат англиски, на параметрите пливачки имот мора да биде јасно. Но, за оние кои не знаат, може да донесе малку објаснување. Параметар: лево; Тој се движи телото елемент во најекстремни лев агол на елементот родител. Истото се случува и (само на друг начин) кога bcgjkmpjdfybb параметар: право; . Вредност: наследување; наредува на елемент за да ја преземе истата конфигурација, како што на родител. Таквите елементи наречени дете, сепак, како што тие се наоѓаат директно во HTML-во кодот на родител. А на имотот: нема; Тоа им овозможува на елемент не се наруши вообичаениот проток на документот, која е поставена како стандардна за сите делови на кодот.

Како да се плови работа?

Носете имотот CSS работи доста едноставно. Сето она што е опишано погоре, може да се направи без многу потешкотии. После тоа, се ќе биде исто така лесно. Но, пред да продолжат со изучување пливачки својства, во вредност од малку се погледне во теорија. Секој веб-сајт е елемент на блок. Тоа е лесно да се види ова, преку отворање на конзола во Google Chrome со притискање на Ctrl + Shift + Ј текст, наслов, слики, линкови, како и сите други компоненти на сајтот ќе бидат прикажани блокови, само различни големини. Првично, сите овие блокови се следните едни со други. Како што е прикажано во примерот подолу, кодот стринг одат еден по друг, и така тие се појавуваат да биде строго еден зад друг.

Ова се нарекува нормален проток (нормален проток). Кога сите овие блокови спаѓаат во едни со други (тело без премин елементи) вертикално. Првично, сите на содржината на веб-страниците се наоѓаат во овој начин. Меѓутоа, кога се користи, на пример, својствата на јазикот CSS плови левица, елементот остава својата природна позиција на страницата и се движи кон лево. Ова однесување води до неизбежен судир со оние елементи кои останале во нормалниот тек.

Со други зборови, наместо елементи се поставени вертикално, сега се во непосредна близина на еден на друг. Ако елементот родител е доволно простор, така што тоа може да се сместат две деца внатре, судирот не се случи, но ако не, наметнување на еден објект на друг е неизбежна. Тоа е исклучително важно да се запамети за разбирање на својствата на пливачки CSS.

Јасна функција за решавање на проблеми

Ние пливачки располага со срцето на секој - Отстрани. Заедно тие - не се истури вода. И двете од овие функции дополнуваат едни со други и да се направи на инвеститорот среќни. Како што споменавме погоре, соседните клетки одат надвор од нивниот нормален тек и, исто така, почнуваат да "лебдат" како елемент на кој беше искористена плови сопственост (на пример, CSS пливачки врвот). Како резултат на тоа, наместо со подвижна елемент добива два, а не на местото каде што тие се наменети да се организираме на инвеститорот. Од тој момент е само почеток на сите проблеми.

На Отстрани функција има пет вредности:

• : Лево;
• : Право;
• : И;
• : Наследување;
• нема;

По аналогија може да се разбере кога тоа е најдобро да се користи Отстрани функција. Ако имаме напишано линија во кодот float: право; (CSS код е наменета), функцијата мора да биде јасно: право ;. Истите својства на карпите и float: лево; тоа ќе го надополни Јасно: лево; . Кога пишувате код Јасно: и двете; излегува дека елементот на кој таа се применува, оваа функција ќе биде под елементи за кои се применуваат пливачки функција. Го наследува поставувања од елементот родител, но ниту една не направи никакви промени во структурата на сајтот. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. Ако се разбере како плови и Отстрани функции, може да се напише уникатен и необични HTML и CSS Носете-кодот, која ќе го направи вашиот сајт единствен во својот вид.

Користење пливачки да се создаде колона

Плови особено корисна карактеристика при создавањето колони на сајтот (или локацијата на содржината на CSS плови во центарот на веб-страница). Тоа е овој код е најпрактичниот и лесен, па затоа треба да се разгледа неколку опции за креирање на вообичаениот шаблон сајт се состои од две колони. На пример, земете стандарден веб-сајт со содржина на левата лента за навигација (лента за навигација) на од десната страна, заглавјето и подножјето. Кодот изгледа вака:

Сега ние треба да се разбере она што е напишано тука. Елементот родител во која главниот дел од HTML-кодот се нарекува сад (сад). Тоа ви овозможува да се спречи елементи, кој се применува пливачки функција за да растера во различни насоки. Ако тоа не е, тогаш овие елементи се лебдеше до границите на прелистувачот.

Потоа, во кодот и да си одат #content #navigation. Овие елементи се користат пливачки функција. #content испратени на лево и од десно е #navigation. Неопходно е да се создаде сајт со две колони. Бидете сигурни дека за да го одредите ширина, така што објектите не се преклопуваат едни со други. Можете да наведете ширина и процент. Па дури и поудобно отколку во пиксели. На пример, 45% до 45% и #content за #navigation, а останатите 10% да им даде на маргина имот.

Сопственост на Јасен, кој е во #footer, не го следи подножјето #navigation и #content, но го остава на истото место каде што беше. Што може да се случи? Ако не наведете Отстрани имот? Во овој код #footer едноставно одат нагоре и ќе биде под #navigation. Ова се случува поради фактот дека #navigation доволно простор да се сместат повеќе од еден елемент. Во овој Илустративен пример е јасно видлива како својствата на Ведро пливачки и дополнуваат едни со други.

Проблеми може да се судрите кога пишувате код

Горенаведените примери се едноставни. Но, со нив може да предизвика проблеми. Општо земено, во Всушност, многу неочекувани проблеми може да се случи да се плови функција. Без разлика колку чудно, но проблеми обично не се јавуваат со CSS и HTML-кодот. Локацијата каде елементот со пловка функција во HTML-кодот директно влијае на финалната работа. Со цел да се избегне различни видови на тешкотии, тоа е најдобро да се држиме до едноставни правила - позиционирање елементи пливачки функција на првото код. Скоро секогаш тоа функционира и да се минимизираат нивните неочекувано однесување.

судирот на елементи

Судир случува кога елементот родител што има повеќе деца не може да ги приспособат, и тие се преклопуваат едни со други. Таа дури и се случува, дека предметите не може да се појави, и исчезнуваат од страницата. Ова не е интернет пребарувач грешки, а се очекува и соодветно однесување на елементи со пловка функција.

Се должи на фактот дека овие елементи се на почетокот во нормален тек, а потоа тоа е скршен пребарувач пливачки имот може да ги отстрани од местото. Но, не очај, бидејќи решението е едноставен и јасен - користете Cear сопственост. Можно е дека сите на начини за излез од овој проблем, употребата на Јасно е најефикасен.

Но, проблемот на судир на веб-страница елементи може да се реши на друг начин. Постојат најмалку два начина:

• Позиција на користење на функцијата;
• апликација Flexbox.

Позиција функција често е добра алтернатива на CSS плови. Во центарот на веб-страница во случај на примена Позиција најдобро е да го позиција на сликата. Ако правилно се применуваат вредности: апсолутна и релативна, елементите падне во место, и нема да се преклопуваат едни со други.

Позиција анализа и пливачки функција код

и CSS Float заменить на Position. Тоа треба да се занимава повеќе со начинот на HTML и CSS пливачки заменува со став. Всушност, тоа е многу едноставна. Да речеме дека постои елемент #container и #div.

#container {

ширина: 40%;

плови: лево;

маргина: 10px;

}

#div {

ширина: 40%;

плови: право;

маргина: 10px;

}

#footer {

јасна: двете;

}

Во овој пример, употребата на функции во вториот сад (CSS div) Носете ќе ви помогне да се создаде стандард местото на две колони. Никогаш не заборавајте дека Отстрани функција. Без него ќе шалче само елементи на врвот на секоја друга.

Па, како да се промени на CSS и пливачки код да се користи Postion? Многу едноставно:

#container {

ширина: 40%;

позиција: релативна;

маргина: 10px;

}

#div {

ширина: 40%;

позиција: релативна;

маргина: 10px;

}

Во овој случај #container #div и да ги преземат потребните позиција на инвеститорот во елемент родител. Главната работа? стави #div и #container еден родител елемент, кој ќе одговара на нивната големина.

Flexbox - оваа функција ќе го замени CSS Носете?

Flexbox - најнапредните начин да се создаде веб-сајтови во моментот, па оваа функција не е поддржана од страна на постарите верзии на интернет прелистувачи. Овој факт не биде намалена, за корисниците со постари верзии на интернет прелистувачи нема да биде во можност да се види точната верзија на страницата.

Flexbox не е имот, како посебен модул. Затоа flexbox поддржува голем број на имот, кои работат само со него. Освен тоа, функцијата дисплеј, кој има три параметри РЕГИСТРАЦИЈА, блок и РЕГИСТРАЦИЈА-блок во flexbox има само еден флекс тек.

Како Flexbox?

Оваа технологија им помага на инвеститорот да се лесно да се усогласи елементи хоризонтално и вертикално. Flexbox исто така може да го промени правецот и редоследот на елементи на екранот. Во оваа технологија, постојат две оски: главната оска и крос оска околу која ја изгради целата Flexbox. Таа, исто така ги отстранува пливачки ефектот и Clear функции. Тој гради својот систем во кодот, кој се користи единствен на неговиот имот, па така, за жал, не можат да се реплицираат во клетките на други својства, како што се пливачки и позиција. И тоа ќе биде многу корисна, затоа што, како што е споменато погоре, Flexbox работат само во поновите верзии на интернет прелистувачи.

Вреди да се запамети дека во крајна позиција, Flexbox пливачки и го прават истото - да се создаде необичен и оригинален дизајн на вашиот сајт. Секоја верзија на дискутира во статијата тоа го прави на свој начин и, според тоа, има и предности и недостатоци. Покрај тоа, тоа се случува дека некаде совршен функција Пливачки (на пример, на местото со едноставна структура), но некаде подобро да се користи функцијата или Flexbox.

Двоен Маргина бубачки

Сепак, понекогаш, за жал, секој развивач проблеми не произлегуваат од напишано код, но со грешки во некој посебен вид на пребарувач. На пример, во Internet Explorer, има грешка, која е наречена Double Маргина бубачки. Тој се размножува параметар Маргина на две, што резултира со поместување на елементите на местото на границата на прелистувачот. За да се избегне ова, тоа е доволно за да се покаже параметар Маргина Процент. Обично оваа грешка се случува, кога вредноста на y и својства точка Маргина плови.

#div {

плови: лево;

маргина-лево: 10px;

}

Овој код ќе се префрли на елементот во Internet Explorer 20 px лево. Можете да го промените кодот како што следува:

#div {

плови: лево;

маргина-лево: 10%;

}

или така

#div {

плови: лево;

маргина-десно: 10px;

}

И двете од овие опции ќе се реши проблемот на поместување елементи.

Бубачки и неточни сајт дисплеј

Вреди да се запамети дека Internet Explorer - не е само пребарувач, кој може да се појават грешки. Постарите верзии на Google Chrome и Mozilla исто така погрешно се прикаже некои елементи на модерната веб-сајтови. За секоја од овие грешки, може да се најде решение. Во принцип, ние се напомене дека употребата на пливачки ќе се создаде оригинално и атрактивен веб дизајн. Разбирање на основите и принципите на овој имот ќе помогне да се избегнат грешките и да го направи животот полесен за секој програмер.