Dus een van de belangrijkste begrippen die we nog te dekken en te beoordelen positioneert elementen.
Dus hoe kunnen we lay-out van een pagina of verplaatsen van een div naar de rechterbovenhoek.
Of hoe maken we een anker tag breder of voeg afstand tussen beelden.
Dat alles is echt belangrijk en het is allemaal gerelateerd aan iets genaamd de box model.
Dus de box model is dit basisidee dat is echt dicht bij alles in HD beoordeelt u dat dat in principe elk element heeft een rechthoekige doos omheen.
Dus we kunnen hier gewoon gaan naar een webpagina op de MDA en ik heb de inspecteur open en ik heb het vergrootglas geselecteerd.
En als ik de muisaanwijzer over elk element kun je zien dat er een doos omheen.
Dus dit H2 heeft een blauwe doos omheen.
Deze heeft een doos.
Zelfs dingen die niet bijzonder boxy.
Dus dit afgeronde hoek div ..
Het heeft nog steeds een doos omheen.
Achter de schermen.
Dus doet dit hier en dit is echt niet rond of niet boxy op zoek naar deze afgeronde hoeken hebben, maar het is nog steeds een doos.
Dus deze dozen echt bruikbaar zijn achter de schermen, want we verschillende eigenschappen kunnen stylen op hen.
Er zijn dus vier eigenschappen of vier verschillende delen van elke doos.
Er is veel meer eigenschappen, maar voor onderdelen van het vak dat we kunnen manipuleren.
Dus laten we aannemen dat dit schema die ook uit MDA en is van een paragraaf.
Dus ik heb wat tekst in een paragraaf en ik geef het een oranje of een gele rand en dit is wat de gebruiker een tekst en een rand ziet, maar achter de schermen is er eigenlijk een aantal andere dingen gebeuren.
Dus tussen de grens en de tekst er is zoiets als opvulling.
Dus padding is gewoon de ruimte aan de binnenzijde van de rand.
Dus tussen de inhoud en de grens is opvulling en dan is er ook de marge die aan de andere kant is het tussen de grens aan de buitenkant en iets anders.
Dus maken we gebruik van de marge vaak afstand tussen elementen toe te voegen.
Dus als we hadden twee alinea's en ik wilde dat ze verder uit elkaar te zijn dan zou ik marge te gebruiken en te verhogen dat.
Dus nu gaan we een beetje een diepe duik te doen in feite de syntax van een aantal van de eigenschappen die we willen gebruiken voordat we dat doen.
Ik wil gewoon laten zien twee dingen die je kunt uitkijken naar het maken van de eerste een van de meest spannende, maar wat belangrijk is, is dat we nu een manier van het maken van iets dat er zo uitziet.
Tot nu toe hebben we eigenlijk geen manier om deze dozen die met elkaar verbonden dat een hebben toegewezen maar ze leeg zijn er geen tekst binnen.
Dus we gaan om te leren over het vak model en toe te passen die hier op deze Tic Tac Toe board maken en dan gaan we deze portfolio site te maken voor een fictieve fotograaf.
Dus dit is leuk.
Het is images het reageert zo verandert de grootte van een verandering het raam grootte en het raster.
Dit alles is gebaseerd off van de concepten je gaat om hier te leren.
Dus ik ga om verder te gaan en open sublieme hier.
En ik heb een heel eenvoudig document dat ik heb gemaakt.
Dus het is gewoon simpel HTML.
Het heeft een style sheet aangesloten.
Het is leeg.
Afgezien van een paar opmerkingen en dan twee alinea's.
Dus als ik deze open te stellen kun je zien dat het heel basic erg saai en we gaan gewoon om dit te gebruiken om te spelen met de box model.
Dus ik ga naar mijn succes en ik ga naar de punten te selecteren en vervolgens Ik ga gewoon op deze opmerkingen binnen te kopiëren, zodat ik wat code onder hen alleen maar om u visueel te vertellen wat ik doe kan schrijven.
Dus laten we beginnen met het geven van deze grens.
Dus moet deze beoordeling grens te zijn en laten we het doen om pixel stevige blauwe behalve dat refresh en je kunt zien dat we een grens helemaal rond de inhoud.
En wat je ook merken is dat de inhoud gaat helemaal over het scherm.
Onze grens doet hier niet stoppen en dat is omdat wanneer we een paragraaf standaard is gaat helemaal over het scherm.
Dus als ik wil de breedte van de paragraaf zelf van de tekst kan ik de breedte eigendom te gebruiken en ik ga om verder te gaan en geven een breedte van één te veranderen.
Laten we 200 pixels om te beginnen.
En als ik refresh je kunt zien dat we nu veranderd de breedte.
Als ik inspecteer de inhoud is niet blauw.
En dan hebben we een rand er omheen.
Dus de inhoud is blauw.
En op dit schema, dat is dit vakje hier dit element vak.
En dan hebben we een grens die direct omheen.
Er is geen ruimte tussen de rand en de inhoud.
Een ander ding met de breedte en ook is er een hoogte.
Dus laten we een hoogte van 300 pixels en zien we hebben gewoon een stel ruimte toegevoegd.
Ik ga om zich te ontdoen van die te krijgen, maar er is een hoogte die we kunnen gebruiken net als bij.
We hoeven niet gewoon gebruik maken van pixels, zodat we percentages kunnen gebruiken.
En die zijn echt nuttig dus laat me u tonen.
Laten we het doen van 50 procent en u vraagt ​​zich misschien af ​​wat is dat 50 procent.
Het antwoord is dat het 50 procent van het hoofdelement.
Dus in dit geval is het orgaan dat de paragraaf is de binnenkant van de paragraaf gaat halverwege over het lichaam.
In ons geval is het lichaam de hele pagina.
Het was helemaal over.
Dus eindigen we met de helft van de pagina.
En wat is er leuk is aan dit als ik de venstergrootte verandert ook zo veel mensen gebruik maken van deze en zal gebruik maken van die daadwerkelijk te gebruiken in deze afbeelding raster.
Je kunt zien dat de beelden de breedte te veranderen en dat is een percentage.
OK, dus ik ga het zo te houden voor nu.
En dan de volgende pand gaan we praten over vulling en vergeet niet padding is deze ruimte tussen het element en de grens.
En op dit moment hebben we geen ruimte hebben de grenzen bovenop.
Dus er is een eigenschap padding en we kunnen het geven van een aantal pixels en laten we het doen 10 pixels te beginnen.
Sla het bestand op refresh.
En nu hebben we 10 pixels van padding aan alle kanten.
Dus als ik nu inspecteer je zult zien is er nu dit groene inhoud dat zo is introduceerden we de blauwe content zelf en dan hebben we het groen eromheen dat tussen de grens en de inhoud zodat we uiteraard deze verhogen en we krijgen veel meer ruimte aan de binnenkant.
Maar dit is niet de enige manier om opvulling te stellen.
Dit stelt het op alle vier zijden precies hetzelfde.
Maar soms willen we alleen padding aan de ene kant of twee kanten, net als bij de grens.
Er zijn short cuts voor de langere versie waar het een rand top 10 pixels rand onderaan vijf pixels.
Hetzelfde met padding en het commentaar dat uit en we kunnen doen zoiets als opvulling links 40 pixels en fris.
En we krijgen padding hier.
En dat is de enige plek voor padding is.
En ik herinner me de ruimte hier deze blauwe is niet de opvulling dat is haar werkelijke inhoud die uit deze met hier.
Zo anders, hoewel het lijkt erop dat er ruimte aan de rechterkant.
Het komt van een andere plaats.
Dus een ander ding dat we hier kunnen doen is spelen met de marge.
Dus de marge is een laatste stukje van de puzzel.
Het is de ruimte aan de buitenzijde van de grens.
Dus tussen de elementen.
Dus dit gaat om bruikbaar te zijn, want we zouden willen verhogen of te verhogen deze ruimte hier of hier als voorbeeld deze ruimte hier in tussen de beelden wordt ingesteld met Marjan.
Dus het eigenlijk ziet er net als padding zodat we marges kunnen zeggen en laten we iets voor de hand liggende, zoals 100 pixels te beginnen en te vernieuwen doen.
En wat er is er nu 100 pixels ruimte aan alle zijden van het element aan de buitenzijde van de grens.
Zo vinden aspect.
Je zult zien dat in Chrome die is geïdentificeerd als oranje zo blauw is de inhoud Groen is de opvulling in Orange is de marge.
Dus net als opvulling.
Soms willen we slechts een deel van de marge ene kant zetten, zodat we kunnen doen zoiets als margin top is 500 pixels.
En toen ze komen op dit één voor nu en op te slaan en we krijgen alleen ruimte op de top aan de linkerkant is er niets.
En dan meer ruimte op de top van deze.
Niets op de bodem of de linker- of de rechterkant.
Dus dat is marge.
Dus soms we om waarden toe te voegen aan alle kanten van de marge, maar we willen niet te hebben om het te doen met vier verschillende lijnen.
Zodat we niet willen dat ze precies hetzelfde zijn als ze hier, maar we hebben niet allemaal te zeggen Grijprand marge marge rechtermarge bodem.
Dus er is een andere snelkoppeling, net als voor de rand.
Of we kunnen dingen tegelijk we deze marge kan doen en geef het vier waarden doen.
Zodat de eerste is de top en dan rechts en onderaan.
Laten we het doen 500 pixels en dan de linker en door te doen dat we dit mooie vierzijdige marge waarin de waarden zijn allemaal verschillend, maar we hadden alleen om te doen in één lijn.
Dus alleen maar om dit hier te inspecteren en te zien als we de 500 pixels aan de onderkant is de 20 op de top krijgen we de honderd aan de linkerkant en dan hebben we onze 40 aan de rechterkant.
Dus er is nog een laatste ding dat je ziet vaak met marge die marge.
Auto.
Dus wat we kunnen doen is de marge op auto op de links of rechts zijn.
En wat dat zal doen is eigenlijk Center een element voor ons.
Dus laat me zien hoe dat werkt.
En de reactie dit weer en kunnen we de marge schrijven en laten we maar zeggen nul marge bovenop auto aan de linkerkant of aan de rechterkant nul marge en de bodem en de auto aan de linkerkant.
En als ik deze op ware grootte en vernieuw je zult zien dat het centra dingen voor ons.
Dus wat dat betekent dat het besloten dat dit is 50 procent, omdat we zeiden dat hier en dan cijfers het uit de linkerkant is auto en de rechter is auto dus gewoon doet het zo veel als het moet doen en dat ook daadwerkelijk te centreren het voor ons.
En dan hebben we nul op de bovenkant en de onderkant, zodat ze samen zijn verpletterd.
Wat we ook doen is er zelfs een kortere manier om dit te doen en het lijkt erop dat deze marge nul Otto.
En zo zal de bovenste en onderste stellen naar links en rechts om het automatisch nul.
Zo verandert er niets en we kunnen ook deze syntax gebruiken als ik wil 50 pixels toe te voegen aan de bovenkant en de auto of ik wil 50 pixels en 20 pixels toe te voegen.
Het enige ding om te onthouden is dat je het nodig hebt x daar tenzij het getal nul is.
Als ik dit voegt 20 bovenaan links en rechts en voegt deze 50 aan de boven- en onderkant.
Dus laten we samen te vatten hier gewoon nog een keer.
We hebben de innerlijke inhoud die is hier kreeg.
We hebben padding die tussen de grenzen dus alles wat we hebben is padding gelaten heb en dan hebben we marge die tussen de grens en aan de andere kant.
Dus tussen de elementen in principe.