CSS Box Sizing

CSS Box Sizing

CSS box-sizing xìng shì ràng wo men zai yuan su de zong kuandu he gao du zhong bao kuai nei bian ju（chēn lin）he bian kuang。

gu zai bu zhi ding CSS box-sizing xìng shì

mo yan xing jia, yuan su de kuandu he gao du shi zhe yang jì suan de：

  • width + padding + border = yuan su de shi ji kuandu
  • height + padding + border = yuan su de shi ji gao du

zhe me zhi yi：dang ni she zhi yuan su de kuandu/gao du shi，zhe ge yuan su tong chang kan dian bi ni she zhi de geng da（yīn wei yuan su de bian kuang he nei bian ju yi jing bei tian jia dao yuan su de zhi ding kuandu/gao du zhong）。

xià tù zhong xian shi liang ge you xiang tong zhi ding kuandu he gao du de <div> yuan su：

zhe ge div jiao xiao
（kuandu wei 300px，gao du wei 100px）。
zhe ge div geng da
（kuandu ye wei 300px，gao du wei 100px）。

shang mian de liang ge <div> yuan su zai zui zhong jie guo zhong chen xian de ge bi da chong chong zhi（yīn wei div2 zhi ding le nei bian ju）：

مثال

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

آپ خود سنجیدے

box-sizing xìng shì zhi jie zhè ge wén ti。

ru guo shi yong CSS box-sizing xìng shì

box-sizing xìng shì ràng wo men zai yuan su de zong kuandu he gao du zhong bao kuai nei bian ju he bian kuang。

ru guo zai yuan su shang she zhi box-sizing: border-box;，zhe me kuandu he gao du hui bao kuai nei bian ju he bian kuang：

xian zai liang ge div de da xiao xiang tong!
Hooray!

zai zhe ge li yu shang li ge xiang tong, liang ge <div> yuan su dou she zhi box-sizing: border-box;：

مثال

.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;
}

آپ خود سنجیدے

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

下面的代码能够确保以这种更直观的方式调整所有元素的大小。许多浏览器已经在对许多表单元素使用 box-sizing: border-box;（但并非全部 - 这就是为什么 input 和 textarea 在 width: 100%; 时看起来不同）。

将其应用于所有元素是安全且明智的：

مثال

* {
  box-sizing: border-box;
}

آپ خود سنجیدے

CSS Box Sizing کی خاصیت

کی خاصیت وصف
box-sizing عنصر کی چوڑائی اور اونچائی کا حساب کس طرح کیا جانا چاہیے: وہ ان کی داخلی باگاں (padding) اور کیرنل (border) کو شامل کرنا چاہیے یا نہیں。