資料結構
網路
關係資料庫管理系統 (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 次瀏覽
