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, jums 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 ietverts iekšējais polsterējums, apmale un ārējais polsterējums.

Izmēģiniet »

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:

Kopējais augstums:	5 pikseļi	+	10 pikseļi	+	100 pikseļi	+	10 pikseļi	+	5 pikseļi	= 130 pikseļi
	tops rāmis		augšējais ievilkums		augstums		zemāks ievilkums		zemāks rāmis

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.

Vlads Merževičs

Jebkurš bloka elements sastāv no īpašību kopuma, piemēram, kāpostu lapām, kas uzklātas viena uz otras. Bloka pamatā ir tā saturs (tas var būt teksts, attēls utt.), kura platumu nosaka rekvizīts width, bet augstumu pēc augstuma ; ap saturu ir polsterējums, tie rada tukšu vietu no satura līdz apmaļu iekšējai malai; tad nāk pašas apmales (robeža) un bloku pabeidz ar piemalēm (margin), neredzamo tukšo vietu no apmaļu ārējās malas. Bloka platums ir sarežģīta vērtība un sastāv no vairākām īpašību vērtībām:

• platums - satura platums, t.i. bloķēt saturu;
• padding-left un padding-right - piemale pa kreisi un pa labi no satura;
• apmale-left un border-right - apmales biezums pa kreisi un pa labi;
• margin-left un margin-right - kreisā un labā mala.

Dažu rekvizītu var nebūt, un tādā gadījumā platums netiek ietekmēts. Kopējais platums ir parādīts attēlā. 1 kā melnu punktētu līniju.

Rīsi. 1. Bloka platums

Ja platums nav norādīts, tas pēc noklusējuma tiek iestatīts uz auto . Šajā gadījumā bloka platums aizņems visu pieejamo platumu, vienlaikus saglabājot piemaļu, apmaļu un polsterējuma vērtības. Šajā gadījumā pieejamais platums nozīmē vecākbloka satura platumu, un, ja vecāka nav, tad pārlūkprogrammas satura platumu.

Pieņemsim, ka slānim ir uzrakstīts šāds stils.

Platums: 300 pikseļi; /* Slāņa platums */ piemale: 7 pikseļi; /* Polsterējuma vērtība */ apmale: 4 pikseļi, vienkrāsains melns; /* Apmales opcijas */ polsterējums: 10px; /* Piemales ap tekstu */

Slāņa platums saskaņā ar šo ierakstu būs vienāds ar 342 pikseļiem, šo vērtību iegūst, saskaitot satura platuma vērtību plus kreiso polsterējumu, kreiso apmali un kreiso malu, plus labo malu, labo malu un labo polsterējumu. Apkoposim visus skaitļus.

Platums = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

Jāatzīmē, ka bloku modelis ar platuma veidošanos rada daudz neērtības. Jums pastāvīgi ir jāveic aprēķini, kad nepieciešams iestatīt noteiktu bloka platumu. Problēmas sākas arī apvienojot dažādas vienības mērījumi, jo īpaši procenti un pikseļi. Pieņemsim, ka satura platums ir iestatīts uz 90%, ja pievienojam pikseļos norādītās piemales un apmales, tad nav iespējams aprēķināt kopējo bloka platumu, jo procenti netiek tieši tulkoti pikseļos. Tā rezultātā bloka kopējais platums var pārsniegt tīmekļa lapas platumu, kā rezultātā veidojas horizontāla ritjosla. No šīs situācijas ir divas izejas - mainiet bloku modeļa algoritmu un izmantojiet ligzdotos slāņus.

Bloka modeļa algoritms

Kā minēts, bloka platums tiek veidots no satura platuma un piemaļu, apmaļu un polsterējuma vērtībām. Pārlūkprogrammā Internet Explorer Algoritms mainās automātiski un visa bloka platums tiek iestatīts vienāds ar platumu. Citas pārlūkprogrammas tik viegli nemaina algoritmu, turklāt jūs zināt, ka saderības režīms ir ļauns. CSS3 ir brīnišķīgs kastes izmēra rekvizīts, kas mums noderēs. Ja iestatīts uz apmales lodziņu, platums sāk ietvert piemales un apmales, bet ne polsterējumu. Tādējādi, savienojot mūsu stilam box-sizing ar border-box vērtību, mēs varam iestatīt platumu procentos un droši norādīt apmali un polsterējumu, nebaidoties, ka bloka platums mainīsies. Diemžēl ar šo īpašumu ir neliela problēma, kā tas parasti notiek ar pārlūkprogrammām – ne visas pārlūkprogrammas to saprot. Priecājos, ka pārlūkprogrammas vismaz atbalsta pārlūkprogrammai raksturīgos rekvizītus. Tabulā 1 parāda pārlūkprogrammas atbalstu.

