ComputereProgrammering

CSS Float: beskrivelse, egenskaber

Float - en af de grundlæggende funktioner i sproget CSS (er Cascading Style Sheets - formatering overlappende). Dette sprog har eksisteret siden 1996 og er stadig fortsætter med at udvikle sig. I øjeblikket har udviklerne brugt den tredje version af CSS. Med CSS programmeringssprog er det muligt at skabe en smuk og tiltalende websted, der ikke vil blive vist forældet eller ubehageligt for brugeren, også selvom du ikke bruger JavaScript. Moderne muligheder for den tredje version af tilladelsen.

Desuden kan udviklere bruge mere bekvemme formateringsindstillinger, såsom flexbox eller position til at ændre det element af plads på sitet, men det vigtigste først. For at begynde at forstå fordele og ulemper Float egenskaber.

CSS Float - hvorfor er det nødvendigt?

Flyde - ejendomme til positioneringselementer. Hver dag, kan det ses på siderne af aviser og blade, kigge på billederne og teksten, som er meget pænt ombrydes dem rundt. и CSS при использовании функции Float должно произойти то же самое. I en verden af HTML og CSS kode ved hjælp af Float funktionen skal ske det samme. Men det er værd at huske på, at billedet redigering er ikke altid det vigtigste formål med denne funktion. Det kan bruges til at skabe den populære placering af elementer på webstedet i to, tre, fire kolonner. Faktisk er Float CSS ejendom, der anvendes til stort set alle html-element. Kendskab til grundlæggende i redigering af layout elementer ved hjælp af Float funktion, og derefter ejendom, for at skabe et design af hjemmesiden vil ikke være svært.

Særlige DTP-programmer kan undertiden ignorere billederne, og at gå over dem. Nok lignende ting sker og webdesign, med kun lyset af teksten, snarere end klatre på billedet vises (hvis anvendt forkert Float egenskaber) ved siden af det eller under det, men ikke altid, hvor du har brug for en udvikler.

CSS Float beskrivelse af ejendommen

Faktisk evnen til at bruge Float ejendom er en meget god es i hullet for enhver webdesigner. Men desværre kan den manglende forståelse af, hvordan dette virker føre til kollisioner og andre elementer på webstedet sorger af denne art. Tidligere også sådanne situationer opstår på grund af fejl i browsere. Nu hemmeligheden om, hvordan man korrekt brug Float ejendom vil blive åbnet, og ingen problemer med det bør ikke være større.

Vi Float har fire værdier:

  • Float: arve;
  • Float: højre;
  • Float: venstre;
  • Float: none;

For dem, der kender engelsk, parameterværdierne Float ejendom skal være klar. Men for dem, der ikke kender, kan du medbringe en lille forklaring. Parameter: venstre; Den bevæger elementet krop i den mest ekstreme venstre hjørne af overordnet element. Det samme sker (kun den anden vej), når bcgjkmpjdfybb parameter: højre; . Værdi: arve; beordrer elementet at antage den samme konfiguration som for moderselskabet. Sådanne elementer kaldes barn stadig, da de er placeret direkte i den forælder html-i kode. En ejendom: none; Det gør det muligt, at elementet ikke forstyrre den sædvanlige strøm af dokumentet, der er sat som standard for alle dele af koden.

Sådan Float arbejde?

Float CSS ejendom fungerer ganske enkelt. Alle, der er beskrevet ovenfor, kan ske uden meget besvær. Efter dette, vil alt være lige så nemt. Men før jeg fortsætte med at studere Float egenskaber, værd en lille kig ind i teorien. Hvert websted er et element af blokken. Det er let at se dette ved at åbne konsollen i Google Chrome ved at trykke på links Ctrl + Shift + J. tekst, titel, billede, og alle andre komponenter i stedet vil blive vist blokke, bare forskellige størrelser. I første omgang er alle disse blokke efter hinanden. Som vist i eksemplet nedenfor, koden strengen gå ene efter den anden, og så de ser ud til at være strengt efter hinanden.

Dette kaldes en normal flow (normale strøm). Når alle sådanne blokke falder inden hinanden (organ uden at krydse elementer) lodret. I første omgang alle indholdet af de websider, der ligger på denne måde. Men når du bruger fx egenskaberne af CSS Float Venstre sprog element efterlader sin naturlige position på siden og flytter til venstre. Denne adfærd fører til den uundgåelige sammenstød med de elementer, der er forblevet i det normale forløb.

Med andre ord er elementerne i stedet placeret lodret, er nu ved siden af hinanden. Hvis den forælder element er nok plads, så den kan rumme to børn inde, betyder kollisionen ikke forekomme, men hvis ikke, at indførelsen af et objekt til et andet er uundgåeligt. Det er ekstremt vigtigt at huske for forståelsen af egenskaberne for Float CSS.

