DIV+CSS نىڭ قوللاش مەسىلىرىنى ھەل قىلىش

KeySarjan

    بىلىك مۇنبىردىكى Qaynam نىڭ يازمىسى:

CSS نىڭ ھەر قايسى تور كۆرگۈچلەرنى قوللاش مەسىلىسى ھەر قايسى تور بەت ياسىغۇچىلاغا نىسبەتەن ھەقىقەتەنمۇ باش قاتۇرىدىغان مەسىلە بولۇپ قالدى، تۆۋەندە قولۇمدىكى  CSS نىڭ ھەر قايسى تور كۆرگۈچلەرگە قارىتا قوللاشتىكى پەرقلەرنى ئەپچىللىك بىلەن ھەل قىلىش ھەققىدىكى بىر ماتېرىيالنى رەتلەپ، تەرجىمە قىلىپ قوياي دەپ ئويلىدىم.  يېڭى ئۈگەنگۈچىلەرگە چوڭ پايدىسى بولىدۇ سەپ قارايمەن. مەزمۇن سەل جىق بولغاچ بۆلۈپ يوللىنىلىدۇ.

1. div نى تىك ھالەتتە ئوتتۇرغا توغۇرلاش (垂直居中) مەسىلىسى
مەسىلە: div نىڭ ئارىسىغا خەت قستۇرغاندىن كېيىن vertical-align:middle ھالەتكە توغۇرلىساق، IE6 دە ھىچقانداق ئىنكاس بولمايدۇ، بۇ ۋاقىتتا IE6 بوغۇزلىۋەتكىمىز كېلىدۇ.
بۇنىڭ ئامالى: قۇر ئېگىزلىكىنى div نىڭ ئېگىزلىكى بىلەن ئوخشاش بېكىتكەندىن كېيىن، ئاندىن vertical-align:middle قىلساق، بۇ مەسىلە ھەل بولىدۇ. مەسىلەن: div نىڭ ئېگىزلىكى 100PX بولسا، شۇ قۇرغا line-height:200px نى بېرىۋېتىپ ئاندىن vertical-align:middle نى بەرسەك بولىدۇ.

2. margin نىڭ ھەسىسىلىنپ كېتىش مەسىلىسى
مەسىلە: float خاسلىقى بەرگەن div غا ie دا margin بېرىلسە، ھەسىسىلىنىپ كېتىدۇ.
ئامال: بۇ div غا display:inline خاسلىقىنى بېرىۋەتسەك مەسىلە تامام.
بۇ يەردە inline بىلەن block ھەققىدە چۈشەندۈرۈش بېرىپ ئۆتۈپ كەتسەك ئارتۇقلۇق قىلماس، block نىڭ ئالاھىدىلىكى بولسا، ھەمىشە يېڭى قۇردىن باشلىنىدۇ.  ئېگىزلىكى، كەڭلىكى، ئىلمىنىتلار بىلەن ئارلىقى قاتارلىقلارنى تولۇق كونترول قىلغىلى بولىدۇ. inline نىڭ ئالاھىدىلىكى بولسا، باشقا ئىلمىنىتلار بىلەن ئوخشاش بىر قۇردا كۆرۈنىدۇ. ئېگىزلىك، كەڭلىكىرىنى خالىغانچە كونترول قىلغىلى بولمايدۇ.

3. div نىڭ ئېگىزلىكىنى 10px دىن كىچىك قىلغىلى بولماسلىق
مەسىلە: بىر div نىڭ ئارقا كۆرنۈشىگە 3px ئېگىزلىكتىكى بىر سۈرەتنى بەرمەكچى بولساق، div نىڭ ئېگىزلىكىنى 3px قىلىپ بېكىتسەكمۇ، IE6 دە كۆرگەن ۋاقتىمىزدە شۇ سۈرەتنى ئاستىغا تەكرارلاپ، div نىڭ ئېگىزلىكى 10px ھالەتتە تۇرغانلىقىنى بايقايمىز.
ئامال: ئارقا كۆرۈنۈشنى بەرگەندىن كېيىنلا no-repeat نى قوشۇپ قويساق، تەكرارلىمايدۇ. ئېگىزلىك مەسىلىسى، IE6 دە div دىكى خەت چوڭلۇقىنىڭ كۆڭۈلدىكى قىممىتى 10px قىلىپ بېكىتىلگەن، شۇڭلاشقا، خەت يېزىلمىسىمۇ، 10px  ئارلىق تاشلاپ قويۇلىدۇ. شۇڭا font-size:0px  دەپ قىممەت بېرىۋەتسەك بۇ مەسىلىمۇ تەلتۆكۈس ھەل بولىدۇ.

4. رەسىملەر ئارىسىدا بوش ئارلىق قېلىش
مەسىلە:  img دىن بىر قانچىنى تەكرار تىزغاندا، رەسىملەر ئارا ئازراق ئارلىق قالىدۇ.
ئامال: شۇ رەسىمگە display:inline-block خاسلىىقىنى بەرسەك بۇ مەسىلە تامام.

5. ئېگىزلىكىنى %100 قىلغاندا ئۈنۈمى بولماسلىق
مەسىلە: بىر div نىڭ ئېگىزلىكىنى %100 قىلىپ بېكىتتۇق، لېكىن يەنىلە ھىېچقانداق ئېگىزلىك قوشۇلغاندەك ئەمەس.
ئامال: بۇ يەردىكى %100 نىسبى قىممەت بولۇپ، ئۆزىدىن سىرىتقى بۆلەككە قارتا بولىدۇ، % قىممىتىنى ئىشلىتىش ئۈچۈن ئۆزىنىڭ سىرىتقى قەۋىتىدە چوقۇم، ئېنىق قىممەتتىكى ئېگىزلىك بولىشى شەرت. بۇ دىگەنلىك سىرىتقى بۆلەك ئېگىزلىكىنىڭ مانچە % بويىچە كۆرسىتىمەن دېگەننى بىلدۈرىدۇ.

........     داۋاملىق يوللىنىدۇ