Oblikovanje odstavkov HTML. Teorija in praksa

Opis

Nastavi širino bloka ali zamenljivih elementov (na primer oznaka ). Širina ne vključuje debeline robov okoli elementa, oblazinjenja in robov.

Brskalniki s širino delujejo drugače, rezultat prikaza je odvisen od uporabljenega ... Tabela 1 prikazuje možne možnosti in posledično širino.

Sintaksa

širina: vrednost | obresti | samodejno | podedovati

Vrednosti

Vse vrednosti dolžine, sprejete v CSS, so sprejete kot vrednosti - na primer slikovne pike (px), palci (in), točke (pt) itd. Ko uporabljamo zapis v odstotkih, se širina elementa izračuna glede na širino nadrejenega elementa. Če nadrejeni ni izrecno naveden, se kot nadrejeni uporabi okno brskalnika.

Samodejno nastavi širino glede na vrsto in vsebino elementa. deduje Podeduje vrednost od starša.

HTML5 CSS2.1 IE Cr Op Sa Sa Fx

Rezultat tega primera, kot je prikazan v brskalniku Safari, je prikazan na sliki. eno.

Slika: 1. Širina bloka

Objektni model

document.getElementById ("elementID") .style.width

Brskalniki

Internet Explorer 6 nepravilno določi širino kot min-širino. V načinu quirk Internet Explorer do vključno različice 8.0 napačno izračuna širino elementa, ne da bi mu dodal vrednosti oblazinjenja, robov in obrob.

Internet Explorer 7.0 ali novejši ne podpira vrednosti dedovanja.

Ta obsežen vadbeni članek se bo osredotočil na pomembne teme, katerih naloga je organizirati metode dela z elementi blokov, bralcu razložiti, za kaj se uporablja spreminjanje modela za izračun širine in višine elementov, kako upravljati prelivanje elementov bloka in kako delati z minimalnimi in največje velikosti elementov.

Med raziskovanjem modela CSS box smo ugotovili, da lastnosti širine in višine določajo širino in višino notranje površine elementa ( vsebinsko področje), ki lahko vsebuje besedilo, slike in druge elemente.

V modelu CSS box obstaja razlika med vrednostmi širine in višine, ki jih daste elementu, in količino prostora, ki ga ima brskalnik za prikaz. Skupna širina in višina elementov je območje okna brskalnika, ki je sestavljeno iz širine in višine oblazinjenja, robov in zanje določenih vrednosti po meri.

Skupna širina elementa se izračuna po formuli:

V našem primeru to reši situacijo in nam ni treba izvajati nobenih izračunov, v prihodnosti pa se bojijo kakršnih koli sprememb, ki bi bile potrebne za naše elemente. Pustimo te nepotrebne izračune na strani brskalnika in si oglejmo rezultat našega primera:

Za končno razumevanje tega modela za izračun širine in višine elementov bomo pridobljeno znanje utrdili z naslednjim primerom:

Vrednost lastnosti content-box je privzeta in izračuna skupno širino in višino elementa po klasični shemi. Na primer, širina:

150 pik (širina po meri) + 10 pik (levo oblazinjenje) + 10 pik (desno oblazinjenje) + 10 pik (leva obroba) + 10 pik (desna obroba) \u003d 190 pik.

Za drugi element, za katerega smo uporabili lastnost z vrednostjo obrobe, po meri širina in višina elementa že vključuje vsebino, obrobo in oblazinjenje elementa. V večini primerov je na straneh zaželeno uporabljati lastnost z vrednostjo obrobe, saj so očitne končne dimenzije elementa in se izogne \u200b\u200bnekaterim zgoraj opisanim nepričakovanim situacijam.

Rezultat našega primera:

Nadzor nad prelivanjem blokovnih elementov

V postopku postavitve boste naleteli na situacije, ko bo vsebina elementa prikazana zunaj meja elementa. Privzeto brskalnik upodobi takšno vsebino (prikaže se preliv elementov), \u200b\u200bkar v nekaterih primerih povzroči vidne napake. Lastnost CSS overflow je odgovorna za to vedenje brskalnika. Upoštevajmo njegove možne vrednosti:

Oglejmo si naslednji primer:

V tem primeru smo postavili štiri bloki fiksne širine in višine, za katere so določene različne vrednosti lastnosti prelivanja CSS:

• Prvi blok (vidna vrednost) - vsebina je zunaj meja elementa (privzeta vrednost).
• Drugi blok (skrita vrednost) - Vsebina, ki preplavi element, je odrezana.
• Tretji blok (drsna vrednost) - Preliv je obrezan, dodana pa je drsna vrstica.
• Četrti blok (samodejna vrednost) - tako kot pri drsni vrednosti se bo samodejno dodala le drsna trak, če blok prehaja vzdolž določene osi ( x - vodoravno, oz y - navpično), ne pa trajno prikazano na strani.

Rezultat našega primera.

Opis

