white-space：用于控制元素內(nèi)部
inline|inline-block| 文本空白字符（例如空格淤齐、制表符和換行符）的處理方式。
自動(dòng)換行：text-wrap: nowrap | wrap
空白字符：空格咙咽、Tab腰湾、換行等
該屬性取值主要有：
pre: 文本空白換行會(huì)被保留抵卫， 按照換行符換行掠手，不會(huì)自動(dòng)換行（text-wrap:nowrap）；
nowrap: 文本空白會(huì)合并伐脖， 換行符不換行热幔， 不會(huì)自動(dòng)換行；
pre-wrap：文本空白換行會(huì)被保留 按照換行符換行讼庇，會(huì)自動(dòng)換行（text-wrap:wrap）绎巨；overflow：用于控制元素內(nèi)容溢出時(shí)的處理方式，無(wú)論子元素是否是絕對(duì)定位
overflow都能控制內(nèi)容溢出時(shí)的表現(xiàn)蠕啄。
該屬性取值主要有：
visible: 內(nèi)容溢出容器時(shí)可見(jiàn)场勤；
hidden: 內(nèi)容溢出容器時(shí)被裁剪，隱藏歼跟；
auto: 內(nèi)容溢出容器時(shí)和媳，添加滾動(dòng)條以允許用戶滾動(dòng)查看溢出內(nèi)容。
當(dāng)overflow:auto且子元素超過(guò)父元素高度時(shí)嘹承，父元素滾動(dòng)窗价，子元素會(huì)相應(yīng)的滾動(dòng)，即便子元素是絕對(duì)定位也會(huì)跟著一起滾動(dòng)叹卷。如果想子元素固定在父元素底部且不隨父元素滾動(dòng)撼港∑核可以將子元素移出父元素，放到其它位置帝牡，以便不受父元素滾動(dòng)的影響往毡。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
position: relative;
}
#root {
height: 200px;
background: #333;
overflow: visible;
}
.btn {
height: 400px;
background: #999;
margin: 0 24px;
}
.abs {
position: absolute;
bottom: 0;
left: 24px;
right: 24px;
height: 24px;
background: #ccc;
}
</style>
</head>
<body>
<div class="container">
<div id="root">
<div class="btn">btn</div>
</div>
<div class="abs">abs</div>
</div>
</body>
</html>
scrollHeight: 等于該元素在不使用滾動(dòng)條的情況下為了適應(yīng)視口中所用內(nèi)容所需的最小高度。包括元素的 padding靶溜，但不包括元素的 border 和 margin开瞭。
滾動(dòng)到底部：element.scrollTo({ top: root.scrollHeight, behavior: "smooth" });
父元素空間不足時(shí)，table 會(huì)默認(rèn)收縮以適應(yīng)父元素罩息，但收縮至最小時(shí)仍會(huì)溢出嗤详。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Table Overflow Example</title>
<style>
.parent-container {
width: 500px;
overflow: auto;
border: 1px solid #ccc;
}
table {
border-collapse: collapse;
}
th,
td {
padding: 8px;
text-align: left;
border: 1px solid #dddddd;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div class="parent-container">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>25</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
塊級(jí)元素，當(dāng)沒(méi)有設(shè)置寬度時(shí)瓷炮，寬度由父元素確定葱色；行內(nèi)塊元素，當(dāng)沒(méi)有設(shè)置寬度時(shí)娘香，寬度可以無(wú)限寬苍狰。
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
padding: 10px;
overflow: hidden;
background: #666;
}
.c {
display: inline-block;
background: #999;
}
</style>
</head>
<body>
<div class="container">
<div class="c">1111111111112222222222333333333</div>
</div>
</body>
- box-sizing:用于確定元素總寬度和高度的計(jì)算方式。
該屬性取值主要有：
border-box:寬度和高度屬性包括內(nèi)容烘绽、padding淋昭、border；
content-box:這是默認(rèn)值安接，寬度和高度屬性僅包括內(nèi)容區(qū)域翔忽。 - float: 主要用于圖文混排，文字會(huì)圍繞圖片赫段。float 屬性指定的元素在容器的左側(cè)或右側(cè)放置呀打，元素從文檔流中移除，但仍保持部分流動(dòng)性糯笙。
<div>
<img src="./public/logo192.png" style="float: right; height: 20px;" />this
is text... this is text... this is text...this is text...
</div>
- display:'inline': 內(nèi)聯(lián)元素的子元素是塊級(jí)元素贬丛，子元素的寬如果是百分比，則是基于非內(nèi)聯(lián)的祖先元素計(jì)算给涕。
<style>
.c {
width: 200px;
}
.s2 {
display: inline-block;
width: 100%;
background: #000;
}
</style>
<div class="c">
<span class="s1">
<span class="s2">123</span>
</span>
</div>
<!-- s2 基于c計(jì)算寬帶-->
- 邏輯屬性：
margin-inline-end等同于margin-right豺憔，表示行內(nèi)塊結(jié)束端外邊距。
典型場(chǎng)景
- 元素不足以容納文本時(shí)截?cái)辔谋静@示省略號(hào)
<div className="truncate-text">
不加樣式自動(dòng)換行不加樣式自動(dòng)換行Linedddddddddddddddddddddddddddused
</div>
.truncate-text {
white-space: nowrap; /* 防止文本換行 */
overflow: hidden; /* 隱藏溢出的部分 */
text-overflow: ellipsis; /* 使用省略號(hào)來(lái)表示截?cái)?*/
width: 100px; /* 設(shè)置元素寬度够庙，當(dāng)文本溢出時(shí)會(huì)被截?cái)?*/
}
- antd 中的 Select 組件使用 flex布局會(huì)撐大空間恭应。
flex布局中使用flex屬性指定子元素的相對(duì)尺寸，當(dāng)空間不足時(shí)會(huì)溢出耘眨，如果指定width屬性即使空間不足也不會(huì)溢出昼榛。
<div style={{display:'flex',width:400}}>
<div style={{width:100,flexShrink:0}}> fdafa</div>
<div style={{ display: "inline-block", flex: 1,marginLeft:20,width:10 }}>
<div style={{ display: "flex" }}>
<span
style={{
display: "inline-block",
overflow: "hidden",
"white-space": "nowrap",
"text-overflow": "ellipsis",
flex: 1,
}}
>
flex布局中使用flex屬性指定子元素的相對(duì)尺寸，當(dāng)空間不足時(shí)會(huì)溢出剔难，如果指定width屬性即使空間不足也不會(huì)溢出胆屿。
</span>
</div>
</div>
</div>
- float屬性的元素奥喻，可能會(huì)影響其他元素的寬度。
<div>
<div style="background-color: red;">
<button>btn</button>
<button style="float: right; height: 40;">btn2</button>
</div>
<div>
<div style="display: flex; flex-direction: column;background: green;">
123
</div>
</div>
</div>
<!-- element 寬度受 float 元素影響 -->
- 圖片充滿容器非迹，高不裁剪环鲤，左側(cè)不裁剪
// 圖片設(shè)計(jì)：寬高比要大些，即寬要長(zhǎng)些
<div style={{ height: '100vh', overflow: 'hidden' }}>
<img src={bg} style={{ objectFit: 'cover', objectPosition: 'left top' }} />
</div>
// 計(jì)算過(guò)程：`objectFit: 'cover' ` 保持寬高比且只會(huì)裁剪高或?qū)捲魇蓿绻麍D片的寬高比大于容器的寬高比則高度不會(huì)裁剪冷离，會(huì)基于 objectPosition 裁剪寬度
- table
沒(méi)有指定table width時(shí)，如果父元素足夠大table以自然舒展的方式展示纯命；
沒(méi)有指定table width時(shí)西剥，如果父元素小于table width，table先壓縮自身扎附，如無(wú)法繼續(xù)壓縮則寬度超出父元素寬度蔫耽；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
width: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Harry Depp</td>
<td>28</td>
<td>Britain</td>
</tr>
<tr>
<td>John Smith</td>
<td>35</td>
<td>USA</td>
</tr>
<tr>
<td>Ram Krishna</td>
<td>19</td>
<td>Nepal</td>
</tr>
</table>
</div>
</body>
</html>
設(shè)置table width在某些場(chǎng)景下是無(wú)效的，當(dāng)table壓縮至最小仍然無(wú)法容納內(nèi)容時(shí)table實(shí)際width 大于設(shè)置的width留夜。
width:max-content可使table 寬度自適應(yīng)，內(nèi)容不會(huì)被壓縮图甜。 使用CSS的max-content值可以確保<table>在不壓縮內(nèi)容的前提下碍粥，展示其原有寬度，即使這意味著表格會(huì)超出其容器的寬度黑毅。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.table-container {
width: 100%; /* 容器寬度嚼摩，可以根據(jù)實(shí)際情況調(diào)整 */
overflow-x: auto; /* 內(nèi)容超出時(shí)水平方向顯示滾動(dòng)條 */
}
table {
width: max-content; /* 表格寬度根據(jù)內(nèi)容自適應(yīng)，不會(huì)被壓縮 */
border-collapse: collapse;
}
th,
td {
border: 1px solid #ccc;
padding: 8px;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>標(biāo)題1</th>
<th>標(biāo)題2</th>
<th>標(biāo)題3</th>
<th>其他</th>
<!-- 根據(jù)需要添加更多的列 -->
</tr>
</thead>
<tbody>
<tr>
<td>內(nèi)容1</td>
<td>內(nèi)容2</td>
<td>內(nèi)容3</td>
<td>更多內(nèi)容</td>
<!-- 每一行內(nèi)容 -->
</tr>
<!-- 根據(jù)需要添加更多的行 -->
</tbody>
</table>
</div>
</body>
</html>
