css_08 | CSS——CSS 基本視覺格式化：② 「行內盒子」格式化

時間  2019-11-06
標籤 css 基本 視覺 格式化 盒子 欄目 CSS 简体版
原文   原文鏈接 
本文推薦 PC 端閱讀~

本文版權歸 「公衆號 | 前端一萬小時」 全部，未經受權，請勿轉載！
複製代碼

獲取編號.png 

css_08
複製代碼

涉及面試題.png 

1. line-height: 2; 和 line-height: 200%; 有什麼區別?
2. 在什麼場景下會出現外邊距合併？如何合併？如何不讓相鄰元素外邊距合併？給個父子外邊距合併的範例。
3. 行內元素的「邊框」、「邊界」等「框屬性」是由 font-size 仍是 line-height 控制？
4. height=line-height 能夠用來垂直居中單行文本？代碼怎麼實現？
5. inline-block 有什麼特性？
6. inline-block 在實際工做中有什麼做用？
7. 怎麼去除兩個按鈕中間的縫隙問題？
8. 一個頁面有一排高度不同的產品圖，這時若是咱們用 inline-block ，怎樣使他們「頂端對齊」？
複製代碼

前言： 做爲學習「基本視覺格式化」的第二篇，咱們在對上一篇中「塊盒子」整個「格式化」過程當中能夠獲得：
所謂的「格式化」，其實就是肯定這個「塊/行內 盒子」的自身長度、高度，以及與其上下左右相鄰「盒子」之間的距離和協調的過程。在肯定這個「長度、高度、距離和協調」的過程當中會有不少「規則」，那咱們學的就是這個「規則」。
接下來的「行內盒子」格式化相對於「塊盒子」格式化的知識點會更細、更分散。不過做爲最基本的理論知識，這篇依然很重要。css


1 「行內盒子」怎麼來的

當元素的 display 屬性爲 inline、inline-block 或 inline-table 時，該元素將成爲「行內級元素」。html

選擇器 {
    display: inline、inline-block 或 inline-table;
}
複製代碼

這些元素不會在以前或以後生成「行分隔符」，因此處於正常流中的行內元素會 「水平」 擺放，它們是塊級元素的後代。
顯示時，它不會生成內容塊，可是能夠與其餘行內級內容一塊兒顯示爲多行。
同理，「行內級元素」會生成「行內級盒子」，該盒子同時會參與「行內格式化上下文（inline formatting context）」的建立。前端

🏆小總結：
「行內元素」在一個文本內生成「行內盒子」，而不會打斷這行文本（即這種元素能夠出如今另外一個元素的內容中，而不會破壞其顯示，常見的如：a 、 span 、 strong 、 em 等）。面試


2 「行內盒子」格式化

在正式學習前，有一個觀念咱們須要創建：
從某種程度上來說，塊級元素中包含的各「文本行」自己都是「行內元素」（即便它沒有用行內元素的標記包圍起來）。瀏覽器

既然「文本行」能夠看做是「行內元素」，那咱們就能夠把抽象化的「行內元素」、「行內盒子」具象成：給「文本」格式化。而後觸類旁通，完全弄懂與之相關的全部知識。
接下來，咱們先學習一些前置基礎知識，而後再細講怎樣「格式化」。 bash

2.1 一些基本概念

2.1.1 匿名文本

<div>生活不像林黛玉<span>不會由於憂鬱</span>而風情萬種</div>
複製代碼

未包含在行內元素的字符串（生活不像林黛玉 而風情萬種）就叫「匿名文本」。學習

注意，空格也是匿名文本的一部分，由於空格與其餘字符同樣都是正常的字符。字體

2.1.2 非替換元素、替換元素

  • 非替換元素：
    若是元素的內容包含在文檔中，則稱之爲「非替換元素」。
    例如：若是一個段落的文本內容都放在該元素的自己以內，這個段落就是一個「非替換元素」。
  • 替換元素：
    指用做爲其餘內容佔位符的一個元素。
    例如：
    img 元素，它只是指向一個圖像文件，這個圖像文件將插入到文檔流中該 img 元素自己所在的位置；
    大多數「表單」元素也能夠「替換」（如 <input type="radio"> ）。

2.1.3 「文本行」基礎概念——內容區、行內框/行內盒子、間距、行框