Tabula 1. Pārlūka atbalsts lodziņa izmēra rekvizītam

Pārlūkprogramma	Internet Explorer	Chrome	Opera	Safari	Firefox
Versija	8.0+	2.0+	7.0+	3.0+	1.0+
Īpašums	kastes izmēra noteikšana	-tīmekļa komplekta-kastes izmēra noteikšana	kastes izmēra noteikšana	-tīmekļa komplekta-kastes izmēra noteikšana	-moz-kastes izmēra noteikšana

Kā redzams tabulā, īpašībās valda neskaidrības un svārstības, tāpēc būs jāizveido hibrīds un jānorāda visas trīs īpašības (1. piemērs).

1. piemērs: bloka platums

HTML5 CSS3 IE Cr Op Sa Fx

Šis piemērs darbosies visās tabulā norādītajās pārlūkprogrammās. 1, tomēr nav derīgs CSS3, jo tiek izmantoti nestandarta rekvizīti, kas sākas ar -moz un -webkit. Bloka platums ir 100%, ieskaitot polsterējuma vērtības. Bez lodziņa izmēra rekvizīta pārlūkprogrammā parādīsies horizontāla ritjosla.

Ligzdotie slāņi

Kastes izmēra rekvizīta izmantošana ir piemērota ikvienam, izņemot to, ka tas nedarbojas vecākās IE versijās. Ja veidojat vietni, kuras pamatā ir IE7 un IE6, jums ir piemērota vecā pārbaudītā slāņu ligzdošanas metode. Ideja ir vienkārša - ārējam bloka elementam ir iestatīts tikai nepieciešamais platums, bet ligzdotajam blokam ir iestatīts viss pārējais - piemales, apmales un polsterējums. Tā kā bloka noklusējuma platums ir vienāds ar tā vecāku pieejamo platumu, bloki savā ziņā pārklājas viens ar otru, bet faktiskais kombinētā elementa platums būs skaidri definēts. 2. piemērā parādīta ligzdotu slāņu izmantošana.

2. piemērs: ligzdoti slāņi

HTML5 CSS 2.1 IE Cr Op Sa Fx

Rezultāts šis piemērs attēlā parādīts. 2.

Rīsi. 2. Bloka platums procentos

Ligzdoto slāņu priekšrocība ir atkāpju izmantošana (kastes izmēra noteikšanā tās netiek ņemtas vērā), metodes daudzpusība un tas, ka fonu pēc vēlēšanās var pievienot vienam vai otram slānim. Tas nedaudz mainās izskats elementi, tas jo īpaši attiecas uz fona attēlu iekļaušanu. Starp metodes trūkumiem var atzīmēt papildu bloka iekļaušanu, kas sarežģī koda struktūru, it īpaši, ja metode tiek izmantota bieži. Bet to var uzskatīt par sīkumu salīdzinājumā ar ieguvumiem.

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.

Tabula 1. Platuma darbība pārlūkprogrammās

	Internet Explorer	Opera 10+, Firefox, Chrome, Safari	Opera 9
Nav norādīts (saderības režīms)	Ja saturs pārsniedz norādīto platumu, bloka izmērs tiek mainīts, lai tas atbilstu saturam. Pretējā gadījumā bloka platums ir vienāds ar platuma vērtību.	Visos gadījumos pārlūkprogramma darbojas saskaņā ar CSS specifikāciju. Proti, bloka platumu iegūst, saskaitot vērtības platums, polsterējums, mala un apmale. Bloka saturs, ja tas neatbilst norādītajiem izmēriem, tiek parādīts bloka augšpusē.	Platums ir vienāds ar platuma vērtību.
Pārejas HTML
Stingrs HTML	Platums tiek veidots, pievienojot platuma, polsterējuma, piemales un apmales vērtības. Ja bloka saturs neatbilst norādītajiem izmēriem, tie tiek parādīti augšpusē.		Platums ir vienāds ar platuma vērtību plus polsterējums, piemale un apmale. Ja bloka saturs neatbilst norādītajiem izmēriem, tie tiek parādīti augšpusē.
HTML 5
XHTML

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. mantot Pārmanto vecāku vērtību.

HTML5 CSS2.1 IE Cr Op Sa Fx

Šī piemēra rezultāts, kāds tas parādās pārlūkprogrammā Safari, ir parādīts attēlā. 1.

Rīsi. 1. Bloka platums

