Augstums, platums un pārplūde — CSS noteikumi satura apgabala aprakstīšanai bloka izkārtojumā. Bloka elementa pārplūdes kontrole

Apraksts

Iestata bloka līmeņa vai nomaināmo elementu platumu (piemēram, tagu ). Platums neietver apmalu biezumu ap elementu, polsterējumu vai piemalēm.

Pārlūkprogrammas neapstrādā platumus vienādi, displeja rezultāts ir atkarīgs no izmantotās pārlūkprogrammas.. Tabulā 1 tiek doti iespējamie varianti un iegūtais platums.

Sintakse

platums: vērtība | procenti | auto | mantot

Vērtības

Par vērtībām tiek pieņemtas visas CSS pieņemtās garuma vienības - piemēram, pikseļi (pikseļi), collas (collas), punkti (pt) utt. Izmantojot procentuālo apzīmējumu, elementa platums tiek aprēķināts atkarībā no elementa platuma. vecāku elements.

Ja vecāks nav skaidri norādīts, pārlūkprogrammas logs darbojas kā tas.

Automātiski Iestata platumu, pamatojoties uz elementa veidu un saturu.

platums Lorem ipsum dolor sit amet,consectetuer adipiscing elit,seddiem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Rezultāts

šis piemērs

kā tas tiek parādīts pārlūkprogrammā Safari, ir parādīts attēlā. 1.

Rīsi. 1. Bloka platums

Objekta modelis

Internet Explorer 6 nepareizi definē platumu kā minimālo platumu . Savdabīgā režīmā Internet Explorer versijas līdz 8.0 ieskaitot nepareizi aprēķina elementa platumu, nepievienojot tam polsterējuma, piemales vai apmales vērtības.

Internet Explorer versijas līdz 7.0 (ieskaitot) neatbalsta mantojuma vērtību.

Pēc noklusējuma bloku elementi izmanto automātisko platumu. Tas nozīmē, ka elements tiks izstiepts horizontāli tieši tik daudz, cik tas ir brīva vieta. Bloka elementu noklusējuma augstums tiek iestatīts automātiski, t.i. Pārlūkprogramma izstiepj satura apgabalu vertikāli, lai tiktu parādīts viss saturs. Lai iestatītu pielāgotus izmērus elementa satura apgabalam, varat izmantot platuma un augstuma rekvizītus.

CSS platuma rekvizīts ļauj iestatīt elementa satura apgabala platumu, un rekvizīts height ļauj iestatīt satura apgabala augstumu:

Ņemiet vērā, ka platuma un augstuma rekvizīti nosaka tikai satura apgabala lielumu, lai aprēķinātu bloka elementa kopējo platumu, ir jāpievieno satura apgabala platums, kreisais un labais polsterējums, kā arī kreisā un labā robeža. Tas pats attiecas uz elementa kopējo augstumu, tikai visas vērtības tiek aprēķinātas vertikāli:

Šajā punktā mēs iestatīsim tikai platumu un augstumu.

Šajā rindkopā papildus platumam un augstumam ir arī iekšējais polsterējums, apmale un ārējais polsterējums.

Piemērā skaidri redzams, ka otrais elements aizņem vairāk vietas nekā pirmais. Ja mēs aprēķinām, izmantojot mūsu formulu, tad pirmās rindkopas izmēri ir 150x100 pikseļi, bet otrās rindkopas izmēri ir:

tas ir, 180x130 pikseļi.

Elementa pārpilde

Kad esat noteicis elementa platumu un augstumu, jums jāpievērš uzmanība vienam svarīgam punktam - elementa iekšpusē esošais saturs var pārsniegt norādīto bloka izmēru. Šajā gadījumā daļa satura pārsniegs elementa robežas. Lai izvairītos no šī nepatīkamā brīža, varat izmantot CSS pārpildes īpašumu. Pārpildes rekvizīts norāda pārlūkprogrammai, kā rīkoties, ja bloka saturs pārsniedz tā lielumu. Šim īpašumam var būt viena no četrām vērtībām:

• redzams — pārlūkprogrammas izmantotā noklusējuma vērtība. Šīs vērtības iestatīšanai būs tāds pats efekts kā pārpildes rekvizīta neiestatīšanai.
• ritināšana — elementam pievieno vertikālas un horizontālas ritjoslas.
• auto - pievieno ritjoslas, ja nepieciešams.
• paslēpts - slēpj daļu satura, kas pārsniedz bloka elementa robežas.

Sveiki, dārgie emuāra vietnes lasītāji. Šodien mēs runāsim par to, kā var iestatīt satura apgabala izmērus, izmantojot augstumu un platumu un kā konfigurēt šī satura attēlošanu gadījumā, ja tā ir vairāk nekā var ievietot tam atvēlētajā vietā (css pārpildes noteikums ar slēptu , ritināšana, automātiska).

