កណ្តាល: ជា CSS-ប្លង់

នៅពេលដែលប្លង់នៃទំព័រនេះគឺជាញឹកញាប់ចាំបាច់ដើម្បីធ្វើជា CSS-វិធីផ្តោ: ឧទាហរណ៍ដើម្បីដាក់ឯកតាសំខាន់។ មានដំណោះស្រាយជាច្រើនដើម្បីបញ្ហានេះគ្នាដែលឆាប់ឬក្រោយនឹងត្រូវប្រើ coder ណាមួយ។

តម្រឹមអត្ថបទទៅដាក់

ជាញឹកញាប់សម្រាប់គោលបំណងតុបតែងអ្នកចង់កំណត់អត្ថបទនេះផ្តោ, CSS ក្នុងករណីនេះ, ដើម្បីកាត់បន្ថយពេលវេលានៃការដាក់នេះ។ កាលពីមុននេះត្រូវបានធ្វើដោយប្រើ HTML-គុណលក្ខណៈ, ប៉ុន្តែឥឡូវនេះស្តង់ដាដែលបានទាមទារដើម្បីតម្រឹមអត្ថបទជាមួយសន្លឹករចនាប័ទ្មនេះ។ ផ្ទុយទៅប្លុកដែលអ្នកចង់ផ្លាស់ប្តូរចន្លោះខាងក្រៅក្នុងការតម្រឹមជា CSS របស់អត្ថបទនៅក្នុងពាក់កណ្តាលត្រូវបានធ្វើឡើងដោយមានបន្ទាត់តែមួយនៅក្នុង:

• តម្រឹមអត្ថបទ: កណ្តាល;

អចលនទ្រព្យនេះត្រូវបានទទួលឥទ្ធិពលនិងការឆ្លងពីឪពុកម្តាយទៅកូនចៅទាំងអស់។ វាប៉ះពាល់ដល់មិនត្រឹមតែអត្ថបទប៉ុន្តែផងដែរដើម្បីឱ្យធាតុផ្សេងទៀត។ ចំពោះគោលបំណងនេះពួកគេគួរតែត្រូវជាអក្សរតូច (ឧរយៈពេល) ឬជួរដេកប្លុក (ប្លុកណាមួយដែលបញ្ជាក់ទ្រព្យសម្បត្តិបង្ហាញ: ប្លុក) ។ ជម្រើសចុងក្រោយផងដែរអនុញ្ញាតឱ្យអ្នកផ្លាស់ប្ដូរទទឹងនិងកម្ពស់របស់ធាតុដែលបានកំណត់រចនាសម្ព័ន្ធដែលអាចបត់បែនបានកាន់តែច្រើននៃការចូលបន្ទាត់។

ទំព័រជាញឹកញាប់តម្រឹមគុណលក្ខណៈដើម្បីឱ្យខ្លួនគាត់ស្លាក។ នេះភ្លាមធ្វើកូដមិនត្រឹមត្រូវ, ចាប់តាំងពីការទទួលស្គាល់គុណលក្ខណៈតម្រឹម W3C ដែលលែងប្រើ។ ប្រើវានៅលើទំព័រមួយនេះមិនត្រូវបានផ្ដល់អនុសាសន៍។

ប្លុកកណ្តាល

ប្រសិនបើអ្នកចង់កំណត់ការតម្រឹមនៃ div ក្នុងកណ្តាល, CSS អាចផ្តល់នូវការពិតមួយវិធីមានផាសុខភាព: ការប្រើប្រាស់រឹមចន្លោះខាងក្រៅ។ ចន្លោះអាចត្រូវបានបញ្ជាក់ថាជាធាតុប្លុក, និងបន្ទាត់ប្លុក។ តម្លៃ Svoysva គួរមាន 0 (ចន្លោះបញ្ឈរ) និងការដោយស្វ័យប្រវត្តិ (ការចូលបន្ទាត់ដោយស្វ័យប្រវត្តិផ្ដេក):

• រឹម: 0 ដោយស្វ័យប្រវត្តិ;

ឥឡូវនេះជម្រើសនេះត្រូវបានទទួលស្គាល់ថាជាការត្រឹមត្រូវពិត។ ដោយប្រើចន្លោះខាងក្រៅផងដែរអនុញ្ញាតឱ្យអ្នកកំណត់ការតម្រឹមនៃមជ្ឈមណ្ឌលនេះ;: លក្ខណៈសម្បត្តិជា CSS-រឹមអនុញ្ញាតឱ្យពួកយើងដើម្បីដោះស្រាយបញ្ហាជាច្រើនដែលជាប់ទាក់ទងជាមួយធាតុទីតាំងនៅលើទំព័រនេះ។

តម្រឹមគែមខាងឆ្វេងនៃឬខាងស្ដាំនៃប្លុកនេះ

