容器內的行塊盒和行盒
<!-- test1: 關于行盒和行塊盒的空白折疊問題 -->
<!-- 行塊盒右邊的空白折疊為一個 （操作：切換span2的display為inline ,往右書寫ggg1的位置）-->
<div style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span style="display:block;font-size:32px;background-color:rgb(252, 240, 171);">ggg1
</span>
<span style="display:inline-block;font-size:64px;background-color:rgb(252, 183, 171);">ggg1
</span> ggg1
</div>
<!-- 行盒的右邊空白忽略 -->
<div style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span style="display:block;font-size:32px;background-color:rgb(252, 240, 171);">ggg1
</span>
<span style="font-size:32px;background-color:rgb(252, 183, 171);">ggg1
</span>
ggg1
</div>
<!-- test2:行塊盒與行塊盒 -->
<!-- 行塊盒右邊的空白折疊為一個，由父元素的font-size控制大小 -->
<div style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span style="display:inline-block;font-size:32px;background-color:rgb(252, 240, 171);">ggg2
</span><span style="display:inline-block;font-size:64px;background-color:rgb(252, 183, 171);">ggg2
</span>
<span style="display:inline-block;font-size:32px;background-color:rgb(247, 87, 161);">ggg2
</span>
</div>
<div style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span style="display:inline-block;font-size:32px;background-color:rgb(252, 240, 171);">ggg2
</span><span style="display:inline-block;font-size:64px;background-color:rgb(252, 183, 171);">ggg2
</span>
<span style="display:inline-block;font-size:32px;background-color:rgb(247, 87, 161);">ggg2
</span>ggg2 ggg2
</div>
<!--test3: 行盒與行盒 (特別) -->
<!-- 行盒子后面擺放"行盒"(有文本就有)，前一個行盒子出現右拉伸 -->
<div style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span style="font-size:32px;background-color:rgb(252, 240, 171);">ggg3
</span>
<span style="font-size:64px;background-color:rgb(252, 183, 171);">ggg3
</span> ggg3 ggg3
</div>
<div style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span style="font-size:32px;background-color:rgb(252, 215, 8);">ggg3
</span>
<span style="font-size:0px;background-color:rgb(255, 1, 1);">ggg3
</span>
</div>
<!-- test4: 行盒子后面擺放"行塊盒"，前一個行盒子出現右拉伸 -->
<div style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span style="font-size:32px;background-color:rgb(194, 252, 171);">ggg4
</span>
<span
style="display:inline-block;font-size:64px;background-color:rgb(52, 247, 3);">
</span>
</div>
<!-- test5: span2后面無行盒子或者行塊盒子，無右拉伸 -->
<div style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span style="font-size:32px;background-color:rgb(194, 252, 171);">ggg5
</span>
<span style="font-size:64px;background-color:rgb(252, 203, 171);">ggg5
</span>
</div>
<!-- test6: 行盒左右兩邊一個行塊盒 -->
<div style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span
style="display:inline-block;height:60px;width:100px;font-size:64px;background-color:rgb(252, 171, 171);">
</span><span style="font-size:32px;background-color:rgb(194, 252, 171);">ggg6
</span>
<span
style="display:inline-block;height:60px;width:100px;font-size:64px;background-color:rgb(252, 203, 171);">
</span>
</div>
<!-- test7: 去掉ggg77效果一樣，說明父元素有參考線 -->
<div style='border:1px solid;margin:10px;font-size:16px;font-family:cursive;'>
<span
style="display:inline-block;height:40px;width:100px;font-size:64px;background-color:rgb(252, 171, 171);">
</span>
<span
style="display:inline-block;height:60px;width:120px;background-color:rgb(197, 83, 7);">
</span>
ggg77
</div>
總結
-
文字的大小由: font-size,font-family,line-height決定
設定文字的相對大小時候px,em,百分比，文字的內容實際高度content-area通常高于設定的值（不同的font-family比例不同，同一種文字比例相同，按比例計算），而且還有字體設計者設定的默認行高（行高>=0） -
圖片(可替換元素)和無子元素的inline-block元素的行為類似，都是下外邊距作為參考線
-
一個元素內部有行盒（或者行塊盒），且font-size>0時，該元素會產生參考線
-
行盒子右邊有行盒子（有文本的）或者行塊盒（任意的，甚至寬高0，無子元素）會導致該元素右伸展
-
行塊盒與行盒或者行塊盒之間 ，如果之間有空隙發生空白折疊（代碼書寫的多個換行或者空格合并為一個），空白大小由該元素包含塊的font-size大小決定
-
vertical-align 可以設定行盒或者行塊盒
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/98431.html
標籤：Html/Css
上一篇：【前端開發環境】前端使用GIT管理代碼倉庫需要掌握的幾個必備技巧和知識點總結
下一篇：body的背景