Klar funktion til at løse problemer

Vi Float er udstyret med en hjerte hver - Gennemsigtig. Sammen - Spild ikke vand. Begge disse funktioner supplerer hinanden og gøre udvikleren glad. Som nævnt ovenfor, naboceller gå ud af deres normale og også begynde at "flyde" som det element, hvor ejendommen er brugt Float (f.eks CSS Float Top). Som et resultat, i stedet for en flydende element får to, og ikke på det sted, hvor de agtede at arrangere udvikleren. Fra det øjeblik er lige begyndt alle problemer.

På Clear-funktionen har fem værdier:

  • : Venstre;
  • : Right;
  • : Både;
  • : Arv;
  • none;

Analogt kan vi forstå, når det er bedst at bruge funktionen sletning. Hvis vi har skrevet en linje i koden Float: højre; (CSS-kode er ment), skal funktionen være Clear: højre ;. De samme egenskaber klipper og Float: left; det vil supplere Clear: venstre; . Når du skriver kode Clear: både; det viser sig, at elementet, hvortil det anvendes, vil denne funktion være under de elementer, der anvendes Float funktion. Overtag tager indstillinger fra den overordnede element, men ingen gør ikke nogen ændringer i strukturen af webstedet. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. Hvis du forstår, hvordan Float og Klare funktioner, kan du skrive en unik og usædvanlig HTML og CSS Float-kode, som vil gøre dit website enestående i sin art.

Brug af flydestilling at skabe kolonner

Float især nyttig funktion, når du opretter kolonner på sitet (eller placeringen af CSS Float indhold i midten af websiden). Det er denne kode er det mest praktisk og bekvem, så du bør overveje flere muligheder for at skabe den sædvanlige webstedsskabelon bestående af to kolonner. For eksempel tager en standard hjemmeside med indhold på venstre navigationslinje (navigationslinje) til højre, sidehoved og sidefod. Koden ser sådan ud:

Nu er vi nødt til at forstå, hvad der er skrevet her. Den forælder, i hvilket hovedparten af html-kode kaldes en beholder (container). Gør det muligt at forhindre de elementer, som funktionen påføres Float, spredning i forskellige retninger. Hvis det ikke var, så disse elementer har flød op til grænserne for browseren.

Så i koden og gå #content #navigation. Disse elementer anvendes Float funktion. #content sendt til venstre og til højre er #navigation. Det er nødvendigt at skabe et site med to kolonner. Sørg for at angive bredden, så de objekter ikke overlapper hinanden. Du kan angive bredden og procent. Så endnu mere komfortabel end i pixels. For eksempel, at 45% til 45% og #content til #navigation, og de resterende 10% giver ejendom margen.

Ejendom af Clear, som er i #footer, ikke følger sidefod #navigation og #content, men overlader det til det samme sted, hvor han var. Hvad kan der ske? Hvis du ikke angiver Ryd ejendom? I denne kode #footer blot gå op og vil være under #navigation. Dette sker på grund af det faktum, at #navigation plads nok til at rumme mere end ét element. I dette illustrative eksempel er det tydeligt, hvorledes egenskaberne af klart float og supplerer hinanden.

Troubles du kan støde på, når du skriver kode

De ovenstående eksempler er enkle. Men med dem kan give problemer. Generelt, i virkeligheden, kan en masse uventede problemer tilfældigvis Float funktion. Uanset hvor mærkeligt, men problemerne normalt ikke forekomme med CSS, og en html-kode. Det sted, hvor elementet med Float funktion i en html-kode direkte påvirker det endelige værk. For at undgå forskellige former for vanskeligheder, er det bedst at holde sig til enkle regler - positionering elementer Float funktion af den første kode. Næsten altid det virker, og at minimere deres uventet adfærd.

sammenstød af elementerne

Kollision opstår, når overordnet element indeholder flere barn kan ikke rumme dem alle, og de overlapper hinanden. Det sker endda, at elementerne ikke kan forekomme, og forsvinder fra stedet. Dette er ikke en fejl browser, og det forventes, og korrekt adfærd af elementer med Float funktion.

På grund af det faktum, at disse elementer er i første omgang i det normale forløb, og så er det brudt Float ejendom browser kan fjerne dem fra webstedet. Men fortvivl ikke, fordi løsningen er enkel og klar - brug Cear ejendom. Det er muligt, at alle de veje ud af dette problem, brugen af Clear er den mest effektive.

Men problemet med kollision af webside elementer kan løses på en anden måde. Der er mindst to måder:

  • Placer brug af funktionen;
  • ansøgning flexbox.