Pirmās rindkopas teksts

Otrā teksts

Jo platums un augstums šīm rindkopām nav norādīts, tad pēc noklusējuma pārlūkprogramma pati tos aprēķina, pamatojoties uz savu izpratni par automātisko vērtību. Rezultātā rindkopas platumā aizņem visu tām pieejamo vietu un augstumā atbilst tajās esošā satura augstumam.

Tagad veiksim pirmās izmaiņas un iekodēsim pirmās rindkopas platumu (platums: 50 pikseļi):

Pirmā teksts

Otrā teksts

Kopumā notika gaidītais - horizontālais izmērs samazinājās līdz vērtībai, kas norādīta platumā:50px, un rindkopas augstums joprojām veidojas, pateicoties height:auto (noklusējuma vērtība). Rezultātā tas kļuva tāds, ka tajā varēja ietvert visu tekstu.

Bet tagad ierobežosim konteinera augstumu, izmantojot augstumu: 15 pikseļi.

Rezultātā mēs sapratām, ka teksts vairs neietilpst mūsu mazajā rindkopas konteinerā, un tāpēc tas droši ieskrēja kaimiņa zonā. Tieši tas kalpo, lai kontrolētu satura uzvedību šādās situācijās. pārpildes noteikums.

Pārplūde nozīmē "pārplūde" vai, citiem vārdiem sakot, "satura pārplūde". Tajā ir runāts par to, kam jānotiek ar saturu, ja tas neietilpst tam piešķirtajā apgabalā (konteinerā).

Pārpildei ir vairākas derīgas vērtības, taču noklusējuma vērtība ir redzams (rādīt):

Tāpēc mūsu pēdējā piemērā augšējās rindkopas teksts pārklājās ar apakšējo (pēc noklusējuma tika izmantots overflow:visible — rādīt saturu, kas neietilpst konteinerā). Mēs varētu izmantot otru galējību - pārpilde:slēpts. Tad viss, kas neietilpst konteinerā, netiktu parādīts tīmekļa lapā:

Pārējās divas šī CSS rekvizīta vērtības ļauj ritināt saturu, kas neietilpst konteinerā (kaut ko līdzīgu mēs jau novērojām, kad pētījām ). Tātad, ritinot, tiks rādītas vertikālas un horizontālas ritjoslas pat tad, ja saturs droši iekļaujas tam paredzētajā konteinerā:

Taču daudz loģiskāk būtu izmantot vērtību Auto pārplūdei, ja nepieciešams izveidot ritjoslas. Šajā gadījumā pārlūkprogramma pati aprēķinās, kad tās parādīt un uz kurām asīm.

Piemēram, ja mēs izmantojam overflow:auto, mēs varēsim ritināt tikai pa asi, kurā saturs neietilpst konteinera robežās:

Pirmā teksts

Otrā teksts

Apkopojot, mēs varam teikt, ka Overflow ļauj diezgan Elastīgi konfigurējiet satura attēlošanas opcijas gadījumā, kad tas izkāpj no konteinera. Jums būs iespēja parādīt saturu, kas ir palicis (redzams), nerādīt (nogriezt - paslēpts), vai noteikt obligātu ritināšanu (scroll) vai ritināšanu pēc nepieciešamības (auto).

Ir arī šī noteikuma rakstīšanas varianti, kas saistīti ar CSS3, bet kurus atbalsta visas pārlūkprogrammas, kas nozīmē, ka tos var droši izmantot. Es runāju par opcijām overflow-x un overflow-y, kas ļauj iestatīt vai neiestatīt ritināšanu uz atsevišķām asīm (x - horizontāls, y - vertikāls).

Ja, piemēram, ir jāpārliecinās, ka horizontālā ritināšana nekad neparādās un vertikālā ritināšana parādās tikai nepieciešamības gadījumā (ja saturs neatbilst), tad HTML elementam būs jānorāda overflow-x:hidden un overflow- y:auto . Tas arī viss, problēma tiks atrisināta, jo šo ausu triku atbalsta visas pārlūkprogrammas.

Augstums un platums procentos - kāpēc jums ir nepieciešams doctype?

Tagad parunāsim par to, no kā tiek aprēķināts procentos norādītais platums. Atcerieties, ka raksta sākumā es apsolīju pievērst mūsu uzmanību tam. Patiesībā CSS platuma noteikums šeit nav izņēmums un, tāpat kā polsterējums un piemale, tiek aprēķināts kā procentuālā daļa no satura konteinera horizontālā izmēra.

Situācija ir nedaudz mulsinošāka ar satura apgabala augstumu, kas norādīts procentos. Būtu loģiski pieņemt, ka tas pats attiecas uz konteinera augstumu. Bet šeit mēs sākam saskarties ar duālismu (divi uzvedības modeļi) - kā viņi to darīja agrāk un kā tagad saskaņā ar pieņemtajiem standartiem. Šajā sakarā mums vēlreiz jāpieskaras displeja režīmu tēmai, par kuru mēs runājām iepriekš.

