Siv CSS rau Xoom Tawm Koj Cov Nqi Se thiab Ciam Teb

Niaj hnub no tus web browser tau tuaj yeem ntev los ntawm cov hnub vwm twg txhua hom khaub lig-kev sib txig yog kev xav. Hnub no lub web browsers yog tag nrho cov qauv kev ua raws. Lawv ua si nicely ua ke thiab xa ib daim ntawv haum raws nraim li ntawm ntau qhov browser. Qhov no muaj xws li qhov tseeb versions ntawm Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari, thiab ntau lub browsers pom nyob rau ntawm myriad ntawm mobile li siv mus nkag tau lub vev xaib hnub no.

Thaum txoj kev kawm tau yeej tau ua thaum nws los txog rau qhov web browsers thiab lawv pom CSS li cas, muaj cov tseem inconsistencies ntawm cov kev xaiv software ntau. Ib qho ntawm cov kev tsis sib haum xeeb yog li cas cov browsers xam cov nyiaj margins, padding, thiab ciam teb los ntawm kev pheej hmoo.

Vim hais tias ntawm no tus qauv ntawm lub thawv qauv nyhuv tag nrho cov ntsiab ntawm HTML, thiab vim tias lawv yog qhov tseem ceeb hauv kev tsim cov nplooj ntawv layouts, ib qho kev piv txwv txhais tau hais tias cov nplooj ntawv yuav saib zoo hauv ib qho browser, tab sis nrhiav me ntsis ntawm lwm tus. Yuav kom tiv thaiv tau qhov teeb meem no, ntau tus kws tsim tawm lub web tsim cov qauv ntawm lub thawv. Qhov kev xyaum no tseem raug hu ua "zeroing tawm" qhov tseem ceeb rau margins, padding, thiab ciam teb.

Ib Lus Cim rau Browser Cov Neeg Tawm Tsam

Web browsers tag nrho muaj qhov chaw tso cai rau qee yam kev sib nrauj ntawm nplooj. Piv txwv li, hyperlinks yog xiav thiab kos duab hauv qab. Qhov no yog qhov sib txawv ntawm ntau qhov browsers, thiab txawm hais tias nws yog ib yam uas feem coob ntawm cov neeg tsim qauv hloov cov kev xav tau ntawm lawv qhov kev tsim, qhov tseeb tias lawv yog cov pib nrog tib lub sijhawm ua nws yooj yim los ua cov kev hloov no. Tu siab, qhov nqi pheej yig rau margins, padding, thiab ciam teb tsis zoo siab rau tib theem ntawm khaub lig-browser sib xws.

Kev Ntsuas Qib Txom Ntaus Rau Margins thiab Padding

Qhov zoo tshaj plaws los daws qhov teeb meem ntawm inconsistent lub thawv qauv yog teeb tag nrho cov margins thiab padding qhov tseem ceeb ntawm cov ntsiab HTML ntawm xoom. Muaj ob peb txoj kev uas koj yuav ua tau qhov no yog ntxiv cov cai CSS no rau koj cov kab kos:

* {margin: 0; padding: 0; }

Tsab Cai CSS no siv cov * los yog tus tsiaj ntawv cim. Tus ntawd txhais tau hais tias "tag nrho cov" thiab nws yuav cia li xaiv txhua txhua cov HTML thiab teev cov margins thiab padding rau 0. Txawm hais tias txoj cai no tsis heev, vim nws yog nyob hauv koj tus sab nraud stylesheet, nws yuav muaj ntau dua li qhov default browser qhov tseem ceeb ua. Vim tias cov nuj nqis no yog yam uas koj muaj overwriting, no ib style yuav ua kom tiav qhov koj tau teev tawm los ua.

Lwm qhov kev xaiv yog siv cov ntsiab lus no rau cov HTML thiab lub ntsiab ntawm lub cev. Vim tias tag nrho lwm cov ntsiab lus ntawm koj nplooj ntawv yuav yog cov me nyuam ntawm ob lub ntsiab, CSS cascade yuav tsum siv cov kev ntseeg no rau tag nrho lwm cov ntsiab lus.

html, lub cev {margin: 0; padding: 0; }

Qhov no yuav pib koj qhov kev tsim kho nyob rau tib qhov chaw ntawm txhua tus browsers, tab sis ib yam yuav tsum nco ntsoov tias yog thaum koj tig tag nrho cov margins thiab padding tawm, koj yuav tsum tau xyuam xim tig lawv rov qab rau qee seem ntawm koj qhov web page kom ua tau zoo thiab xav tias koj tus qauv hu ua rau.

Ciam teb

Koj yuav tsum xav "tab sis tsis muaj browsers muaj ib ncig ntawm lub cev lub cev los ntawm kev pheej hmoo". Qhov no tsis yog qhov tseeb. Cov laus versions ntawm Internet Explorer muaj ib lub pob tshab los yog pom ciam nyob ib ncig ntawm cov ntsiab lus. Tshwj tsis yog tias koj tau ciam teb rau 0, tus ciam teb tuaj yeem tu koj cov nplooj ntawv layouts. Yog tias koj tau txiav txim siab tias koj tseem yuav txhawb cov lus txuas ntxiv ntawm IE, koj yuav tsum tau hais qhov no los ntawm kev ntxiv rau cov hauv qab no rau koj lub cev thiab cov yeeb yam HTML:

HTML, lub cev {
paj: 0px;
padding: 0px;
ciam teb: 0px;
}

Zoo li ua li cas koj tua lub margins thiab padding, tus tshiab style no kuj yuav qhib tua ciam teb rau lwm tus. Koj kuj tuaj yeem ua tib yam nkaus xwb los ntawm kev siv cov tsiaj qus xaiv tau pom ua ntej hauv tsab xov xwm.

Thawj tsab xov xwm los ntawm Jennifer Krynin. Edited by Jeremy Girard rau 9/27/16.