数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学border-box与content-box有何不同？
可以使用样式表语言CSS（层叠样式表）创建精美的网站。使用它可以使创建视觉上吸引人的网页的过程更加简单。您可以使用它来为网页应用样式。
在使用宽度或高度时，CSS盒子大小属性使我们可以选择border-box或content-box属性。CSS默认情况下将指定的宽度和高度应用于内部内容。让我们深入了解本文，学习border-box与content-box的不同之处。
CSS border-box属性
在此模式下，宽度和高度属性包括内容、内边距和边框。例如，如果我们将元素的宽度设置为10像素，则这10像素还将包含我们设置的任何边框或内边距，并且内容框将缩小以适应额外的宽度。因此，调整元素大小通常更简单。
语法
以下是CSS border-box属性的语法
box-sizing: border-box;
示例
让我们来看下面的例子，我们将使用box-sizing属性，其值设置为border-box。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 55px;
padding: 15px;
border: 1px solid #5B2C6F;
background: #D5F5E3;
color: #DE3163;
}
.tp {
box-sizing: border-box;
}
body {
font-family: verdana;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<br>
<div class="tp">WELCOME</div>
</body>
</html>
运行以上代码后，它将生成一个输出，其中包含应用了CSS和border-box大小属性的文本，显示在网页上。
CSS content-box属性
这是box-sizing属性的默认值。在此模式下，宽度和高度属性仅包含内容。边框和内边距不包含在内；例如，如果我们将元素的宽度设置为10px，则内容框的宽度将为10像素，任何边框或内边距都将添加到元素最终渲染的宽度。
语法
以下是CSS content-box属性的语法
box-sizing: content-box;
示例
以下是一个我们将使用CSS content-box大小属性的示例。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
background-color: #E8DAEF;
color: #DE3163;
border-color: #D5F5E3;
height: 100px;
width: 350px;
box-sizing: content-box;
padding: 20px;
border-width: 10px;
border-style: solid;
margin: 10px;
font-family: verdana;
}
</style>
</head>
<body>
<h1 class="tutorial">TUTORIALSPOINT</h1>
</body>
</html>
运行以上代码后，将弹出输出窗口，显示应用了content-box大小属性的文本，显示在网页上。
示例
现在，让我们考虑另一个示例，我们将观察border-box和content-box之间的区别。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 100px;
padding: 10px;
border: 3px solid #6C3483;
background: #D5F5E3;
color: #DE3163;
font-family: verdana;
display: inline-block;
}
.x {
box-sizing: content-box;
}
.y {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="x">
<h3>HII..(content-box)</h3>
</div>
<div class="y">
<h3>HI:)(borderbox)</h3>
</div>
</body>
</html>
运行以上代码后，它将生成一个输出，其中包含应用了border-box和content-box大小属性的两个div框，它们具有相同的宽度，我们可以观察它们之间的区别。
218 次浏览
