使用CSS调整框大小 (Box sizing using CSS)
Introduction:
介绍：
Creating web pages is all about creating various elements and then put them together to bring out the beauty of the web page. That refining and styling majorly depend on various editing and formatting options, if they are not implied properly then the web page would start looking ugly and even sometimes unresponsive. The developer who understands all the minute details of designing, from adjusting the position of elements to create a beautiful background and amend JavaScript code is the one who will surely ace in making a web page.
创建网页就是创建各种元素，然后将它们放在一起以展现网页的美感。 精炼和样式主要取决于各种编辑和格式设置选项，如果未正确暗示它们，则网页将开始显得难看甚至有时无法响应。 懂得设计的所有细节的开发人员，从调整元素的位置以创建漂亮的背景，并修改JavaScript代码，都是肯定会成为网页的王牌的开发人员。
Discussion:
讨论：
So, on that note why don't we discuss something which is a very small aspect of designing a web page but equally prominent? The name of that aspect is Box Sizing in CSS.
因此，关于该注释，我们为什么不讨论设计网页的一个很小的方面却同样突出的内容？ 该方面的名称是CSS中的Box Sizing 。
We all know how to generally set the size of an element in a web page, which is very simple by adjusting the width and height of that particular element. But how do we size the box that contains that particular element? That is where Box Sizing property comes in.
我们都知道如何一般地设置网页中元素的大小，这很简单，只需调整特定元素的宽度和高度即可。 但是，我们如何确定包含该特定元素的盒子的大小呢？ 那就是Box Sizing属性出现的地方。
Definition:
定义：
Box Sizing is a very simple property to understand as it defines or adds the paddings and borders to an element's entire width and height.
Box Sizing是一个非常简单的属性，易于理解，因为它可以将填充和边框定义或添加到元素的整个宽度和高度。
Pretty simple right? But how does it help? To understand that let us look at what happens when we do not use box-sizing.
很简单吧？ 但这有什么帮助？ 要了解这一点，让我们看看不使用box-sizing时会发生什么。
Need?
需要？
When we are not using box-sizing the default value of width and height of an element is calculated like this,
当我们不使用框大小调整时 ，元素的width和height的默认值是这样计算的，
padding+height+border = actual height of that element
padding+width+border = actual width of that element
Explanation:
说明：
This means that when you tend to set the width and height of an element, the element might appear bigger than what you set and the reason for this is because the padding and border are set to element's specific width and height.
这意味着当您倾向于设置元素的宽度和高度时，该元素可能看起来比您设置的宽度更大，其原因是因为填充和边框设置为元素的特定宽度和高度。
Implementation:
实现方式：
Therefore to resolve this issue box-sizing is used, if you will include box-sizing:border-box; to your HTML or CSS, then the padding and border would be included in the width and height.
因此，要解决此问题，请使用box-sizing (如果要包括box-sizing：border-box;)。 到HTML或CSS，则宽度和高度中将包含填充和边框。
Syntax:
句法：
element {
box-sizing: border-box;
}
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 200px;
height: 150px;
border: 1px solid green;
box-sizing: border-box;
}
.div2 {
width: 200px;
height: 150px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="div1">without padding</div>
<br/>
<div class="div2">with padding</div>
</body>
</html>
Output
输出量
In the above example, we can see the difference between both the divs after and before applying the padding of 50px.
在上面的示例中，我们可以看到在应用50px的填充之后和之前的div之间的差异。
Conclusion:
结论：
This property is so brilliant that many developers and even browsers tend to add this property by default on their websites to make their elements work this way.
此属性是如此出色，以至于许多开发人员甚至浏览器都倾向于默认情况下在其网站上添加此属性，以使其元素以这种方式工作。
Therefore it would be very wise and safe to implement this property for many elements but then again not for all elements and that is the exact reason why input and text areas appear to be different their width is set to 100%!
因此，对许多元素实施此属性是非常明智和安全的，但是对于所有元素而言，这又是不可能的，这就是输入和文本区域看起来不同的确切原因，其宽度设置为100％！
翻译自: https://www.includehelp.com/code-snippets/css-box-sizing.aspx
扫一扫
1785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