Vēsturiski pēc standartu pieņemšanas tas palika nemainīgs liels skaits dokumenti, kas veidoti pēc vecajiem tīrības noteikumiem HTML valoda un kaut kas ar viņiem bija jādara. Tajā pašā laikā tas arī attīstījās (parādījās stila iezīmēšanas valoda un daži tagi un atribūti novecoja), tāpēc bija nepieciešams kaut kā parādīt pārlūkprogrammai, pēc kādiem standartiem tai būs nepieciešams parsēt šo kodu.

Lai nodalītu jaunos dokumentus (kuros tika ņemti vērā visi topošie standarti) un vecos (kuros bieži vien netika ņemts vērā nekas cits kā tikai tīrs HTML), Melkosoft ierosināja izmantot nelielu līdzekli no XML valodas, kas tikko parādījās tajā laikā. . Šis līdzeklis bija pakalpojuma līdzeklis, un tagad to sauc par doctype deklarāciju.

Tas var izskatīties savādāk (vairāk par to lasiet iepriekš minētajā rakstā), taču šī opcija darbosies vienmēr:

Tādējādi pārlūkprogramma saņēma marķieri par to, kādi standarti tai jāizmanto dokumenta parsēšanai. Ja ir doctype deklarācija, tā pāriet standarta režīmā. Ja pārlūkprogramma dokumenta koda pirmajā rindā neatrod doctype (vai tas ir uzrakstīts nepareizi, kas ir identisks tā neesamībai), tad tā pāriet uz t.s. triku režīms(īpašību režīms).

Dokuments, kuram trūkst dokumenta tipa, pārlūkprogrammā parādīsies tā, it kā tas būtu ļoti vecs (antīks). Ja tam pašam dokumentam pievienosit deklarāciju, pārlūkprogramma atteiksies no senatnes un sāks strādāt ar dokumenta kodu saskaņā ar visiem šobrīd pieņemtajiem standartiem.

Bet senatnes jēdziens ir ļoti atšķirīgs. Piemēram, kāda senatne var būt tagad populāram komentāram? Google Chrome, kas parādījās tikai 2008. gadā? IE, protams, ir diezgan bagāta vēsture. Tāpēc visas jebkuras versijas pārlūkprogrammas parādīs dokumentu bez deklarācijas (īpašību režīmā vai trikiem) tāpat kā vecās, jo šī ir versija, kas tiek uzskatīta par pamata versiju.

Kāpēc es tik ilgi runāju par pārlūkprogrammas displeja režīmiem? Bet tāpēc, ka šiem diviem režīmiem satura apgabala augstuma norādīšana procentos ir ļoti atšķirīga saistībā ar šī augstuma aprēķinu.

Apgabala ar saturu augstumu (procentos) iestatīt standarta režīmā (kad dokumenta sākumā ir norādīts pareizais dokumenta tips) vispār nebūs iespējams, ja vien konteinera augstums, kurā šis saturs ir ietverts (norādīts jūs procentuālā augstumā tiks ignorēts).

Ja no dokumenta koda noņemsim deklarāciju doctype, mēs redzēsim šādu attēlu:

Sekojošo standartu režīmam (dokumenta sākumā ir rakstīta deklarācija) vispirms jāiestata konteinera augstums (mūsu gadījumā Div gadījumā konteiners būs Body tag) un tikai pēc tam pārlūkprogramma. pareizi tiks galā ar augstumu: 100%:

Rezultātā, nosakot satura apgabala augstumu procentos, mēs nonācām pie divām pilnīgi atšķirīgām pieejām, tāpēc, lai izvairītos no problēmām, noteikti iesaku norādiet pareizo doctype deklarāciju visu savu dokumentu (tīmekļa lapu) sākumā. Ir vēl viens piemērs, kur atšķirība starp standartu ievērošanas režīmu un triku režīmu būs kolosāla.

Ja jebkuram HTML elementam iestatāt satura apgabala augstumu un platumu, kā arī norādāt šim tagam polsterējumu un apmales platumu, tad quirks režīmā (bez rakstiskas deklarācijas) dažādas pārlūkprogrammas to visu var interpretēt dažādi.

Vecajā pārlūkprogrammā IE 5.5 polsterējums un rāmja platums tiks skaitīts uz iekšu no izmēriem, kas norādīti augstumā un platumā. Tie. elementa kopējais izmērs atbildīs tajos norādītajam CSS īpašības(šī ir novecojusi shēma, kas vairs netiek izmantota).