Objekta modelis

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

Pārlūkprogrammas

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.

Laikam nevienam nevajag stāstīt par div izkārtojuma priekšrocībām pār tabulu izkārtojumu.To visi jau sen ir sapratuši un pārgājuši uz tām no tabulām.Nu kas nav pārgājuši,tas drīz sapratīs savas kļūdas un izdarīs.Bet kā jebkura nodarbība - šeit Ir arī slazds: dīvas neuzvedas tā, kā vajadzētu, vai arī nav iespējams izkārtot kādu konkrētu struktūru, ir daudz šķēršļu, bet vienmēr ir tikai viens maketētājs...

Šis ieraksts ir vairāk paredzēts iesācējiem, bet varbūt pat profesionāļi šeit atradīs ko interesantu. Tātad ķersimies pie lietas!

To vienmēr ir vērts atcerēties

Ir viena pieeja izkārtojumam, kas jāievēro pēc iespējas biežāk un precīzāk. Tā ir DOM koka mineralizācija. Tam ir vairākas pamatotas priekšrocības: tas vienkāršo pašu izkārtojuma procesu, samazina iespējamo kļūdu skaitu līdz minimumam un uzlabo koda caurspīdīgumu. Mums tas vienmēr ir jāatceras un, plānojot struktūru, tam jāpievērš īpaša uzmanība.

Pamatprincipi ir sekojoši: atkāpei izmantojam tikai polsterējumu un malu (atkarībā no nepieciešamības) - nemaz nevajag taisīt atsevišķu 20 pikseļu div, ligzdošanu ierobežojam līdz minimumam, nepārspīlējam ar pozīciju : relatīvās un sekojošās bloku nobīdes (ja to izmanto nepareizi, tas var novest pie pusstundas visa koda rediģēšanas), mēs aktīvi izmantojam z-indeksu, lai sasniegtu vēlamo efektu.

FAQ

- Kā izvietot divus vienu pēc otra? Un šim nolūkam mēs izmantojam īpašību - float: pa kreisi (vai pa labi, atkarībā no nepieciešamības), lai nākamais div pēc šādiem alternatīviem stāvētu zem tiem, mēs tam iestatām skaidru īpašību (piemēram, clear: left).

- Kā centrēt div? Viens risinājums izskatās šādā veidā- iestatīt piemale-kreiso un malu labo kā auto (vai vēl vienkāršāk - margin:0 auto;)

- Kā vertikāli novietot elementus div? Tas ir atkarīgs no elementa, piemēram, tekstam, pietiek tikai norādīt vertical-align:middle, bet attēlam jānorāda line-height:Npx.

- Atkāpe, izmantojot piemali vai polsterējumu? Būtībā piemale kalpo atkāpei starp blokiem; tā ir "ārēja" atkāpe, jo polsterējums ir "iekšējais" atkāpe un visbiežāk tiek izmantots, piemēram, lai sakārtotu atkāpi ap tekstu. Šķiet, ka tā ir vienkārša lieta, bet dažreiz jūs varat sastapties ar tādiem dārgakmeņiem kā firebug, ko es nevarēju nepieminēt šeit.

- Pārbīdīt bloku, izmantojot malu vai pozīciju: relatīvs kopā ar horizontālām un vertikālām nobīdēm? Protams, šajos gadījumos jums ir jāizmanto rezerve. Tiesa, tāpat kā citur, viss ir atkarīgs no konkrētā gadījuma, bet kopumā tomēr vajadzētu izmantot maržu.

- Kā izstiept div, lai tas atbilstu bloka saturam? Lai to izdarītu, jānorāda augstums: auto;

Kā izstiept div līdz tā vecāka augstumam, kas savukārt stiepjas līdz tā iekšpusē esošā div satura augstumam blakus pirmajam div? Iestatiet satura div uz augstums: auto, pārējie divi divi uz augstumu: 100% un displejs: tabula;

- Kā padarīt div neredzamu? Manipulējot ar displeja rekvizītu. Lai nodrošinātu neredzamību, iestatiet to uz Nav.

- Kā panākt satura ritināšanu divos ar statisku augstumu? Mēs iestatām pārpildīšanu: ritiniet rekvizītos.

- Kā parādīt (piemēram) tagu “a” kā div (bloku)? Rekvizītos iestatiet augstumu un platumu un iestatiet display:block;

Tas ir viss, kas jāzina, lai nesāpīgi rakstītu divs.Patiesībā.Nu ja radīsies vēl kādi jautājumi,tad te uzreiz parādīsies atbildes!Bet kopumā nav ko baidīties-pusstunda treniņa un tu Es jau esmu profesionālis. Atlieciet malā šīs novecojušās tabulas un pārejiet uz jaunu evolūcijas posmu!

