Ƙarshe vs. Aboki - Bayyana CSS Matsayi

Matsayin CSS ya fi X, Y Ƙayyadewa

CSS matsayi ya dade yana da muhimmanci ɓangare na samar da shimfidar yanar gizon. Ko da tare da sabon sababbin hanyoyin fasahar CSS kamar Flexbox da CSS Grid, matsayi har yanzu yana da muhimmin wuri a kowane jakar yanar gizo na zanen kaya.

A lokacin da kake amfani da matsayi na CSS, abu na farko da zaka buƙaci shi ne kafa ƙungiyar CSS don matsayi don gaya wa mai bincike idan kana amfani dashi cikakken ko matsayi na dangi don wani zaɓi. Kuna buƙatar fahimtar bambanci tsakanin waɗannan wurare biyu.

Duk da yake cikakke da dangi sune abubuwan mallakar CSS guda biyu da aka saba amfani dashi a cikin zane yanar gizo, akwai jihohi hudu zuwa ga dukiya:

Tsanani shine matsayi na asali ga wani abu a shafin yanar gizon. Idan ba ku ƙayyade matsayi na wani kashi ba, zai zama ma'ana. Wannan yana nufin cewa zai nuna a kan allon da ya dogara akan inda yake a cikin rubutun HTML da kuma yadda za a nuna a cikin yanayin al'ada na wannan takardun.

Idan ka yi amfani da ka'idodin matsayi kamar saman ko hagu zuwa kashi wanda yana da matsayi na matsayi, waɗannan dokoki za a ƙyale kuma kashi zai kasance a inda ya bayyana a cikin tsarin aiki na al'ada. A gaskiya, zakuyi wuya, idan har abada, buƙatar saita kashi zuwa matsayi mai mahimmanci a cikin CSS tun lokacin da ƙimar tsohuwar ta ke.

Ƙaddamarwa CSS Matsayi

Matsayi cikakke shine tabbas mafi sauki CSS don fahimta. Kuna farawa tare da wannan wuri na CSS:

matsayi: cikakke;

Wannan darajar ya gaya wa mai bincike cewa duk abin da ke faruwa a matsayi ya kamata a cire shi daga tsarin al'ada ta al'ada kuma a maimakon sanya shi a daidai wurin a shafin. An ƙididdige wannan bisa ga mafi kusa da wanda ba shi da matsayi a matsayin magabatan.

Saboda an cire wani nau'in matsayi na ainihi daga al'ada ta al'ada na takardun, ba zai shafi yadda abubuwan da ke gabansa ko bayan shi a cikin HTML suna sanyawa a shafin yanar gizon.

Alal misali - idan kana da rabuwa wanda aka sanya shi ta hanyar amfani da dangi (za mu dubi wannan darajar a jimawa), kuma a cikin wannan ƙungiya kana da sakin layi wanda kake so ka sanya 50 pixels daga saman ƙungiyar, ka zai ƙara darajar matsayi na "cikakke" zuwa wannan sakin layi tare da darajar farashin 50px a kan "saman" dukiya, kamar wannan.

matsayi: cikakke; saman: 50px;

Wannan cikakken matsayi zai nuna 50 pixels daga saman wannan sassaucin matsayi - duk abin da ke nuna a can a cikin al'ada. Kayan "matsayin" cikakke "ya yi amfani da wanda aka sanya shi a matsayi mai mahimmanci kamar yadda mahallin yake da shi da kuma ƙimar da kake amfani da ita shi ne dangi.

Abubuwan haɓaka huɗu da kake da su don amfani su ne:

Zaka iya amfani da ko dai saman ko ƙasa (tun lokacin da ba za'a iya sanya wani kashi ba bisa ga waɗannan halayen) kuma ko dai dama ko hagu.

Idan an saita kashi zuwa matsayi na cikakke, amma a can ba shi da kakanni wanda ba a matsayin matsakaicin matsayi ba, to, za a sanya shi matsayi dangane da sashin jiki, wanda shine matakin matakin mafi girma na shafin.

Matsayi mai mutunci

Mun riga mun ambata matsayi na dangi, don haka bari mu dubi wannan dukiya a yanzu.

Matsayi mai mutunci tana amfani da irin abubuwan da suke da matsayi guda huɗu a matsayinsu na matsayi, amma a maimakon maimakon saɓin matsayi a kan mafi kusa wanda ba shi da matsayi a matsayin kakanninmu, yana farawa ne daga inda za'ayi zai kasance idan har yanzu yana cikin al'ada.

Alal misali, idan kuna da layi uku a shafin yanar gizonku, kuma na uku yana da "matsayi: dangi" style da aka sanya a kanta, matsayinsa zai zama abin ƙyama bisa ga halin yanzu.

Sashin layi na 1.

Sashe na 3.

A cikin misalin da ke sama, za a sanya sakin layi na uku na 2em daga gefen hagu na gangar akwati, amma har yanzu zai kasance a kasa da sakin layi na biyu. Zai kasance a cikin tsarin al'ada na yau da kullum, kuma kawai a biya dan kadan. Idan ka canza shi zuwa matsayi: cikakke; duk wani abu da ya biyo baya zai nuna a samansa, saboda ba zai kasance a cikin al'ada ba.

Abubuwan da ke kan shafin yanar gizonku suna amfani dasu don saita matsayi na matsayi: dangi ba tare da wani farashin biya ba, wanda ke nufin cewa rabi ya kasance daidai inda zai bayyana a cikin al'ada. Anyi wannan ne kawai don kafa wannan ɓangaren a matsayin mahallin da za'a iya sanya wasu abubuwa a gaba ɗaya. Alal misali, idan kuna da rabuwa kewaye da shafin yanar gizonku tare da darajar kimar "akwati" (wanda shine labarin da ya fi dacewa a cikin zane-zane), za'a iya rarraba wannan wuri a matsayin dangi don kowane abu a ciki zai iya amfani shi a matsayin mahallin mahallin.

Menene Game da Matsayi na Gyara?

Gyara matsayi yana da yawa kamar matsayi mai kyau. An ƙididdige matsayi na kashi a cikin hanya ɗaya kamar cikakken samfurin, amma an gyara abubuwan da aka gyara a wannan wuri - kusan kamar alamar ruwa . Dukkan abubuwan da ke cikin shafin za su gungurawa da wannan ɓangaren.

Don amfani da darajar kuɗin nan, za ku saita:

matsayi: gyarawa;

Ka tuna, idan ka gyara wani kashi a wuri a kan shafinka, zai buga a wannan wuri lokacin da shafin yanar gizonka ya buga. Alal misali, idan an gyara nauyin ku a saman shafinku, zai bayyana a saman kowane shafin da aka buga - domin an gyara shi zuwa saman shafin. Zaka iya amfani da nau'in mai jarida don canza yadda shafukan da aka buga sun nuna abubuwan da aka kafa:

Gyara ta farko [h1 # farko {matsayi: gyarawa; }} Gidan da aka buga {h1 # farko {matsayi: matsayi; }}

Labari na farko daga Jennifer Krynin. Edited by Jeremy Girard on 1/7/16.