ពេលខ្លះជា CSS-វិធីដែលមិនតម្រូវឱ្យមានការតម្រឹមនៃកណ្តាលនោះទេប៉ុន្តែវាគឺជាការចាំបាច់ដើម្បីដាក់ប្លុកក្រោយពីរនាក់គឺម្នាក់មកពីផ្នែកខាងឆ្វេងនិងផ្សេងទៀត - ពីខាងស្ដាំ។ សម្រាប់ការនេះគឺមានទ្រព្យសម្បត្តិទសភាគដែលអាចទទួលយកផ្នែកមួយនៃគុណតម្លៃទាំងបី: ឆ្វេង, ខាងស្ដាំឬគ្មាន។ ចូរនិយាយថាអ្នកមានប្លុកចំនួនពីរដែលគួរតែត្រូវបានដាក់នៅចំហៀងម្ខាង។ បន្ទាប់មកកូដនេះគឺមានដូចខាងក្រោម:

• ឆ្វេង {ទសភាគ: ចាកចេញ;}
• ស្តាំ {ទសភាគ: សិទ្ធិ}

ប្រសិនបើមានគឺជាប្លុកទីបីដែលត្រូវបានទីតាំងស្ថិតនៅក្រោមប្លុកទាំងពីរជាលើកដំបូង (ឧ, បាតកថា), បន្ទាប់មកវាគឺជាការចាំបាច់ដើម្បីចុះឈ្មោះលក្ខណៈពិសេសយ៉ាងច្បាស់:

• ឆ្វេង {ទសភាគ: ចាកចេញ;}
• ស្តាំ {ទសភាគ: សិទ្ធិ}
• បាតកថា {ច្បាស់ណាស់: ទាំងពីរ}

ការពិតដែលថាប្លុកនេះជាមួយនឹងថ្នាក់នៃការធ្លាក់ឆ្វេងនិងស្ដាំចេញពីលំហូរសរុបនោះគឺជាធាតុផ្សេងទៀតទាំងអស់មិនអើពើខ្លាំងណាស់អត្ថិភាពនៃធាតុតម្រឹម។ អចលនទ្រព្យច្បាស់លាស់: ទាំងពីរនេះអនុញ្ញាតឱ្យបាតកថាឬអ្នកអាចមើលឃើញប្លុកណាមួយផ្សេងទៀតពីកោសិកាលំហូរ precipitated និងហាមឃាត់រុំ (float) លើទាំងខាងឆ្វេងនិងខាងស្ដាំ។ ដូច្នេះក្នុងឧទាហរណ៍របស់យើងបាតកថាត្រូវបានផ្លាស់ទីលំនៅធ្លាក់ចុះ។

តម្រឹមបញ្ឈរ

មានករណីដែលជាកន្លែងដែលមិនគ្រប់គ្រាន់ដើម្បីកំណត់ការតម្រឹមនៃកណ្តាលនៃ CSS បានវិធីនេះគឺអ្នកត្រូវតែផ្លាស់ប្តូរទីតាំងបញ្ឈរនៃប្លុកកុមារ។ រាល់ការធាតុបន្ទាត់ឬជួរដេកប្លុកអាចត្រូវបានចុចប្រឆាំងនឹងគែមខាងលើឬខាងក្រោមដែលមានទីតាំងនៅពាក់កណ្តាលនៃធាតុឪពុកម្តាយឬមាននៅក្នុងទីតាំងដែលបំពានមួយ។ ភាគច្រើនជាញឹកញាប់តម្រូវឱ្យតម្រឹមកណ្តាលនៃប្លុកនេះ, វាប្រើគុណលក្ខណៈតម្រឹមបញ្ឈរ-។ ឧបមាថាមានប្លុកចំនួនពីរមួយដាក់រួមគ្នានៅក្នុងផ្សេងទៀត។ នៅក្នុងអង្គភាពក្នុងផ្ទះនេះ - ធាតុជួរប្លុក (បង្ហាញ: ក្នុងតួប្លុក) ។ វាគឺជាការចាំបាច់ដើម្បីតម្រឹមបញ្ឈរកូនប្លុក:

• ការតម្រឹមនៃព្រំដែនខាងលើនេះ - កុមារ {បញ្ឈរ-align: កំពូល};
• កណ្តាល - កុមារ {បញ្ឈរ-align: ពាក់កណ្តាល};
• តម្រឹមគែមបាតនៃការ - កុមារ {បញ្ឈរ-align: បាត};

នៅឯធាតុតម្រឹមអត្ថបទប្លុកអូឌីយ៉ូឬបញ្ឈរ-តម្រឹមមិនត្រូវបានអនុវត្ត។

បញ្ហាដែលអាចធ្វើបានជាមួយនឹងគ្រឿងតម្រឹម

