CSS-buitelyne is meer as net 'n grens
Die CSS- uiteensetting eiendom is 'n verwarrende eiendom. As jy eers daaroor leer, is dit moeilik om te verstaan hoe dit selfs van die grens eiendom afwyk. Die W3C verduidelik dit as die volgende verskille:
- Buitelyne neem nie ruimte op nie.
- Buitelyne kan nie-reghoekig wees.
Buitelyne neem nie ruimte op nie
Hierdie stelling, op sigself, is verwarrend. Hoe kan 'n voorwerp op jou webblad nie ruimte op die webblad opneem nie? Maar as jy dink dat jou webblad soos 'n ui is, kan elke item op die bladsy op 'n ander item gelaag word. Die omtrek eiendom neem nie ruimte op nie, want dit word altyd bo-op die boks van die element geplaas.
Wanneer 'n buitelyn rondom 'n element geplaas word, het dit geen effek op hoe die element op die bladsy uitgelê word nie. Dit verander nie die grootte of posisie van die element nie. As jy 'n buitelyn op 'n element plaas, sal dit dieselfde hoeveelheid ruimte neem asof jy nie 'n oorsig van daardie element gehad het nie. Dit geld nie vir 'n grens nie. 'N Grens op 'n element word bygevoeg aan die buitenste breedte en hoogte van die element. So as jy 'n beeld gehad het wat 50 pixels breed was, met 'n 2-pixelgrens, sou dit 54 pixels (2 pixels vir elke kantgrens) neem. Dieselfde beeld met 'n 2-pixel-omtrek sal slegs 50 pixels breedte op jou bladsy inneem. Die buitelyn sal oor die buitekant van die prent vertoon.
Uitrekeninge kan nie-reghoekig wees
Voordat jy begin dink "cool, kan ek nou sirkels trek!" Dink weer. Hierdie stelling het 'n ander betekenis as wat jy dalk dink. Wanneer jy 'n grens op 'n element plaas, interpreteer die blaaier die element asof dit een reuse-reghoekige blokkie is. As die boks oor verskeie lyne verdeel word, laat die blaaier net die rande oop omdat die boks nie gesluit is nie. Dit is asof die blaaier die grens met 'n oneindige wye skerm sien - wyd genoeg vir daardie grens as een deurlopende reghoek.
In teenstelling hiermee neem die buitelyne eiendom in ag. As 'n uiteensetting element verskeie reëls dek, sluit die buitelyn aan die einde van die reël en heropen weer op die volgende reël. As dit moontlik is, sal die uiteensetting ook ten volle verbind word, en skep 'n nie-reghoekige vorm.
Gebruik van die buitelyne
Een van die beste gebruike van die omskrywingseiendom is om sleutelwoorde uit te lig. Baie webwerwe doen dit met 'n agtergrondkleur, maar jy kan ook die omtrek eiendom gebruik en nie bekommerd wees oor die byvoeging van ekstra spasie op jou bladsye nie.
Die omtrek-kleur eiendom aanvaar die term "invert" wat die omtrek kleur die inverse van die huidige agtergrond maak. Dit laat u toe om elemente op dinamiese webblaaie uit te lig sonder om te weet watter kleure gebruik word .
U kan ook die omtrek eiendom gebruik om die stippellyne rondom aktiewe skakels te verwyder. Hierdie artikel uit CSS-Tricks wys hoe om die stippellyne te verwyder.