Hallo, vandaag zullen we zo'n belangrijk element van de site als een blok beschouwen, en dit artikel is onlosmakelijk verbonden met een artikel over blokontwerp waarin we hebben onderzocht hoe je zowel blokcontainers als ingebouwde elementen voor onze site op de plaats. Na bestudering van dit artikel ben ik er zeker van dat het voor ons veel duidelijker zal worden hoe we met blokken moeten werken en dit zal een zeer belangrijke stap zijn in de richting van het maken van onze eigen website.

De hoogte en breedte van het blok in CSS.

Laten we nu kijken naar de belangrijkste functies die ons zullen helpen beheren verschijning en de positie van de siteblokken en daarna zullen we al deze kennis in de praktijk moeten toepassen en zullen we een eenvoudig skelet voor de site maken.

De blokhoogte in CSS wordt ingesteld met het commando height: auto |<высота в единицах измерения>| overnemen en zoals je al begreep, kunnen we de hoogte van het blok instellen met behulp van de auto-opdracht, we geven de browser de opdracht dat deze de grootte van het blok zelf kan bepalen, en dus zal het blok van zo'n grootte zijn dat het in alle elementen past en niet meer.

Met het commando inherit kun je parameters lenen van het bovenliggende element en deze waarden zijn alleen zichtbaar als er parameters zijn ingesteld voor het bovenliggende element. Maar meestal moet u de blokgrootte specifiek instellen, geef gewoon de grootte op in een van de geaccepteerde waarden (meestal zijn dit pixels).

We kunnen ook de grootte instellen ten opzichte van het bovenliggende element en hiervoor moeten we percentages gebruiken. Eens kijken hoe het er in de praktijk uitziet.

Dit commando maakt het de browser duidelijk dat je voor een specifiek element op de pagina de grootte moet instellen op tien procent van de grootte van het bovenliggende blok.

De blokbreedte in CSS wordt ingesteld met de breedte: auto |<ширина>| erven alle parameters zijn hetzelfde voor zowel de hoogte als de breedte van het blok en ik denk dat het niet de moeite waard is om het nog een keer te herhalen. Ik wil alleen zeggen dat het niet nodig is om zowel de hoogte als de breedte van het blok specifiek in te stellen, je kunt bijvoorbeeld de breedte instellen en de hoogte zal toenemen afhankelijk van de inhoud en wat erg handig is als je dat niet doet weet welke inhoud er zal zijn specifieke pagina.

De minimale en maximale breedte van het blok.

Ook kunnen we voor elk blok instellen dat niet specifieke parameters maar de minimale en maximale parameter voor elk blok op de site. Hierdoor kun je de blokken vullen zonder bang te zijn dat ze buiten het browservenster komen.

Om dit in te stellen is heel eenvoudig, we moeten de volgende parameters registreren om de minimale breedte en hoogte in te stellen:

min-breedte:<ширина>

minimale hoogte:<высота>

En voor het maximum zijn twee parameters nodig:

Maximale wijdte:<ширина>
maximale hoogte:<высота>

Nu kunnen we zowel het maximum als . instellen minimale maat voor een blok of volledig voor de hele site, en dit is belangrijk voor een site met een rubberen ontwerp; als het vast staat, zal deze parameter niet werken.

Zwevende plaatsingsopties in css.

In alle voorgaande voorbeelden waarin we containers hebben gemaakt en elementen op volgorde zijn geplaatst, maar dit is niet genoeg voor ons om een ​​ontwerp te maken, we hebben de mogelijkheid nodig om elementen naar eigen goeddunken te plaatsen en de accommodatie zal ons hierbij helpen zweven naar css en nu zullen we de applicatie analyseren van deze woning op de praktijk.

De float-parameter kan verschillende waarden aannemen, en nu zullen we uitzoeken wat deze parameters zijn:

float: links | rechts | geen | erven

Laten we nu elk voorbeeld afzonderlijk bekijken.

Het float: left-commando betekent dat de box naar links moet worden uitgelijnd en dat alle andere elementen eromheen naar rechts vloeien.