08-01.png
08-02.png

  1. 內容區

  • 非替換元素中，內容區能夠是元素中各字符的 em 框串在一塊兒構成的框（font-size 的值肯定了各個 em 框的高度），也能夠是由元素中字符字形描述的框。換句話說，內容區的高度就是 font-size 的值。spa

  • 替換元素中，內容區就是元素的固有高度再加上可能有的 margin、邊框或 padding 。3d

  1. 行間距
    行間距是 font-size 與 line-height 的差值，被分紅兩半在內容區的上下（上下半間距）。
    行間距只應用於非替換元素。

  2. 行內框（即行內各個元素對應生成的「行內盒子」）

  • 非替換元素，行內框高度 = line-height ；

  • 替換元素：

    ① 「替換元素」不與文字結合（如 img 元素）：行內框高度 = 替換元素的固有高度再加上可能有的 margin、邊框或 padding ；
    ② 「替換元素」與文字結合（如 input 中 type=text 、 type=textarea 、 type=button 等與文字結合的表單元素）：若是字體行高大於「替換元素的固有高度再加上可能有的 margin、邊框或 padding」，則「行內框」的高度爲「行高」。不然就是「替換元素的固有高度再加上可能有的 margin、邊框或 padding」。總之就是「誰大是誰」！

  1. 行高
    兩行文字「基線」的距離。

  2. 行框（即文本整行對應生成的「行內盒子」）
    一行有不少「行內盒子——inline box」，「行框」是包含該行中出現的「行內盒子」的最高點和最低點的最小盒子。
    換句話說，「行框」的上邊界要位於最高「行內盒子」的上邊界，而「行框」的底邊要放在最低「行內盒子」的下邊界。

  3. 基線
    不一樣元素的「基線」位置不一樣，整個「行框」會有一個「基線」，行內元素的位置是基於二者「基線」對齊。

2.2 行內盒子格式化

要弄清「行內盒子格式化」，讓咱們先充分理解關於「文本」的兩個重要屬性——line-height 和 vertical-align 。

2.2.1 line-height

08-03.png

⚠️line-height 隻影響行內元素和其餘行內內容，而不影響塊級元素，至少不會直接影響塊級元素。
⚠️line-height 有繼承性。

2.2.2 vertical-align

做爲 line-height 的「斷背」：vertical-align ，這個屬性只能用於「行內元素」和「替換」元素，且不能繼承。

行內元素/替換元素 {
    vertical-align: 值;
}
複製代碼

有如下「值」能夠取：

  • baseline
    元素基線與父元素的基線對齊。
    ⚠️對於一些可替換元素，好比 type=textarea ， HTML 標準沒有說明它的基線，這意味着對其使用這個關鍵字時，各瀏覽器表現可能不同。

  • sub
    元素基線與父元素的下標基線對齊。

  • super
    元素基線與父元素的上標基線對齊。

  • text-top
    元素頂端與父元素字體的頂端對齊。

  • text-bottom
    元素底端與父元素字體的底端對齊。

  • middle
    元素中垂線與父元素的基線加上小寫 x 一半的高度值對齊。

  • <length>
    元素基線超過父元素的基線指定高度（能夠取負值）。

  • <percentage>
    同 <length> ，百分比相對於 line-height ——🤣這是證實他們倆是「斷背」強有力的證據。

💡如下兩個值是相對於整行文原本說的：

  • top
    元素及其後代的頂端與整行的頂端對齊。

  • bottom
    元素及其後代的底端與整行的底端對齊。
    若是元素沒有基線 baseline，則以它的外邊距的下邊緣爲基線。

2.3 總結：「行內盒子」格式化步驟概述
08-04.png

  • 首先，如下步驟肯定文本行中各元素對應的「行內盒子」的高度：
    第一，獲得各行內「非替換元素」及不屬於後代行內元素的全部文本的 font-size 值和 line-height 值，再將 line-height 減去 font-size，這就獲得了框的「行間距」。這個「行間距」除以 2，將其一半分別應用到 「em 框」的頂部和底部；
    第二，獲得各「替換元素」的 height、margin-top、margin-bottom，padding-top、 padding-bottom、border-top-width 和 border-bottom-width 值，把它們加在一塊兒。

  • 其次，對於各內容區，肯定它在整行「基線」的上方和下方分別超出多少：
    這個任務並不容易：你必須知道各元素及匿名文本各部分的「基線」的位置， 還要知道該行自己「基線」的位置，而後把它們對齊。另外，對於替換元素，要將其底邊放在整行的「基線」上。

  • 繼而，對於指定了 vertical-align 值的元素，肯定其垂直偏移量：
    由此可知該元素的「行內盒子」要向上或向下移動多遠，並改變元素在「基線」上方或下方超出的距離。

  • 最後，既然已經知道了全部「行內盒子」會放在哪裏，再來計算最後的「行內盒子」——行框的高度：
    爲此，只需將「基線」與最高「行內框」頂端之間的距離加上「基線」與最低「行內框」底端之間的距離。

2.4 實例講解——弄懂 line-height

2.4.1 ❓問：line-height: 2; 和 line-height: 200%; 有什麼區別?

