Vandag se webblaaier het ver van die gekke dae gekom waar enige soort kruisblaaier-konsekwentheid wensdink was. Vandag se webblaaiers is almal baie standaard-voldoen. Hulle speel mooi saam en lewer 'n redelik konsekwente bladsy vertoon oor die verskillende blaaiers. Dit sluit in die nuutste weergawes van Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari en die verskillende blaaiers wat op die talle mobiele toestelle gevind word wat gebruik word om vandag toegang tot die webwerf te kry.
Alhoewel vooruitgang gemaak is ten opsigte van webblaaiers en hoe hulle CSS vertoon, is daar steeds teenstrydighede tussen hierdie verskillende sagteware-opsies. Een van die algemene teenstrydighede is hoe hierdie blaaiers standaard marges, invloede en grense bereken.
As gevolg van hierdie aspekte van die vakmodel-effek is alle HTML-elemente, en omdat dit noodsaaklik is om bladuitlegte te skep, beteken 'n inkonsekwente vertoning dat 'n bladsy in een blaaier kan lyk, maar effens in 'n ander kyk. Om hierdie probleem te bestry, normaliseer baie webontwerpers hierdie aspekte van die boksmodel. Hierdie praktyk staan ook bekend as die "waardes" van die waardes vir marges, opvulling en grense.
'N Nota oor blaaierstandaarde
Webblaaiers het almal verstekinstellings vir sekere vertoningsaspekte van 'n bladsy. Byvoorbeeld, hiperskakels is blou en onderstreep as verstek. Dit is konsekwent oor verskillende blaaiers, en hoewel dit die meeste ontwerpers verander wat ooreenstem met die ontwerpbehoeftes van hul spesifieke projek, is dit makliker om hierdie veranderinge aan te bring. Die feit dat hulle almal met dieselfde standaard begin. Ongelukkig geniet die verstekwaarde vir marges, opvulling en grense nie dieselfde vlak van kruisblaaier-konsekwentheid nie.
Normalisering van waardes vir marges en opvulling
Die beste manier om die probleem van inkonsekwente boksmodel op te los, is om al die marges en invoegwaardes van HTML-elemente op nul te stel. Daar is 'n paar maniere waarop jy dit kan doen, om hierdie CSS-reël by jou style te voeg:
* (marge: 0; vulling: 0; }Hierdie CSS reël gebruik die * of wildcard karakter. Dit karakter beteken "alle elemente" en dit sal basies elke HTML-element kies en die marges en padding tot 0 stel. Alhoewel hierdie reël baie onspesifiek is, omdat dit in u eksterne styleblad is, sal dit 'n hoër spesifisiteit hê as die standaard blaaier waardes doen. Aangesien die standaard is wat jy oorskryf, sal hierdie een styl bereik wat jy wil doen.
Nog 'n opsie is om hierdie waardes toe te pas op die HTML- en liggaamselemente. Omdat al die ander elemente op u bladsy kinders van hierdie twee elemente sal wees, moet die CSS-kaskade hierdie waardes toepas op al die ander elemente.
html, body {marge: 0; vulling: 0; }Dit sal jou ontwerp op dieselfde plek op alle blaaiers begin, maar een ding om te onthou, is dat jy eers al die marges en vulling moet draai. Jy moet hulle selektief weer aanpas vir spesifieke dele van jou webblad om die voorkoms te bereik. en voel wat jou ontwerp vra.
Grense
Jy mag dalk dink, "maar geen blaaiers het standaard 'n grens rondom die liggaamselement nie. Dit is nie streng waar nie. Ouer weergawes van Internet Explorer het 'n deursigtige of onsigbare grens rondom elemente. Tensy jy die grens op 0 gestel het, kan daardie grens jou bladsy-uitlegte oplaai. As jy besluit het om hierdie ouer weergawes van IE te ondersteun, moet jy dit aanspreek deur die volgende by jou liggaam en HTML-style by te voeg:
HTML, liggaam {
marge: 0px;
vulling: 0px;
grens: 0px;
}
Soortgelyk aan hoe jy die marges en opvulling afgeskakel het, sal hierdie nuwe styl ook die standaard grense afskakel. Jy kan ook dieselfde ding doen deur die wildcard selector wat vroeër in die artikel getoon is, te gebruik.
Oorspronklike artikel deur Jennifer Krynin. Geredigeer deur Jeremy Girard op 9/27/16.