Als u van plan bent een geweldige webpagina-indeling te maken, moet u weten over marges, randen, opvulling en inhoud. Elk element in webdesign, of het nu een afbeelding of tekst is, gebruikt een kader met deze eigenschappen. Je kunt eenvoudig complexe lay-outs bouwen door te spelen met het doosmodel. In dit artikel zullen we het CSS Box-model ontleden en laten zien hoe u deze eigenschappen kunt gebruiken met praktische voorbeelden.
Het CSS-boxmodel is een standaard die is gemaakt door het World Wide Web Consortium . Het beschrijft alle elementen in een HTML-document als rechthoekige vakken met hun eigen afmetingen. Deze vakken bevatten een inhoudsgebied en optionele omringende marge-, rand- en opvulgebieden. Laten we dus eens kijken naar de onderdelen van een CSS-box.
Laten we de vier lagen van het CSS-boxmodel ontdekken.
Het inhoudsgebied bevat de hoofdinhoud van het element, wat een afbeelding, tekst of enige vorm van media-inhoud kan zijn. U kunt de afmetingen van elementen op blokniveau wijzigen met de eigenschappen hoogte en breedte .
Opvulling is de ruimte tussen het inhoudsvak en het randvak. Hoewel het als witruimte om uw inhoud zit, kunt u een achtergrondkleur gebruiken om het verschil te visualiseren. U kunt de eigenschappen padding-top , padding-right , padding-bottom en padding-left toepassen om de ruimte te wijzigen.
De rand omsluit de inhoud en het opvulgebied. U kunt de grootte en stijl van de rand wijzigen met de eigenschappen randbreedte , randstijl en randkleur .
De laatste laag van het boxmodel wordt veel gebruikt om ruimte tussen elementen te genereren. De marge omhult de inhoud, de opvulling en het randgebied. U kunt de eigenschappen margin-top, margin-right , margin-bottom en margin-left gebruiken . U kunt de marge-eigenschap ook een negatieve waarde of auto geven om een aantal geweldige plaatsingstechnieken te bereiken.
Laten we een miniproject bouwen om het basisdoosmodel te demonstreren met een inhoudsvak en eigenschappen voor opvulling, rand en marge. U kunt kiezen voor tekst, afbeeldingen of media-inhoud. We beginnen met ervoor te zorgen dat het goed is gestructureerd.
CSS-boxmodel
Uitgang:
U kunt ingebouwde functies van uw browser gebruiken, zoals de Chrome Developer Tools , om te zien wat er aan de hand is. We gebruiken twee afbeeldingen van Unsplash. Voor de eenvoud verbergen we de afbeelding van de smartphone met weergave: geen; totdat we het later nodig hebben.
/************************* BASIC STYLING *************************/ * { margin: 0px; padding: 0px; } body { display: flex; flex-direction: row; } .display { display: none !important; }
Laten we nu onze inhoudsdoos stylen. Eerst stellen we de hoogte en breedte van de afbeelding in. Ook helpt het geven van een achtergrondkleur bij een betere visualisatie. Dus laten we het doen.
/************************* CONTENT BOX *************************/ .content-box { display: flex; flex-direction: row; justify-content: center; align-items: center; /* Styling the content box using height and width properties */ background-color: #fdf; height: 20em; width: 30em; }
U kunt de eigenschappen padding-top , padding-right , padding-bottom en padding-left afzonderlijk instellen of de steno gebruiken. Probeer indien mogelijk de steno te gebruiken, aangezien dit u wat tijd kan besparen. Laten we eens kijken hoe opvulling werkt.
/************************* PADDING *************************/ /* Applying padding */ padding-top: 5em; padding-right: 2em; padding-bottom: 8em; padding-left: 2em; /* Padding shorthand */ /* top/right/bottom/left */ padding: 5em 2em 8em 2em; /* top/horizontal/bottom */ padding: 5em 2em 8em;
Uitgang:
Zorg er bij het toepassen van de border- eigenschap voor dat u de border-color- eigenschap gebruikt om de rand een andere kleur dan de achtergrond te geven. U kunt de kiezen border-style hetzij individueel, hetzij in één keer met de eigenschap steno. Hetzelfde geldt voor de border-width eigenschap.
U kunt ook de grensradius instellen om het vak afgeronde hoeken te geven met een straal in px , rem , em of procent.
/************************* BORDER *************************/ /* Applying border properties */ /* Set the border color */ border-color: rgb(148, 234, 255); /* Select border style */ border-top-style: solid; border-right-style: dashed; border-bottom-style: groove; border-left-style: ridge; /* border-style shorthand */ /* top/right/bottom/left */ border-style: solid dashed groove ridge; /* Set border width */ border-top-width: 4em; border-right-width: 2em; border-bottom-width: 2em; border-left-width: 2em; /* border-width shorthand*/ /* top/right/bottom/left */ border-width: 4em 2em 2em 2em; /* top/horizontal/bottom */ border-width: 4em 2em 2em; /* border property shorthand */ /* border: 4em solid rgb(148, 234, 255); */ /* Set border-radius */ border-radius: 5em; border-radius: 20%;
Uitgang:
U kunt een vak horizontaal centreren met margin: 0 auto , op voorwaarde dat het een bepaalde breedte heeft.
/************************* MARGIN *************************/ /* Applying margin properties */ margin-top: 4em; margin-right: 5em; margin-bottom: 3em; margin-left: 5em; /* Margin shorthand */ /* top/right/bottom/left */ margin: 4em 5em 3em 5em; /* top/horizontal/bottom */ margin: 4em 5em 3em; /* Using auto margin */ margin: 3em auto;
Uitgang:
U kunt de marge-eigenschap opgeven met een, twee, drie of vier waarden. De waarden kunnen een lengte, percentage of een trefwoord zijn zoals auto . Laten we begrijpen hoe het werkt:
Merk op dat u deze sneltoetsen ook kunt gebruiken voor opvulling en randeigenschappen.
Zie ook: De essentiële CSS3-eigenschappen Cheatsheet
Heb je ooit een negatieve marge gebruikt? Om het te visualiseren, laten we de weergave wissen : geen om onze tweede afbeelding weer te geven, en stel vervolgens een negatieve marge in.
/* .display { display: none !important; } */ .content-box { display: flex; flex-direction: row; align-items: center; background-color: #fdf; height: 20em; width: 30em; padding: 5em 2em 8em; border-style: solid dashed groove ridge; border-width: 4em 2em 2em; border-radius: 20%; /* Using negative margin */ margin: 3em -20em 3em 5em; }
Uitgang:
Met het doosmodel kunt u ruimte tussen elementen definiëren, randen toevoegen en eenvoudig een complex ogende lay-out bouwen. Je kunt direct aan de slag om een geweldige website te maken. Ondertussen kun je de border-box- eigenschap in detail verkennen en met de bovenstaande code spelen.
U moet begrijpen dat er andere methoden zijn om inhoud in CSS op te maken. Deze omvatten CSS Grid en CSS Flexbox. Als u eenmaal vertrouwd bent met het boxmodel, moet u verder leren over deze alternatieven.
Hoewel u een grafische rekenmachine op uw computer kunt gebruiken, kan de Python-programmeertaalinterpreter ook dienst doen als bureaurekenmachine. Het is zo'n populaire hardloopgrap in de Python-gemeenschap dat het wordt genoemd in de officiële tutorial. Hier leest u hoe u Python als rekenmachine kunt gebruiken.
Als programmeur moet je uitdagingen aangaan om te overleven en wonderen te bouwen op het gebied van ontwikkeling of programmeren. Als u dus een geavanceerde programmeertaal wilt leren om uw carrièrevaardigheden te verbeteren, is Java een van de beste vooruitzichten die er zijn.
Het leren van een nieuwe programmeertaal zoals Python wordt moeiteloos als je een uitgebreid stappenplan hebt waarin wordt beschreven welke concepten je als beginner moet leren en hoe je verder kunt komen om de volgende mijlpaal te bereiken. Zelfs gevorderde programmeurs zouden hun basis regelmatig moeten opfrissen om een solide basis voor zichzelf op te bouwen.
Tegenwoordig is het gebruikelijk om een website of app te bouwen die de gebruikersinterface aanpast, afhankelijk van de browser of het apparaat. Er zijn twee benaderingen om dit doel te bereiken. De eerste omvat het maken van verschillende versies van uw website of app voor verschillende apparaten. Maar het is inefficiënt en kan leiden tot onvoorspelbare fouten.
Werken met getallen is een integraal onderdeel van programmeren. Elke programmeertaal biedt ondersteuning om getallen op veel verschillende manieren te manipuleren. In dit artikel leert u hoe u het totale aantal cijfers in een geheel getal kunt vinden met behulp van iteratieve, op logs gebaseerde en op tekenreeksen gebaseerde benaderingen.
SQL versus NoSQL: wat is de beste database voor uw volgende project?
Het insluiten van services van derden in uw WordPress-berichten is een opwindende manier om de interesse van een bezoeker te wekken. Ingesloten inhoud biedt ook visuele aanwijzingen die het scannen gemakkelijker maken. WordPress heeft het toevoegen van dit soort inhoud eenvoudig gemaakt.
Node.js is een JavaScript-runtimeomgeving waarmee u JavaScript buiten webbrowsers kunt uitvoeren, waardoor het een populaire keuze is voor het ontwikkelen van allerlei soorten toepassingen. Een deel van zijn populariteit is te danken aan de overvloed aan NPM-pakketten die er zijn om de ontwikkelaarservaring te vergemakkelijken.
Solidity is de programmeertaal die wordt gebruikt door slimme contracten op de Ethereum-blockchain. Het is een statisch getypeerde, objectgeoriënteerde programmeertaal.
GitHub-badges kunnen de leesbaarheid van een repository vergroten door gebruikers een snelle manier te bieden om de repository-statistieken vast te leggen. Badges kunnen worden ingesloten in uw README.md om het belang en de noodzaak van uw project aan andere ontwikkelaars duidelijk te maken. Als gevolg hiervan krijgen lezers een heel snel idee van de repository door de bijgevoegde badges te controleren.
Internationale feestdagen zijn een leuke manier om erkenning te geven aan sociale zaken, historische dagen en respectieve carrières. International Programmers' Day viert de rol die programmeurs spelen om het dagelijks leven te verbeteren. De beschaafde wereld waarin we leven is een product van het harde werk van programmeurs.
Of het nu gaat om een databasequery of resultaten van wiskundige bewerkingen, de Python-tekenreeksindelingsmethode biedt een meer dynamische en aantrekkelijke manier om resultaten aan een gebruiker te presenteren.
Eerder dit jaar bracht Microsoft de preview-versie van Visual Studio 2022 uit in de wilde programmeerwereld. Dit is goed nieuws! Het is een extreem populaire IDE, maar aan een opknapbeurt of misschien zelfs een revisie toe, gezien het tempo van de veranderingen in het DevOps-ecosysteem waarin het gedijt.
Softwarestatistieken zijn metingen die worden gebruikt om verschillende aspecten van uw software te kwantificeren. Deze aspecten kunnen variëren van de kosten, kwaliteit en efficiëntie van het ontwikkelteam.
Als je een Python-ontwikkelaar bent, kun je enorm profiteren van de reeks beschikbare frameworks. Terwijl sommige kaders het meest geschikt zijn voor grote ecosystemen, zijn andere gespecialiseerd in het dienen van specifieke ontwikkelingsdoelen. Lees verder om de basisfuncties, het gebruik en de verschillen tussen twee Python-frameworks te leren: Flask en CherryPy.
Veel programmeurs houden ervan om lastige wiskundige problemen op te lossen met behulp van code. Het helpt de geest te scherpen en het probleemoplossend vermogen te verbeteren. In dit artikel leer je hoe je de kleinste en grootste n-cijferige perfecte vierkanten en kubussen kunt vinden met Python, C++ en JavaScript. Elk voorbeeld bevat ook voorbeelduitvoer voor verschillende waarden.
Het if-statement is de drijvende kracht achter logisch programmeren. Als gevolg hiervan is een beter begrip van Pythons een belangrijke toevoeging aan je Python-programmeervaardigheden.
Technologie is zonder twijfel de industrie van de toekomst. Als je een van de miljoenen jonge volwassenen bent die op het punt staan om in de eerste fase van je carrière te duiken, vraag je je misschien af wat je moet doen als je niet van coderen houdt.
U kunt een real-life project in Python niet met succes voltooien zonder een virtuele omgeving. Tools zoals virtualenvwrapper en virtualenv zijn gebruikelijk voor het maken en beheren van virtuele omgevingen voor webontwikkeling, terwijl anaconda veel wordt gebruikt door datawetenschappers.
Hoewel u een grafische rekenmachine op uw computer kunt gebruiken, kan de Python-programmeertaalinterpreter ook dienst doen als bureaurekenmachine. Het is zo'n populaire hardloopgrap in de Python-gemeenschap dat het wordt genoemd in de officiële tutorial. Hier leest u hoe u Python als rekenmachine kunt gebruiken.
Als programmeur moet je uitdagingen aangaan om te overleven en wonderen te bouwen op het gebied van ontwikkeling of programmeren. Als u dus een geavanceerde programmeertaal wilt leren om uw carrièrevaardigheden te verbeteren, is Java een van de beste vooruitzichten die er zijn.
Het leren van een nieuwe programmeertaal zoals Python wordt moeiteloos als je een uitgebreid stappenplan hebt waarin wordt beschreven welke concepten je als beginner moet leren en hoe je verder kunt komen om de volgende mijlpaal te bereiken. Zelfs gevorderde programmeurs zouden hun basis regelmatig moeten opfrissen om een solide basis voor zichzelf op te bouwen.
Tegenwoordig is het gebruikelijk om een website of app te bouwen die de gebruikersinterface aanpast, afhankelijk van de browser of het apparaat. Er zijn twee benaderingen om dit doel te bereiken. De eerste omvat het maken van verschillende versies van uw website of app voor verschillende apparaten. Maar het is inefficiënt en kan leiden tot onvoorspelbare fouten.
Werken met getallen is een integraal onderdeel van programmeren. Elke programmeertaal biedt ondersteuning om getallen op veel verschillende manieren te manipuleren. In dit artikel leert u hoe u het totale aantal cijfers in een geheel getal kunt vinden met behulp van iteratieve, op logs gebaseerde en op tekenreeksen gebaseerde benaderingen.
Containers zijn zeer nuttig voor softwareontwikkeling, implementatie en beheer in een virtuele omgeving. Docker is handig in het containerisatieproces, maar het is niet het enige platform dat er is. Als u op zoek bent naar alternatieven voor Docker, hoeft u niet verder te zoeken. Deze lijst toont enkele veelzijdige en efficiënte Docker-alternatieven die u in uw volgende project kunt gebruiken.
SQL versus NoSQL: wat is de beste database voor uw volgende project?
Het insluiten van services van derden in uw WordPress-berichten is een opwindende manier om de interesse van een bezoeker te wekken. Ingesloten inhoud biedt ook visuele aanwijzingen die het scannen gemakkelijker maken. WordPress heeft het toevoegen van dit soort inhoud eenvoudig gemaakt.
Node.js is een JavaScript-runtimeomgeving waarmee u JavaScript buiten webbrowsers kunt uitvoeren, waardoor het een populaire keuze is voor het ontwikkelen van allerlei soorten toepassingen. Een deel van zijn populariteit is te danken aan de overvloed aan NPM-pakketten die er zijn om de ontwikkelaarservaring te vergemakkelijken.
Solidity is de programmeertaal die wordt gebruikt door slimme contracten op de Ethereum-blockchain. Het is een statisch getypeerde, objectgeoriënteerde programmeertaal.
