CSS កំរិតការរៀបចំ

CSS កំរិតការរៀបចំ

Lahat ng HTML na elemento ay maaring ituring na kahon. Sa CSS, kapag pinag-uusapan ang disenyo at layout, ginagamit ang termino na 'box model' o 'frame model'.

Ang model ng kahon sa CSS ay isang kahon na hugis na napapalibutan ng bawat elemento ng HTML. Ito ay kasama ang: walang hanggan, border, panladlad at tunay na nilalaman. Ang ibaba ay ipinapakita ang model ng kahon:

CSS កំរិតការរៀបចំ

Paglalarawan ng mga bahagi:

  • Nilalaman - Ang nilalaman ng kahon, kung saan ay ipinapakita ang teksto at imahe.
  • Panladlad - Alisin ang lugar sa paligid ng nilalaman. Ang panladlad ay maputi.
  • Border - Sa paligid ng panladlad at nilalaman ng kahon.
  • Walang hanggan - Alisin ang lugar sa labas ng hangganan. Ang walang hanggan ay maputi.

Ang model ng kahon ay nagbibigay-daan sa amin na magdagdag ng border sa paligid ng elemento at itakda ang espasyo sa pagitan ng mga elemento.

Ang pinakamalapit na bahagi ng kahon ng elemento ay ang tunay na nilalaman, na napapalibutan ng panladlad. Ang panladlad ay ipinapakita ng background ng elemento. Ang gilid ng panladlad ay ang border. Ang mga bagay sa labas ng border ay ang walang hanggan, na kasang-ayon sa default ay walang kulay, kaya hindi ito magpahabog sa anumang elemento na nasa likuran.

Paalala:Ang background ay inilalagay sa lugar na binubuo ng nilalaman, panladlad at border.

Ang panladlad, border at walang hanggan ay opsyonal, ang default ay nulo. Subalit, maraming elemento ay aayos ng user agent stylesheet sa panladlad at panladlad. Maaaring mapalitan ang mga browser style sa pamamagitan ng pagtatakda ng margin at padding ng elemento sa wala. Ito ay maaaring gawin maaaring maaaring, o gamitin ang universal selector upang itakda ang lahat ng elemento:

* {
  margin: 0;
  padding: 0;
}

Sa CSS, ang width at height ay tumutukoy sa lapad at taas ng pampalagay. Ang pagdagdag ng panladlad, border at walang hanggan ay hindi makakaapekto sa laki ng pampalagay, ngunit ay magdagdag sa kabuuan ng laki ng elemento.

Aasahan na ang bawat bahagi ng kahon ay may 10 pixel na panladlad at 5 pixel na panladlad. Kapag nais na ang elemento na kahon ay magiging 100 pixel, dapat na itakda ang lapad ng nilalaman sa 70 pixel, tingnan ang ibaba:

ឧទាហរណ៍ CSS កំរិតការរៀបចំ 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Paalala:Ang panladlad, border at walang hanggan ay maaaring gamitin sa lahat ng bahagi ng elemento o sa nag-iisang bahagi.

Paalala:Ang panladlad ay maaaring maging negatibo, at sa maraming kaso, kailangan ng negatibong panladlad.

halimbawa

Demo ng Model ng Kahon:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Subukan ang iyong sarili

Lapad at Taas ng Elemento

Para mapakinabangan ng tamang pagtatakda ng lapad at taas ng elemento sa lahat ng browser, dapat mong alam kung paano gumagana ang model ng kahon.

Mahalagang Babala:kapag nagtatakda ng CSS ang width at height ng elemento, kailangan lamang na itakda ang lapad at taas ng pampalagay. Upang makalkula ang kabuuan ng laki ng elemento, dapat ding idagdag ang panladlad, border at walang hanggan.

halimbawa

<div> ang kabuuan ng lapad ng elemento ay 350px:

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

Subukan ang iyong sarili

Kalkulasyon na ito:

320px (Width)
+ 20px (Left + Right inner padding)
+ 10px (Left + Right border)
+ 0px (Left + Right margin)
= 350px

Ang total na lapad ng elemento ay dapat ito ay kalkulahin:

Total width of element = Width + Left inner padding + Right inner padding + Left border + Right border + Left margin + Right margin

Ang total na taas ng elemento ay dapat ito ay kalkulahin:

Total height of element = Height + Top inner padding + Bottom inner padding + Top border + Bottom border + Top margin + Bottom margin