什么是CSS中的盒尺寸的使用 [英] What is use of box sizing in CSS

问题描述

是否需要指定一个div box-sizing为border-box |内容框。

Is there any need to specify a div box-sizing as border-box | content-box.

什么是它的用途，任何一个可以帮助我。

What is use of it may any one help me.

我google了，但我没有得到。

I googled it but I didn't get it.

推荐答案

好吧，这是一个 div ，他的名字是蓝色。向蓝色问好：

Alright, here's a div, and his name is Blue. Say hello to Blue:

div.Blue {
  width: 100px;
  height: 100px;
  background-color: blue;
}

这里是他的朋友格林尼。

Here's his friend Greenny. Say hello to Greenny:

div.Greenny {
  width: 100px;
  height: 100px;
  background-color: blue;
  border: 20px solid green;
}

Greenny比Blue还宽40px，所以他决定去节食：

Greenny is 40px wider and higher than Blue, so he decided to go on a diet:

div.GreennyAfterTheDiet {
  width: 100px;
  height: 100px;
  background-color: blue;
  border: 20px solid green;
  box-sizing: border-box;
}

现在他的宽度和高度都是100像素，包括边框：

Now his width and height are exactly 100px including borders:

这很简单，你可以看到。相同的规则适用于填充。

It's pretty simple, as you can see. Same rule works for padding.

UPD ：这是一个简单的用例程序：

UPD: Here's a simple usecase:

HTML

<div>bla bla bla bla bla bla bla bla bla bla</div>
<div>bla bla bla bla bla bla bla bla bla bla</div>
<div>bla bla bla bla bla bla bla bla bla bla</div>
<div>bla bla bla bla bla bla bla bla bla bla</div>

CSS

div {
  width: 25%;
  float: left;
  background-color: #ffd862;
}

结果将如下所示：

但如果您想添加一些填充

But if you want to add some padding

看到发生了什么？现在我将添加 box-sizing：border-box; ：

See what happened? Now I'll add box-sizing: border-box;:

现在div的宽度：25％，但同时还有padding：10px。

And now divs have width:25% again, but also have padding:10px at the same time.

这篇关于什么是CSS中的盒尺寸的使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！