答：
line-height: 2; 和 line-height: 200%; 都表示行高是字體大小的 2 倍，可是它們是有區別的。
當它們寫在父容器中時，子元素的字體大小不同的時候，區別就體現出來了：

  • line-height: 2; 寫在父容器中，那麼子元素的行高都是自身高度的 2 倍，是相對大小。子元素的字體大小不一樣，行高也會不一樣。
  • line-height: 200%; 寫在父容器中，那麼瀏覽器會馬上計算出行高的具體值，假如父容器的默認字體大小16px ，那麼計算獲得的行高就是 2×16px=32px ，子元素的行高都會繼承這個 32px ，是固定大小。子元素的字體大小不一樣，行高都是固定某個值。

2.4.2 ❓問：行內元素的「邊框」、「邊界」等「框屬性」是由 font-size 仍是 line-height 控制？

答：
對於行內元素來講，上下的 margin padding 不生效，只有左右的 margin padding 生效！
上下 padding 只是撐開了邊框，對高度是沒有影響的。你對他加一些邊框和背景色，他也能夠看獲得變化，但實質上對高度沒有影響。
因此，行內元素的「邊框」、「邊界」是由 font-size 而不是 line-height 控制。

2.4.3 ❓問：height=line-height 能夠用來垂直居中單行文本？

答：是的。
HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>JS Bin</title>
 </head>
 <body>
  <p>Hello Oli的前端一萬小時</p>
 </body>
</html>
複製代碼

CSS

p {
  width: 300px; 
  border: 1px solid blue;
  height: 50px;
  line-height: 50px;
}
複製代碼

08-06.png

2.5 實例講解——弄懂 inline-block

2.5.1 ❓問：inline-block 有什麼特性？

答：

  • 既呈現 inline 的特性（不佔據一整行，寬度由內容寬度決定）；
  • 又呈現 block 特性（可設置寬高，內外邊距）。

2.5.2 ❓問：inline-block 在實際工做中有什麼做用？

答：
若是看到頁面上有一排並列的按鈕，若是不用浮動，就能夠用 inline-block 。
HTML

<div class="wrap">
  <span class="box">hello，Oli的前端一萬小時</span>
  <span class="box">hello，Oli的前端一萬小時</span>
 </div>
複製代碼


CSS

body {
  text-align: center;
}
.box {
  border: 1px solid;
  width: 100px;
  display: inline-block;
}
複製代碼

08-07.png

2.5.3 ❓問：怎麼去除上邊問題中兩個按鈕中間的縫隙問題？

答：
之因此有空隙，是由於 html 文檔裏邊兩個 span 之間有不少空白字符，被瀏覽器當作一個，故會有空隙。
解決方式有 2 種：

  • 第一種是在 html 裏邊把這個空格去掉；
<div class="wrap">
  <span class="box">hello，Oli的前端一萬小時</span><span class="box">hello，Oli的前端一萬小時</span>
</div>
複製代碼
  • 第二種是把包含兩個 span 的 div 字體先設置爲 0 (這裏的空白字符就沒有寬度高度，不佔位)，而後再在 box 裏邊去設置回去。
body {
   text-align:center;
}
.wrap {
   font-size: 0;
}
.box {
   border:1px solid;
   width: 100px;
   display: inline-block;
   font-size: 14px;
}
複製代碼

2.5.4 ❓問：一個頁面有一排高度不同的產品圖，這時若是咱們用 inline-block ，怎樣使他們「頂端對齊」？

答：
HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrap">
   <span class="box b1">hello，Oli的前端一萬小時</span>
   <span class="box b2">hello，Oli的前端一萬小時</span>
  </div>
</body>
</html>
複製代碼

CSS

body {
   text-align:center;
}
.wrap {
   font-size: 0;
}
.box {
   border:1px solid;
   width: 100px;
   display: inline-block;
   font-size: 14px;
}
.b1 {
   padding: 40px;
}
.b2 {
   padding: 10px;
}
複製代碼

以上代碼會出現如下問題（它會以字的「基線」對齊，而不會以整個框的頂端對齊）：

08-08.png

若是想對齊（用 vertical-align 屬性）：
CSS

body {
  text-align:center;
}
.wrap {
  font-size: 0;
}
.box {
  border: 1px solid;
  width: 100px;
  display: inline-block;
  font-size: 14px;
  vertical-align: top;
}
.b1 {
  padding: 40px;
}
.b2 {
  padding: 10px;
}
複製代碼

後記： 後續的文章將還會涉及「行內盒子」在實例中的運用，屆時咱們還再用代碼來闡述本篇的基礎理論，眼下不做過多贅述。

咱們都要記住一點：理論不懂就實踐，實踐不會就學理論！

祝好，qdywxs ♥ you！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程