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:貫穿線;
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ** 行框的最終高度,由行內最高的那個行內盒模型決定;
? ? ? ? ? **?
補一個元素在不同類型中切換的相關效果,
轉載于:https://www.cnblogs.com/jieling/p/10856711.html
總結
- 上一篇： 统计单词（续）
- 下一篇： 09Oracle Database 数据