Pārējā daļā modernās pārlūkprogrammas polsterējums un apmales platums tiks pievienoti izmēriem, kas norādīti augstumā un platumā. Tie. šajā gadījumā (triku režīms bez doctype) sākotnēji norādītie satura apgabala izmēri tiks paplašināti par iekšējā polsterējuma un apmales apjomu.

Nu, ja dokumentā ierakstāt direktīvu, tad absolūti visās modernajās un vecajās pārlūkprogrammās šīs problēmas ar pieejas dualitāti var viegli izvairīties. Šajā gadījumā un IE 5.5 polsterējums un apmales platums sakrīt ar satura apgabala izmēriem, kā to pieprasa mūsdienu CSS standarti. Tāpēc, lai izvairītos no vienmēr izmantojiet doctype.

Lai tev veicas! Uz drīzu tikšanos emuāra vietnes lapās

Jūs varētu interesēt

Pozīcija (absolūtā, relatīvā un fiksētā) - pozicionēšanas metodes HTML elementi CSS (kreisais, labais, augšējais un apakšējais kārtulas)
Peldēt un notīrīt CSS — bloku izkārtojuma rīki
Polsterējums, piemale un apmale - iestatiet iekšējo un ārējo polsterējumu CSS, kā arī apmales visām pusēm (augšējā, apakšējā, kreisā, labā)
Pozicionēšana, izmantojot Z-indeksu un CSS kursora kārtulu, lai mainītu peles kursoru
Kam paredzēts CSS, kā pieslēgt kaskādes stila lapas HTML dokuments un šīs valodas pamata sintakse
Tagu, klases, Id un universālie atlasītāji, kā arī atribūtu atlasītāji mūsdienu CSS Dažādi dizaini iekšējiem un ārējās saites izmantojot CSS
Css prioritātes un to palielināšana, pateicoties Svarīgi, atlasītāju kombinācija un grupēšana, lietotāju un autoru stili
Rādīt (bloķēt, nav, iekļauts) CSS — iestatiet HTML elementu parādīšanas veidu tīmekļa lapā
Dimensiju vienības (pikseļi, Em un Ex) un mantojuma noteikumi CSS

Apraksts

Lai mainītu attēla izmēru, izmantojot HTML, tiek nodrošināti augstuma un platuma atribūti. Varat izmantot vērtības pikseļos vai procentos. Ja ir iestatīts procentuālais ieraksts, attēla izmēri tiek aprēķināti attiecībā pret vecākelementu - konteineru, kurā atrodas atzīme .

Ja vecāka konteinera nav, pārlūkprogrammas logs darbojas kā tas. Citiem vārdiem sakot, platums = "100%" nozīmē, ka attēls tiks izstiepts visā tīmekļa lapas platumā. Pievienojot tikai vienu platuma vai augstuma atribūtu, tiek saglabātas attēla proporcijas un malu attiecība. Pārlūks gaida, līdz attēls ir pilnībā ielādēts, lai noteiktu tā sākotnējo augstumu un platumu.

Noteikti iestatiet visu tīmekļa lapā esošo attēlu izmērus. Tas padara lapu ātrāku ielādi, jo pārlūkprogrammai nav jāaprēķina katra attēla izmērs pēc tā saņemšanas. Šis apgalvojums ir īpaši svarīgs tabulā ievietotajiem attēliem.

Sintakse

Attēla platumu un augstumu var mainīt vai nu mazāku, vai lielāku.
Tomēr tas nekādā veidā neietekmē attēla ielādes ātrumu, jo faila lielums paliek nemainīgs. Tāpēc tāliniet to piesardzīgi, jo... Tas lasītājos var radīt neizpratni par to, kāpēc tik maza attēla ielāde prasa tik ilgu laiku. Bet izmēra palielināšana rada pretēju efektu - attēla izmērs ir liels, bet fails tiek ielādēts ātrāk, salīdzinot ar tāda paša izmēra attēlu. Bet zīmējuma kvalitāte pasliktinās.

Vērtības

HTML

XHTML

Jebkurš pozitīvs vesels skaitlis pikseļos vai procentos.

Noklusējuma vērtība

HTML5 IE Cr Op Sa Fx IMG tags, platuma atribūts

Sveiki

, dārgais lasītāj.

Šī ir vienpadsmitā nodarbība CSS apguvē. Šajā nodarbībā aplūkosim tikai divas vienkāršas, bet svarīgas īpašības. Šīs īpašības kontrolē bloka augstumu un platumu.

Pēdējā nodarbībā apskatījām, kas ir bloka modelis, iekšējās un ārējās piemales. Šeit mēs apskatīsim tikai divus rekvizītus: bloka augstumu un platumu. Augstumu CSS nosaka īpašums augstums , un platums ir īpašums platums . Apskatīsim kodu, izmantojot reālu piemēru (ņemsim piemēru no pēdējās nodarbības):

Un CSS katram blokam