Position funktion er ofte et godt alternativ til CSS Float. I centrum af den webside i tilfælde af ansøgning holdning er bedst at placere billedet. Hvis den anvendes korrekt værdier: absolut og: relativ elementerne falder på plads, og overlapper ikke hinanden.

Position Analyse og Float funktionskode

и CSS Float заменить на Position. Den bør beskæftige sig mere med den måde, HTML og CSS Float erstattet af holdning. I virkeligheden er det meget simpelt. Lad os sige, at der er et element #container og #div.

#container {

bredde: 40%;

flyde: venstre;

margin: 10px;

}

#div {

bredde: 40%;

flyde: højre;

margin: 10px;

}

#footer {

klart: begge;

}

I dette eksempel brugen af funktioner i den anden beholder (CSS Div) Float vil bidrage til at skabe en standard site af to kolonner. Glem aldrig Clear funktion. Uden det kun vil overlejre elementer oven på hinanden.

Så hvordan kan du ændre CSS og Float kode til at bruge Postion? Meget simpelt:

#container {

bredde: 40%;

position: relative;

margin: 10px;

}

#div {

bredde: 40%;

position: relative;

margin: 10px;

}

I dette tilfælde #container #div og træffe de nødvendige position udvikleren i det overordnede element. De vigtigste ting? sætte #div og #container ene forælder element, hvilket vil svare til deres størrelse.

Flexbox - denne funktion vil erstatte CSS Float?

Flexbox - den mest avancerede måde at skabe hjemmesider i øjeblikket, så denne funktion understøttes ikke af ældre versioner af browsere. Dette faktum ikke udelukkes, for brugere med ældre versioner af browsere vil ikke være i stand til at se den korrekte version af sitet.

Flexbox er ikke en egenskab, som et separat modul. Derfor flexbox understøtter en række egenskaber, der kun arbejder med ham. Udover, display-funktion, som har tre parametre inline, blok og inline-blokeret flexbox der kun én flex-flow.

Hvordan virker flexbox?

Denne teknologi hjælper udvikleren til nemt tilpasse elementer vandret og lodret. Flexbox kan også ændre retningen og størrelsesordenen displayelementer. I denne teknologi, er der to akser: hovedakse og Cross-aksen, omkring hvilken hele flexbox bygget. Det fjerner også den virkning Float og Klare funktioner. Han bygger sit system i koden, som bruger et enestående til sin ejendom, så desværre ikke i stand til at replikere i celler andet egenskaber, såsom Float og holdning. Og det ville være meget praktisk, fordi, som nævnt ovenfor, flexbox kun arbejde i nyere versioner af browsere.

Det er værd at huske på, at i sidste ende holdning flexbox Float og gøre det samme - at skabe et usædvanligt og originalt design af dit websted. Hver version af den diskuteret i artiklen gør det på sin egen måde, og derfor har både fordele og ulemper. Desuden sker det, at et eller andet sted perfekt Float funktion (for eksempel på stedet med en simpel struktur), men et eller andet sted bedre at bruge den holdning eller flexbox.

Dobbelt Margin Bug

Men nogle gange, desværre, opstår, hver udvikler problemerne ikke fra den skriftlige kode, med fejl og i en eller anden browser specifik form. For eksempel, i Internet Explorer, der er en fejl, som kaldes Double Margin Bug. Han ganger Margin parameter til to, hvilket resulterer i forskydning af elementer på webstedet i browseren grænse. For at undgå dette, er det tilstrækkeligt at angive parameteren Margin Procent. Normalt denne fejl opstår, når værdien af y og ejendomme Margin Float punkt.

#div {

flyde: venstre;

margin-left: 10px;

}

Denne kode vil flytte elementet i Internet Explorer 20 px til venstre. Du kan ændre koden på følgende måde:

#div {

flyde: venstre;

margin-left: 10%;

}

eller så

#div {

flyde: venstre;

margin-højre: 10px;

}

Begge disse muligheder vil løse problemet med fortrængningsstykker.

Bugs browser og forkert visning websted

Det er værd at huske, at Internet Explorer - er ikke den eneste browser, der kan opstå fejl. Ældre versioner af Google Chrome og Mozilla også forkert vise visse elementer af moderne hjemmesider. For hver af disse rettelser, kan du finde en løsning. Generelt kan vi konstatere, at brugen af Float vil skabe et originalt og attraktivt website design. Forstå det grundlæggende og principperne for denne ejendom vil hjælpe med at undgå fejltagelser og gøre livet lettere for enhver udvikler.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 atomiyme.com. Theme powered by WordPress.