Memo Code Blog

Appearance

width 寬度 ​

介紹 ​

width 的預設值是 auto，當元素的寬度設為 auto 時，會根據其內容和父元素的寬度自動調整。具體來說：

  • 對於區塊級元素（如 div），它會盡可能地填滿其父元素的寬度，除非設定了最大寬度（max-width）或浮動（float）等屬性限制了它的寬度。

  • 對於行內元素（如 span），它會根據其內容自動調整寬度，以適應內容的大小。

  • 對於替換元素（如 img、input），它們的寬度通常受到其固有尺寸（intrinsic dimensions）的限制，但也會受到父元素寬度的影響。

使用 auto 可以讓元素的寬度根據上下文動態調整，以確保最佳的佈局效果。

單位 ​

除了 auto 之外，CSS 的 width 屬性還可以設定以下值：

  1. 固定長度單位（Fixed Length Units）： 使用像素（px）、公分（cm）、英吋（in）、毫米（mm）等固定單位來指定元素的寬度。例如：width: 200px;

  2. 百分比（Percentage）： 使用百分比來指定元素寬度相對於其父元素寬度的比例。例如：width: 50%; 表示元素寬度為父元素寬度的 50%。

  3. 相對長度單位（Relative Length Units）： 使用相對於其他尺寸的單位，如 em、rem 等。例如：width: 2em; 表示元素寬度為目前字體大小的兩倍。

  4. 最大寬度（Max Width）： 使用 max-width 屬性限制元素的最大寬度，使其不超過指定的值。例如：max-width: 500px; 表示元素寬度不會超過 500 像素。

  5. 最小寬度（Min Width）： 使用 min-width 屬性限制元素的最小寬度，確保其不小於指定的值。例如：min-width: 100px; 表示元素寬度不會小於 100 像素。

這些值的組合和靈活使用可以實現各種各樣的佈局效果和響應式設計。

CSS3 尺寸關鍵字 ​

  1. fill-available： 這個關鍵字指定元素應填滿其父容器的可用空間。如果父容器有剩餘空間，元素將會填滿這些空間。如果父容器沒有剩餘空間，元素將會收縮以適應父容器。它類似於 100%，但是會考慮到 padding、border 等。

  2. max-content： 這個關鍵字指定元素的最大寬度應該是其內容所需的最大寬度。元素的寬度會根據其內容的大小自動調整，但不會超過內容所需的最大寬度。

  3. min-content： 這個關鍵字指定元素的最小寬度應該是其內容所需的最小寬度。元素的寬度會根據其內容的大小自動調整，但不會小於內容所需的最小寬度。

  4. fit-content： 這個關鍵字指定元素的寬度應該盡可能地適合其內容，但不超過指定的最大寬度（如果有的話）。元素的寬度會根據其內容的大小自動調整，但不會超過指定的最大寬度。

width: 100% ​

  1. width: 100% with box-sizing: border-box:

在這種情況下，元素的寬度將會被設定為其父元素的寬度的百分比，同時包括內邊距和邊框的寬度。這意味著元素的內容框將填滿其父元素的寬度，同時內邊距和邊框的寬度也被包含在內。

  1. width: 100% with box-sizing: content-box:

在這種情況下，元素的寬度將會被設定為其父元素的寬度的百分比，但不包括內邊距和邊框的寬度。這意味著元素的內容框會填滿其父元素的寬度，但是內邊距和邊框的寬度不會被計算在內，因此元素的實際寬度可能會大於父元素的寬度。

綜上所述，width: 100% 的效果取決於 box-sizing 屬性的設定。在 box-sizing: border-box 的情況下，元素的寬度將包括內邊距和邊框，而在 box-sizing: content-box 的情況下，元素的寬度只包括內容框。

  • 100% 是父元素內容寬度高度的百分比，也是就實際內容大小，並非相對於設定的 width/height。

  • 在 content-box 之下，子元素設定了 100w/100h 又設定 padding/border，可能會造成溢出。

  • 子元素設定 100w/100h，又設定 margin，可能會造成溢出

  • 父元素沒有設定寬度高度，就會是 auto 去計算。

height:auto ​

  • 内部文本：元素的高度会根据文本内容的行数和字体大小动态调整，以适应文本的高度。
  • 内联元素：如果元素内部包含了内联元素（如<span>、<a>等），元素的高度会根据这些内联元素的高度总和动态调整。
  • 内联块级元素：如果元素内部包含了内联块级元素（如 <img>、<button> 等），元素的高度同样会根据这些内联块级元素的高度总和动态调整。不过，内联块级元素会以块级元素的方式布局，因此它们之间会有一些默认的垂直间距。
  • 块级元素：如果元素自身是块级元素（如 <div>、<p> 等），那么元素的高度会根据其内部内容的高度总和动态调整。块级元素会在垂直方向上扩展以适应其子元素的高度。

width 不生效或被覆蓋的可能 ​

  1. 使用 display: inline 或 display: inline-block：對於行內元素和內聯塊元素，寬度通常是由內容決定的，而不是由 width 屬性決定的。因此，在這些元素上設定 width 屬性可能會失效。 當設定了 width 屬性時，它可能會被其他屬性覆蓋或影響，例如：

  2. Flexbox 屬性：

    • flex-grow
    • flex-shrink
    • flex-basis

    這些屬性會影響元素在 Flexbox 佈局中的寬度，它們可能會覆寫 width 屬性的設定。

  3. 絕對定位屬性：

    • position: absolute
    • position: fixed

    當元素使用絕對定位時，其寬度可能會受到偏移量的影響，而不再受到 width 屬性的約束。

  4. 表格佈局屬性：

    • display: table-cell
    • display: table-caption
    • display: table-row
    • 等等

    在表格佈局中，width 屬性可能會被表格模型所覆蓋，表格模型會根據表格的演算法決定儲存格的寬度。

  5. 浮動屬性：

    • float: left
    • float: right

    當元素浮動時，width 屬性的設定可能會受到浮動元素的影響，導致寬度計算不準確。

  6. 百分比單位： 如果父元素的寬度不明確或無法確定，那麼子元素設定百分比寬度可能會導致寬度計算不準確。

總的來說，這些屬性或因素可能會影響 width 屬性的設置，導致寬度計算不準確或被覆蓋。在佈局時需要注意這些因素，以確保元素的寬度能夠符合設計的預期效果。

  • [ ]代辦：圖片

狀況題 ​

div 卻無法填滿父層空間 ​

div 卻無法填滿父層空間，以內容為大小，原因是父層用了 flex。

<nav>  //flex
<div> //非預期，縮小為內容大小，解法：補上flex-grow:1 分配剩餘空間給他
...li...
</div>
</nav>

Copyright © 2024-minilabmemo