資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究min-content 和 max-content 是如何工作的？
在 CSS 中，我們使用長度、百分比和關鍵字值來定義元素的大小。對於希望自由有效地呈現網頁內容的開發人員來說，CSS 大小調整屬性是必要的。您可以使用它來應用網站樣式。更重要的是，您可以這樣做而不必考慮每個網頁使用的 HTML 程式碼。
有時我們會使用 fit-content、min-content 和 max-content 關鍵字值型別。讓我們進入文章，瞭解 min-content 和 max-content 的工作原理。
CSS min-content
關鍵字“min-content 大小調整”表示內容固有的最小寬度。這意味著內容將利用所有軟換行機會縮小到最長單詞的大小。
語法
以下是 CSS min-content 的語法
<style>
{
width: min-content;
}
</style>
示例
讓我們看下面的例子，我們將使用 min-content 並觀察輸出。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
width: min-content;
border: 2px solid #DE3163;
}
body {
background-color: #D5F5E3;
font-family: verdana;
}
</style>
</head>
<body>
<center>
<div class="tutorial">
<img src="https://tutorialspoint.tw/cg/images/logo.png" alt="LOGO" />
<h1>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</h1>
</div>
</center>
</body>
</html>
當我們執行以上程式碼時，它將生成一個包含影像以及文字的輸出，這些文字顯示為網頁上顯示的框中的收縮，因為我們已使用 min-content 提到了它。
CSS max-content
短語 max-content 大小調整隱式地表示內容的最大寬度或高度。這表示文字內容永遠不會換行，即使這會導致溢位。
語法
以下是 CSS max-content 的語法
<style>
{
width: max-content;
}
</style>
示例
以下是如何在網頁上實現 max-content 的示例。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
width: max-content;
border: 2px solid #196F3D;
}
body {
background-color: #D6EAF8;
font-family: verdana;
}
</style>
</head>
<body>
<center>
<div class="tutorial">
<img src="https://tutorialspoint.tw/cg/images/logo.png" alt="LOGO" />
<h1>Tutorials Point originated from the idea that there exists a class of readers who respond better to online.</h1>
</div>
</center>
</body>
</html>
執行以上程式碼後，輸出視窗將彈出，顯示影像以及在網頁上沒有任何換行的文字。
更新於: 2024年1月19日
63 次瀏覽
廣告