float: rechts is precies het tegenovergestelde van het vorige commando en dienovereenkomstig wordt het blok rechts uitgelijnd en vloeien alle elementen eromheen naar links.

float: geen standaardgedrag voor elk blok, blokken achter elkaar plaatsen. Het gebruik van deze parameter is nu niet relevant en wordt zeer zelden gebruikt en eerder simpelweg vanwege analfabetisme.

De duidelijke parameter in css.

Heel vaak, wanneer je een ontwerp op blokken maakt met behulp van het float-commando, moet je een commando geven aan sommige blokken, zodat ze niet rond het blok stromen, maar zich zoals gewoonlijk gedragen en onder alle andere worden geplaatst. Dit probleem werd eerder opgelost door het float: none commando te gebruiken om het noodzakelijke blok maar de weergave in elke browser kan anders zijn en daarom is het in dergelijke gevallen veel rationeler om de opdracht clear te gebruiken en nu zullen we zien hoe dit kan worden gedaan.

wissen: links | rechts | beide | geen | erven

Het team heeft vier parameters, en nu zullen we specifiek met elk van hen ingaan, wat voor soort functies het uitvoert.

Het clear: left commando betekent dat het element onder alle elementen met de float: left parameter wordt geplaatst.

Het clear: right-commando plaatst het vak onder alle float: right-elementen.

De clear: both parameter plaatst het element onder alle blokken met zowel float: left als float: right parameters.

duidelijk: geen is het gebruikelijke gedrag voor een blok. Deze parameter moet niet worden ingesteld als er eerder drijvende containers zijn geplaatst.

Alle kennis passen we toe in de praktijk.

Dus we komen tot de conclusie van het artikel waarin we moeten zien hoe we dit allemaal in de praktijk kunnen brengen en het eerste wat we doen is een eenvoudig skelet voor de site maken. Dit is hoe ons wireframe eruit zal zien.

Zoals we voor het wireframe kunnen zien, moeten we vier DIV's maken en daarop moeten we zowel de grootte als de plaatsingsparameters toepassen.

We hebben vier blokken gemaakt en nu moeten we ze vullen met informatie en een achtergrond instellen voor elk blok, zodat we kunnen zien welk blok is geplaatst en waar. U kunt meer te weten komen over het instellen van de achtergrond. En dit is wat voor soort code we zouden moeten hebben.

Daarna moeten we naar de stylesheet gaan en alle commando's registreren die we nodig hebben. De commando's zijn allemaal hetzelfde voor alle blokken, alleen heeft elk zijn eigen parameters.

Koptekst (breedte: 500px; blokbreedte
hoogte: 100px; blok hoogte
achtergrondkleur: # 33CCFF;) blokkleur

Inhoud (breedte: 400px; blokbreedte
hoogte: 400px; blok hoogte
achtergrondkleur: # 33FF33; blokkleur
zweven: links;) positie blokkeren

Zijbalk (breedte: 100px; blokbreedte
hoogte: 400px; blok hoogte
achtergrondkleur: #CCCCCC; blokkleur
zweven: links;) positie blokkeren

Voettekst (breedte: 500px; blokbreedte
hoogte: 100px; blok hoogte
achtergrondkleur: # 0000FF; blokkleur
wissen: beide ;) standaard blokpositie

En nadat we al deze commando's hebben geschreven, krijgen we zo'n skelet voor de site.

Voordat ik het heb over het werken met de afmetingen van elementen, hun rangschikking, marges en inspringingen, zal ik u iets vertellen over de elementen zelf, meer bepaald over hun typen.

Alle elementen (tags) zijn onder te verdelen in twee categorieën: Block en Inline.

Wat is het verschil?

Ik denk dat de namen zelf al spreken van de verschillen. Blok- of dooselementen zijn containers, rechthoekige gebieden op een computermonitor, die zonder moeite en fietsuitvinding een bepaalde positie, grootte kan worden toegewezen, andere blokken erin kan plaatsen en de locatie ten opzichte van elkaar kan bepalen. EEN string elementen bevinden zich in dezelfde tijdlijn, uitgelijnd met de basislijn en worden in de regel gebruikt voor het opmaken en bewerken van tekst.

Blokkeren ( blok) elementen omvatten: