国产日韩欧美bb,999色色色

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í)的處理方式，無論子元素是否是絕對(duì)定位overflow都能控制內(nèi)容溢出時(shí)的表現(xiàn)。
該屬性取值主要有：
visible: 內(nèi)容溢出容器時(shí)可見；
hidden: 內(nèi)容溢出容器時(shí)被裁剪，隱藏；
auto: 內(nèi)容溢出容器時(shí)，添加滾動(dòng)條以允許用戶滾動(dòng)查看溢出內(nèi)容。
當(dāng)overflow:auto且子元素超過父元素高度時(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)沒有設(shè)置寬度時(shí)，寬度由父元素確定；行內(nèi)塊元素，當(dāng)沒有設(shè)置寬度時(shí)，寬度可以無限寬。

 <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é)束端外邊距。

典型場景

元素不足以容納文本時(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)來表示截?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ì)：寬高比要大些，即寬要長些
    <div style={{ height: '100vh', overflow: 'hidden' }}>
      <img src={bg} style={{ objectFit: 'cover', objectPosition: 'left top' }} />
    </div>
// 計(jì)算過程：`objectFit: 'cover' ` 保持寬高比且只會(huì)裁剪高或?qū)挘绻麍D片的寬高比大于容器的寬高比則高度不會(huì)裁剪，會(huì)基于 objectPosition 裁剪寬度

table
沒有指定table width時(shí)，如果父元素足夠大table以自然舒展的方式展示；
沒有指定table width時(shí)，如果父元素小于table width，table先壓縮自身，如無法繼續(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在某些場景下是無效的，當(dāng)table壓縮至最小仍然無法容納內(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>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

css 屬性

css 屬性

典型場景

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

css 屬性

典型場景

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av