CSS బాక్స్ సైజింగ్

CSS బాక్స్ సైజింగ్

CSS box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框。

假如不指定 CSS box-sizing 属性

默认情况下，元素的宽度和高度是这样计算的：

  • width + padding + border = 元素的实际宽度
  • height + padding + border = 元素的实际高度

这意味着：当您设置元素的宽度/高度时，该元素通常看起来比您设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）。

下图展示了两个有相同指定宽度和高度的

元素：

这个 div 较小
（宽度为 300px，高度为 100px）。
这个 div 更大
（宽度也为 300px，高度为 100px）。

上面的两个

元素在最终结果中呈现出不同的尺寸（因为 div2 指定了内边距）：

实例

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

స్వయంచాలకంగా ప్రయత్నించండి

box-sizing 属性解决了这个问题。

如果使用 CSS box-sizing 属性

box-sizing 属性允许我们在元素的总宽度和高度中包括内边距和边框。

如果在元素上设置了 box-sizing: border-box;అప్పుడు వెడల్పు మరియు పొడవు లోని ప్రతిపాదిత విలువలు లోని ప్రతిపాదిత విలువలు లోని ప్రతిపాదిత విలువలు ఉంటాయి:

ఇప్పుడు రెండు div లు పరిమాణంలో అదే విధంగా ఉన్నాయి!
హురే!

ఈ ఉదాహరణ ముందస్తు ఉదాహరణతో అదే విధంగా ఉంది, రెండు <div> ఎలమెంట్స్ లోనూ అమర్చబడినవి ఉన్నాయి 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;
}

స్వయంచాలకంగా ప్రయత్నించండి

ఎందుకంటే ఉపయోగించడం వల్ల box-sizing: border-box; 的效果如此之好，许多开发人员希望页面上的所有元素都能够以这种方式工作。

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

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

实例

* {
  box-sizing: border-box;
}

స్వయంచాలకంగా ప్రయత్నించండి

CSS బాక్స్ సైజింగ్ అట్రిబ్యూట్

అట్రిబ్యూట్ డిస్క్రిప్షన్
box-sizing డెఫైన్ ఇల్యూమెంట్ వైడ్‌థ్ అండ్ హెచ్చైట్ కాల్క్యులేషన్ మేథడ్: వాటికి ప్యాడింగ్ (padding) మరియు బార్డర్స్ చేర్చబడాలా?