Share
Ik heb meerdere verzoeken ontvangen voor eenvoudigere CSS-zelfstudies die de lastige fundamenten leren. Dit zal dienen als het eerste item in een reeks die elke maand sporadisch nieuwe toevoegingen ontvangt. Vandaag gaan we de overflow bekijken: hidden en clearfix-trucs om een parent-div te dwingen zijn kinderen op te nemen.
Is het je ooit opgevallen dat wanneer je alle kinderen-elementen in een div zweeft, de ouder nul ruimte in beslag neemt? In uw code-editor voegt u bijvoorbeeld het volgende toe binnen de body-tag.
Laten we nu een beetje CSS toevoegen om een typische website te simuleren.
#container background: red; breedte: 800 px; padding-bottom: 2em; #main background: groen; hoogte: 500 px; breedte: 600 px; zweven: rechts; #sidebar achtergrond: blauw; hoogte: 500 px; breedte: 200 px; zweven: links;
Hierboven stellen we eenvoudig achtergrondkleuren in en zweven de zijbalk en de hoofd-divs respectievelijk naar links en rechts. Let op de "padding-bottom: 2em;". Dit zou ons in staat moeten stellen om de rode achtergrond helemaal onderaan te zien, toch? Bekijk de pagina in uw browser en u ziet:
Waar is de rode achtergrond gebleven? Waarom wordt het niet weergegeven??
Als je alle kinderen zweeft, neemt de ouder in essentie geen ruimte in. Om dit feit beter te illustreren, laten we een willekeurige hoogte van 50px instellen op de container en vervolgens de dekking van de onderliggende div's verminderen, zodat we de rode achtergrond hieronder kunnen zien.
#container ... andere stijlen height: 50px; #main, #sidebar opacity: .5;
Vernieuw je browser en je ziet:
Hoe vreemd. We hebben een hoogte van 50px opgegeven voor onze container-div, maar de hoofd- en zijbalk divans schaamteloos overloop zijn grenzen, zoals verwende nep divs.
Keer terug naar je stylesheet en pas één stijl toe:
#container ... andere stijlen overloop: verborgen;
Na nog een verversing zien we:
Nou dat helpt gedeeltelijk. Nu hoeven we ons geen zorgen te maken over de puberale kinderen die hun ouders ongehoorzaam zijn. Dat gezegd hebbende, helpt dit echt niet onze situatie.
"Probeer zoveel mogelijk hoogtes te vermijden, meestal is er een slimmere methode.
De oplossing is om de height-eigenschap uit onze container te verwijderen. Verwijderen de volgende eigenschap.
#container ... andere stijlen height: 50px; /* Verwijder dit */
Een laatste keer vernieuwen en ons probleem lijkt te zijn verholpen.
U kunt ook de dekkingseigenschappen verwijderen. Ze waren alleen voor demonstratiedoeleinden. De hierboven getoonde methode zal in de meeste gevallen werken. Laten we echter een andere variabele introduceren. Wat als we een afbeelding op de rand van onze container willen plaatsen, zodat deze overlapt? Je hebt dit effect vele malen gezien. Voor het voorbeeld gebruiken we alleen een afbeelding van een cirkel met een transparante achtergrond. Op een echte site kan dit een knop 'Nu kopen' of 'Aanmelden' zijn - iets dergelijks.
Gebruik CSS om de afbeelding in de rechterbovenhoek van onze "website" te plaatsen, waarbij de randen overlappen. Dit is wat we willen:
Eerst verwijzen we naar de afbeelding in onze HTML.
... rest van html
Keer vervolgens terug naar uw stylesheet en voeg de volgende stijlen toe.
img positie: absoluut; rechts: -100px; top: 20px;Positionering context
Men zou kunnen denken dat dit de afbeelding net over de rechterrand van de container-div plaatst. Hij zou echter ongelijk hebben.
Omdat we geen positioneringscontext hebben ingesteld, wordt het venster in plaats daarvan gebruikt.
Dit is duidelijk niet wat we willen. Om een positioneringscontext toe te passen op onze container-div, voegt u gewoon "position: relative;" bij #container. Zodra dit is gebeurd, gebruikt de afbeelding het venster niet langer als referentie.
Wat is het probleem nu??
Maar nu hebben we een nieuw probleem! Omdat we overstroming hebben ingesteld: verborgen voor onze container-div, hebben we onszelf enigszins in de voet geschoten. Hoe verbreken we grenzen en nemen we namen aan als overflow op verborgen is ingesteld? Moeten we gewoon accepteren dat deze bepaalde website vandaag geen namen meer zal nemen? Absoluut niet. In deze gevallen is het de moeite waard om een andere methode te gebruiken.
De Clearfix-truc
Met deze methode gebruiken we CSS om inhoud toe te voegen na onze container-div. Deze gecreëerde inhoud zal dan onze div wissen, en dwingt het zijn kinderen te bevatten. Het is duidelijk dat we deze inhoud niet willen zien, dus we moeten het zeker verbergen voor de kijker.
Keer terug naar je stylesheet en verwijder "overflow: hidden;" uit je container-div, en voeg het volgende toe:
#container ... andere stijlen _hoogte: 1%; #container: after content: "."; zichtbaarheid: verborgen; weergave: blok; beiden opschonen; hoogte: 0; lettergrootte: 0;Dit lijkt ingewikkeld, maar ik verzeker u dat het vrij eenvoudig is.
- _hoogte: Triggers "haslayout" in Internet Explorer, met behulp van de onderstrepingstruc om IE6 rechtstreeks te targeten.
- inhoud: Na de container-div, voeg een punt toe.
- zichtbaarheid: We willen de periode niet zien, dus verberg hem voor de pagina. (Gelijk aan het instellen van dekking: 0;)
- weergave: Forceert dat de periode wordt weergegeven als blokniveau, in plaats van inline.
- duidelijk: De belangrijke eigenschap. Dit wist de hoofd- en zijbalk-divs. Dit is hetzelfde als een unsemantic toevoegen
naar onze pagina.- hoogte: Neem geen ruimte in beslag.
- lettertypegrootte: Gewoon een voorzorgsmaatregel voor Firefox. Deze browser voegt soms een beetje ruimte toe na ons bovenliggende element. Als u de lettertypegrootte op nul instelt, wordt dit opgelost.
Conclusie
Hoewel de overloop: een verborgen truc de voorkeur heeft, is het niet altijd ideaal. U moet de beste oplossing gebruiken voor de taak die voor u ligt. Het belangrijkste is om elke methode te leren, zodat je de tools hebt om de puzzel op te lossen.
- Volg ons op Twitter, of abonneer je op de NETTUTS RSS-feed voor meer dagelijkse webontwikkelingen, tuts en artikelen.
Accentsconagua
... rest van html 
