瞭解一些CSS

Question

我已經創建了一個從教程中拉出來的CSS的準系統示例，並且想知道是否可以進一步解釋它。

http://jsfiddle.net/4t55g/

的設置是你的名字輸入字段將自動旁邊的啓動按鈕擴大，填補了空間。這裏的關鍵似乎是包含它的跨度上的overflow屬性。爲什麼將它設置爲hidden允許它收縮到正確的寬度？

Answer 1

這是由於block formatting context，這是塊盒的佈局發生和其中浮動相互作用的區域。

• 包含它
• 浮根元素或東西（元素，其中浮子不是無）
• 絕對定位的元素（元素：

  塊格式上下文由下列之一創建其中位置是絕對的或固定的）

• 嵌入塊（帶顯示的元素：嵌入塊）
• 表格單元（顯示元素：表格單元格，這是默認值HTML表格單元格）
• 表字幕（與顯示元素：表字幕，這是HTML表格標題的默認值），其中溢流具有比可見
• 柔性盒（與顯示元件以外的值
• 元素：撓曲或inline-flex）

在塊格式化上下文中，框從一個包含塊的頂部開始，一個接一個垂直排列。兩個兄弟箱之間的垂直距離由「邊距」屬性決定。塊格式化上下文中相鄰塊級別框之間的垂直邊距摺疊。

在塊格式化上下文中，每個框的左外邊緣都與包含塊的左邊緣接觸（用於從右到左格式化，右邊緣接觸）。即使存在浮點數（雖然由於浮點數，框的線框可能會縮小），但這種情況也是如此，除非框中建立了新的塊格式上下文（在這種情況下，由於浮點數，框本身可能變得更窄）。

參見：http://www.w3.org/TR/CSS21/visuren.html#block-formatting

Answer 2

這是CSS盒模型是如何工作的一個很好的例子。

的HTML看起來像：

<div class="formLine"> 
    <button>start</button> 
    <span><input type="text" placeholder="enter a name"></span> 
</div> 

，並考慮以下CSS：

.formLine { 
    width:50%; 
    outline: 2px dotted red; 
} 
.formLine span { 
    display: block; 
    overflow :hidden; 
    padding-right:5px; 
} 
.formLine input { 
    border: 2px dotted blue; 
    width: 100%; 
} 
.formLine button { 
    width: auto; 
    float:right; 
} 

小提琴：http://jsfiddle.net/audetwebdesign/ZkxBv/

爲什麼它

你父容器包含跨度t帽子是display: block，所以它會展開以填充其父元素的寬度。<button>漂浮在右側，將導致<span>的內容在其周圍流動。在這種情況下，只有一個元素，<input>標籤，一個內聯元素。輸入標籤將盡可能擴大以填充其父容器<span>。

如果您聲明瞭overflow: visible，則輸入字段將佔用父容器的整個寬度並在按鈕下方開始一行。

但是，通過聲明overflow: hidden，瀏覽器執行其他操作。瀏覽器嘗試將跨度放在與浮動按鈕相同的行上，並確定跨度的內容太長（因此溢出）。瀏覽器比剪輯跨度適應按鈕，並試圖相應地包裝內容。在這種情況下，輸入按鈕具有可變的寬度，因此它縮小以填充空間。非常聰明，它提供了一個有用的結果。

您可以通過使用簡單的文本替換輸入按鈕看到效果：

<div class="formLine"> 
    <button>start</button> 
    <span><em>Some line with a few words that are not too long. As you can see, the text tries to flow around the button on the right.</em></span> 
</div> 

在這種情況下，詞語流出到按鈕（但不低於），然後包裹，以形成新的線。如果您將overflow更改爲可見，文本將在按鈕下方流動。