Birkas: bieži uzdotie jautājumi, div, izkārtojums, apmācība

Izkārtojot nākamo projektu (vai vienkārši veidojot izkārtojuma režģi), daudzi saskārās ar dilemmu - izmantot fiksētu izkārtojuma platumu vai “gumijas” režģi, kas pielāgojas pārlūkprogrammas loga lielumam.

Katram no šiem risinājumiem ir savi plusi un mīnusi, es vēlos koncentrēties uz mīnusiem, jo ​​parasti tieši šo lēmumu mīnusu atspoguļošanā ir jāizvēlas starp diviem ļaunumiem.

Fiksēts izkārtojuma režģa platums

Izkārtojums ir piespiests horizontālā dimensijā 960–980 pikseļi (tā, lai lielākajā daļā ierīču vairumā izšķirtspēju viss būtu iekļauts), kas ar lieliem horizontālajiem logu izmēriem izskatās kaut kā vēss - tieva vertikāla noderīga lapas satura josla un milzīgi bezjēdzīgi lauki neizmantota vieta sānos.

“Gumijas” izkārtojuma režģis visā loga platumā

Atkal ar lieliem horizontālajiem logiem ir vēl viena problēma: teksta rindiņas kļūst ļoti garas, un to lasīšana nemaz nav tik ērta, kā mēs vēlētos.
Vēl viena izplatīta šī risinājuma problēma ir tā, ka sānu malas ar lieliem horizontālajiem logu izmēriem vairs vizuāli neatbilst elementu horizontālajiem izmēriem, kas arī nedod papildu komfortu, skatoties uz izkārtojumu.

Es gribētu piedāvāt vienkāršu risinājumu - ierobežot minimālo horizontālo izmēru līdz noteiktai vērtībai pikseļos un noteikt maksimālo relatīvo procentuālo daļu no loga platuma. Tas ir ļoti triviāls risinājums ar vienkāršiem līdzekļiem Vēl 2 CSS specifikācijas versijas.

Atjaunināt: Vēlos izdarīt atrunu, ka mēs nerunājam par klasisko gumijas efektu un pielāgošanos absolūti visām izšķirtspējām, bet gan tikai par noteiktu saprātīgu izšķirtspējas diapazonu, kuram ir paredzēts izkārtojums. Tālāk sniegtajos piemēros šis ir klasiskais darbvirsmas izšķirtspējas diapazons ar horizontālās izšķirtspējas izmēru 1024 pikseļi.

Ļaujiet man vēlreiz uzsvērt: Ziņa nerunā par risinājumu visu veidu ierīcēm un visiem izšķirtspējas diapazoniem. Šo problēmu principā nevar atrisināt viena izkārtojuma ietvaros., lai to atrisinātu tā vai citādi, būs nepieciešami vairāki izkārtojumi. Mušas atsevišķi, kotletes atsevišķi.

Izveidojiet izkārtojuma konteineru:
...
Mēs to dekorējam ar vienkāršu stila kodu:
div.page-container (minimālais platums: 960 pikseļi; maksimālais platums: 75%; piemale: 0 automātiski; polsterējums: 0; )
Tomēr šis risinājums dažiem var šķist nepietiekams, jo ar ļoti lieliem horizontālajiem logiem atkal parādās problēmas ar līniju garumu. To var atrisināt ar tikpat vienkāršu papildu paņēmienu: izveidojot papildu ārējo konteineru jau aprakstītajā iekšpusē un ierobežojot tā maksimālo platumu līdz noteiktai vērtībai (subjektīvi, man šķiet, ka vērtības diapazonā no 1400-1600 pikseļiem ir vispiemērotākais). Atkal mēs tikai lietojam CSS rīki 2.0. Šis risinājums, tā vietā, lai vienkārši pievienotu sākotnējā konteinera platumu procentos, kā ieteikts pirmajā komentārā, darbosies arī IE, kas līdz 9. versijai nesaprot vienlaicīgu vērtību norādīšanu.

HTML pievienošana:
...

Un nedaudz mainiet CSS:
div.page-container ( max-width: 75%; min-width: 960px; margin: 0 auto; polsterējums: 0; ) div.page-container-inner ( min-width: 960px; max-width: 1600px; margin : 0 auto; polsterējums: 0;)
Kā redzat, risinājums ir ārkārtīgi vienkāršs un diezgan universāls, to var izmantot jebkuram bloka elementam.