ពេលខ្លះ div តម្រឹមកណ្តាលនៃការជា CSS វិធីនេះអាចបង្កឱ្យមានបញ្ហាតិចតួច។ ឧទាហរណ៍នៅពេលដែលប្រើទសភាគ: ជាដំបូង, ទីពីរនិងទីបី: ឧទាហរណ៍មានបីប្លុកមាន។ ប្លុកទីពីរនិងទីបីកុហកនៅក្នុងការលើកដំបូង។ ធាតុជាមួយថ្នាក់មួយបានតម្រឹមឆ្វេងទីពីរ, និងប្លុកចុងក្រោយនេះ - នៅខាងស្ដាំ។ បន្ទាប់ពីការធ្លាក់ចុះចំនួនពីរសម្របពីស្ទ្រីម។ ប្រសិនបើមានធាតុមេមិនត្រូវបានកំណត់កម្ពស់ (ឧ 30em) វានឹងបញ្ឈប់ការលើកកម្ពស់នៃគ្រឿងក្រុមហ៊ុនបុត្រសម្ព័ន្ធ។ ដើម្បីជៀសវាងកំហុសនេះប្រើ "ឧបករណ៍ spacer" - អង្គភាពពិសេសដែលមើលឃើញពីការលើកទីពីរនិងទីបី។ ជា CSS កូដ:

• ទីពីរ {អណ្តែត: ខាងឆ្វេង}
• ទីបី {ទសភាគ: សិទ្ធិ}
• .clearfix {កម្ពស់: 0; ច្បាស់ណាស់: ទាំងពីរ;}

ការព៍ pseudo បានប្រើជាញឹកញាប់: បន្ទាប់ពីការដែលអនុញ្ញាតឱ្យវិលត្រឡប់មកវិញចូលទៅក្នុងកន្លែងដែលបានប្លុកដោយបង្កើត psevdorasporki (ក្នុងឧទាហរណ៍នៅក្នុងថ្នាក់ជាមួយ div ស្ថិតនៅក្នុងធុងនោះហើយមានមួយដែលជាលើកដំបូងនិងស្តាំឆ្វេង):

• ឆ្វេង {ទសភាគ: ឆ្វេង}
• ស្តាំ {ទសភាគ: សិទ្ធិ}
• .container: បន្ទាប់ {មាតិកា: ''; បង្ហាញ: តារាង; ច្បាស់ណាស់: ទាំងពីរ;}

ជម្រើសខាងលើ - ទូទៅបំផុត, បើទោះបីជាមានភាពខុសគ្នាមួយចំនួន។ អ្នកតែងតែអាចរកឃើញវិធីដែលស្រួលបំផុតនិងងាយស្រួលបំផុតដើម្បីបង្កើត psevdorasporki ដោយពិសោធន៍។

បញ្ហាមួយទៀតជាញឹកញាប់ជួបប្រទះប្លង់ - ការតម្រឹមនៃធាតុបន្ទាត់ប្លុក។ បន្ទាប់ពីបានគ្នានៃពួកគេមានទំហំត្រូវបានបន្ថែមដោយស្វ័យប្រវត្តិ។ ដោះស្រាយវាអាចជួយអចលនទ្រព្យរឹមដែលត្រូវបានកំណត់ដោយការចូលបន្ទាត់អវិជ្ជមាន។ មានវិធីផ្សេងទៀត, ដែលត្រូវបានប្រើជាញឹកញាប់តិច, ឧទាហរណ៍, កំណត់ឡើងវិញគឺជា ទំហំពុម្ពអក្សរ។ ក្នុងករណីនេះលក្ខណៈសម្បត្តិនៃធាតុមេដែលបានចុះឈ្មោះពុម្ពអក្សរទំហំ: 0 ។ ប្រសិនបើមានទីតាំងស្ថិតនៅក្នុងប្លុកនៃអត្ថបទលក្ខណៈសម្បត្តិនៃធាតុបន្ទាត់ប្លុកនេះបានវិលត្រឡប់ទៅទំហំពុម្ពអក្សរដែលចង់បាន។ ឧទាហរណ៍ពុម្ពអក្សរទំហំ: 1em ។ វិធីសាស្រ្តនេះគឺមិនតែងតែងាយស្រួលដូច្នេះវាត្រូវបានគេប្រើជាច្រើនទៀតជាទូទៅកំណែជាមួយរឹមខាងក្រៅ។

aligning ប្លុកអនុញ្ញាតឱ្យអ្នកបង្កើតទំព័រដែលស្រស់ស្អាតនិងមានមុខងារ: ប្លង់ទូទៅនិងប្លង់និងទីតាំងនៃទំនិញនៅក្នុងហាងនោះហើយនៅលើគេហទំព័រនៃរូបថតតូចមួយ។