CSS muhimu wa Box Sizing

CSS muhimu wa Box Sizing

CSS box-sizing matokeo inasababisha kumekuwa kwa ukingo na ubukuli wa kikundi kinaingiza padding (kifungu) na border.

Kama kunaingizwa kwa kifaa kina CSS box-sizing property

Kwa kawaida, ukingo na ubukuli wa kikundi inatolewa kama:

  • width + padding + border = ukingo wa kikundi wa uwezo
  • height + padding + border = ukingo wa kikundi wa uwezo

Kama inatumika kwa kifaa kina ukingo na ubukuli wa kikundi, kikundi kinaonekana kubwa zaidi kuliko kwa ukingo na ubukuli ulinganishwa (kwa sababu mabaki na border ya kikundi kinaingiza ukingo na ubukuli ulinganishwa).

Picha ilizopatikana inonyesha kikundi kili kwa kikundi kina ukingo na ubukuli zilizohifadhiwa:

Kikundi hiki kina ukingo mdogo
(ukingo 300px, na ubukuli 100px).
Kikundi hiki kina ukingo mkubwa
ukingo wa kikundi kinaingiza 300px, na ubukuli kinaingiza 100px).

Kikundi kili kwa kikundi kili na ukingo mbalimbali kwenye matokeo ya mwisho (kwa sababu div2 inaingiza padding):

Mfano

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Kufanya kwa kufikia

box-sizing matokeo inasaidia kusaidia kusimamia masuala hii.

Kama inatumika CSS box-sizing property

box-sizing matokeo inasababisha kumekuwa kwa ukingo na ubukuli wa kikundi kinaingiza padding na border.

Kama inaingizwa kwa kifaa kina box-sizing: border-box;kwa hivyo, ukingo na ubukuli wa kikundi kinaingiza padding na border:

Sasa kikundi kili kwa kikundi kina ukingo wa kikubaliani!
Hooray!

Mfano hii unaonekana kama huo, kikundi kili kwa kila <div> kinaingiza box-sizing: border-box;:

Mfano

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Kufanya kwa kufikia

Kwa kuwa box-sizing: border-box; 的效果如此之好，许多开发人员希望页面上的所有元素都能够以这种方式工作。

Mafano yaliyotumiwa yana hifadhiwa kwa jinsi inayofikia huzuni kwa kina wa kina wa kina wa kina. Wengine wa mashambulizi wana nguvu ya kuwaona kwamba kila kitu kwenye tovuti yana kufanya kwa jinsi hii. box-sizing: border-box;（lakini si kila mmoja - hii ni sababu kwa sababu input na textarea hupata muonekano tofauti kwa width: 100%;).

Inafaa kufanya kwa kuzingatia kila kitu:

Mfano

* {
  box-sizing: border-box;
}

Kufanya kwa kufikia

Muhimu wa CSS Box Sizing

Muhimu Muhtasari
box-sizing Kuwaambilia ukala wa kina kwa kina wa kitu: wapi ni lazima kumekuwa na upesi na upande wa kina (padding) na jengo.