Atributa višine in širine sta na voljo za spreminjanje velikosti slik z uporabo HTML-ja. Vrednosti v slikovnih pikah ali odstotki so dovoljene. Če je nastavljen odstotek, se dimenzije slike izračunajo glede na nadrejeni element - vsebnik, v katerem je oznaka ... Če starševskega vsebnika ni, je to okno brskalnika. Z drugimi besedami, width \u003d "100%" pomeni, da bo slika raztegnjena na celotno širino spletne strani. Če dodate samo en atribut širine ali višine, se ohrani razmerje stranic in razmerje slike. Nato brskalnik počaka, da se slika popolnoma naloži, da določi njeno prvotno višino in širino.

Velikost vseh slik na spletni strani mora biti velika. Tako se stran naloži nekoliko hitreje, saj brskalniku po prejemu ni treba izračunati velikosti posamezne slike. Ta izjava je še posebej pomembna za slike v mizi.

Širino in višino slike lahko spreminjate navzgor in navzdol. Vendar to ne vpliva na hitrost nalaganja slike, saj velikost datoteke ostane nespremenjena. Zato bodite previdni pri zmanjševanju slike, ker med bralci lahko povzroči zmedo, zakaj se tako majhna risba tako dolgo naloži. Toda povečanje velikosti vodi do nasprotnega učinka - velikost slike je velika, vendar se datoteka naloži hitreje glede na sliko iste velikosti. Toda kakovost risbe se poslabša.

Sintaksa

Html
XHTML

Vrednosti

Vsako pozitivno celo število v slikovnih pikah ali odstotkih.

Privzeta vrednost

Prvotna širina slike.

HTML5 IE Cr Op Sa Sa Fx

Opis

Nastavi višino bloka ali zamenljivih elementov (na primer oznaka ). Višina ne vključuje debeline robov okoli elementa, oblazinjenja in robov.

Če vsebina bloka presega določeno višino, bo višina elementa ostala nespremenjena in vsebina bo prikazana na vrhu. Ta funkcija lahko povzroči prekrivanje vsebine elementov, kadar so elementi v kodi HTML zaporedni. Da se to ne bi zgodilo, dodajte slog overflow: auto slogu elementa.

Sintaksa

višina: vrednost | obresti | samodejno | podedovati

Vrednosti

Vse dolžinske enote, sprejete v CSS, so sprejete kot vrednosti - na primer piksli (px), palci (in), točke (pt) itd. Pri uporabi zapisov v odstotkih se višina elementa izračuna glede na višino nadrejenega elementa. Če nadrejeni ni izrecno naveden, potem je okno brskalnika njegovo nadrejeno. samodejno nastavi višino glede na vsebino elementa

HTML5 CSS2.1 IE Cr Op Sa Sa Fx

Rezultat tega primera je prikazan na sl. eno.

Slika: 1. Uporaba lastnosti višine

Objektni model

document.getElementById ("elementID") .style.height

Brskalniki

Internet Explorer 6 višine ne opredeli pravilno kot min-višino.

V načinu quirk Internet Explorer do vključno različice 8.0 napačno izračuna višino elementa, ne da bi mu dodal vrednosti oblazinjenja, robov in obrob.

Internet Explorer 7.0 ali novejši ne podpira vrednosti dedovanja.

Privzeto se za elemente blokov uporablja samodejna širina. To pomeni, da se bo element raztegnil vodoravno natančno toliko, kolikor je prostega prostora. Privzeta višina elementov bloka se nastavi samodejno, tj. brskalnik razteza območje vsebine navpično, da prikaže vso vsebino. Če želite nastaviti dimenzije po meri za področje vsebine elementa, lahko uporabite lastnosti širine in višine.

Lastnost CSS width vam omogoča, da nastavite širino področja vsebine elementa, lastnost height pa višino območja vsebine:

Lastnosti širine in višine določajo samo velikost področja vsebine; če želite izračunati skupno širino blokovnega elementa, dodajte širino področja vsebine, levo in desno oblazinjenje ter širino leve in desne obrobe. Enako velja za skupno višino elementa, le da se vse vrednosti izračunajo navpično:

Za ta odstavek bomo nastavili samo širino in višino.

Ta odstavek poleg širine in višine vsebuje tudi oblazinjenje, obrobo in oblazinjenje.

Primer jasno kaže, da drugi element zavzame več prostora kot prvi. Če izračunamo po naši formuli, so dimenzije prvega odstavka 150x100 slikovnih pik, dimenzije drugega odstavka pa:

to je 180 x 130 slikovnih pik.

Prelivanje elementov

Ko določite širino in višino elementa, je treba biti pozoren na eno pomembno točko - vsebina znotraj elementa lahko presega določeno velikost bloka. V tem primeru bo nekaj vsebine preseglo meje elementa, da se izognete temu neprijetnemu trenutku, lahko uporabite lastnost CSS overflow. Lastnost overflow brskalniku pove, kaj storiti, če vsebina bloka preseže njegovo velikost. Ta lastnost ima lahko eno od štirih vrednosti:

• visible je privzeta vrednost, ki jo uporablja brskalnik. Nastavitev te vrednosti bo imela enak učinek kot če ne nastavite lastnosti prelivanja.
• drsenje - elementu doda navpične in vodoravne drsnike.
• samodejno - po potrebi doda drsnike.
• skrito - skrije nekaj vsebine, ki presega meje blokovnega elementa.