07.行內盒模型

在前面的文章中,咱們講到了盒模型,今天再來說一下行內盒模型

行內盒模型( inline box model): 是W3C規定一個瀏覽器如何渲染、顯示、排版文字的一整套規則；

要有效的理解行內盒模型， 可結合下圖進行理解

 

font-size: 直接決定內容區的大小, 不受元素height  的影響;

   --> font-size: 能夠px爲單位,也能夠em爲單位; [1.5em: 表示元素的字體大小爲父元素的1.5倍]

文本基線; 與所使用的字體有關,每種不一樣的字體的基線位置是不同的, 

    --> 文本基線都是以字體中的小寫字母x 的底部爲標準來定義的;  默認狀況下, 不一樣字體及不一樣字號的文字,都是以文本基線來對齊的,

         (img,audio,video是以元素底部爲標準,與文本進行對齊的)

文本中線: 並不必定是文字的正中間的那條線;

     --> 字體中小寫字母x的高度,有個特定的單位進行標識:  ex

     --> 文本中線=文本基線 - 0.5ex;  (即文本基線往上移0.5個ex,就是文本中線了)

    --------------------------------------------------------------------------------------------------

    *******  插入一個自定義字體的應用方法

    <style>

　    　//引入自定義字體資源

　    　@font-face{

　　    　　font-family:"自定義字體名稱,如wtlfont";

　　    　　src:url("./font/xxxx.ttf");

    　　}

　     p{

　    　　　font-family:wtlfont;

            }

    <style>

    -------------------------------------------------------------------------------------------------

 行高:  指上下兩行文字的文本基線之間的最小距離;

    -->  由lineheight指定的值,標識行內模型的高度;

 行間距: 指上下兩行文字內容區之間的距離;

    -->行高-文字區高度 (lineheight-fontsize);

   --> 行間距,會被平分到文本的上下方;

 

---------------------------------------------------------------------------------------------

**  非替換元素:  是指內容能夠直接在代碼中寫出來的內容(如文字)

**  替換元素: 是指內容存儲在代碼文件以外,須要經過文件路徑引入的內容(如圖片,,音頻,視頻)

     --> 當替換元素與非替換元素同時出如今行內模型中時, 默認以文本基線爲標準進行對齊

           (文字的文本基線與圖牌的底部對齊, 或者多個不一樣字體,不一樣字號的文字與圖牌,音頻,視頻元素的對齊)

     --> 當替換元素的高度超過line-height指定的最小行框高度時,行框將被撐開, 

          (所謂的行框: 就是行內盒模型中最高部分到最低部分,以及最左邊內容到最右邊內容的範圍)

          ** 對齊方式;  先肯定最高的行內盒模型元素, 並算出該元素的文本基線, 接着將其它元素的文本基線與最高的行內盒模型元素的基線進行對齊;

              => 垂直方向上的對對齊規則:  vertical-align:

                    baseline: 使元素的文本基線與父元素的基線對齊(默認)

                    middle:    使元素的中部與父元素的中部對齊; 

                    top , bottom: 頂部 / 底部 對齊;

              =>  水平方向上的對齊規則: 

                    text-indent: 縮進; (能夠爲px, 也能夠爲em)

                    text-align:   水平方向對齊規則( left, center, right, justify<兩端對齊>)

                => 文本裝飾  text-decoration

                    underline: 下劃線;   overline:上劃線;  line-through:貫穿線;

                   

          ** 行框的最終高度,由行內最高的那個行內盒模型決定;

          ** 

補一個元素在不一樣類型中切換的相關效果,