元素基本框的生成過程

2021-06-14 10:38:30 字數 2039 閱讀 9014

先判斷乙個元素是塊級元素(block-level element)還是行內元素(inline-level element)

1.1 假如元素是乙個塊級元素,先判斷它是乙個非替換元素(non-replaced element)還是替換元素(replaced element)

1.1.1 假如元素是乙個非替換元素,則依次對其進行水平和垂直格式化

水平格式化:

元素的左右外邊距和寬度可以取值為auto,設定為auto的屬性會取得乙個盡可能大的值,另外的元素左右外邊距和元素左右邊框寬度要麼設定為乙個具體的值,要麼設定為預設的寬度:0(不顯示)

「7大水平屬性(margin–left, border-left, padding-left, width, padding-right, border-right, margin-right)」相加一定等於父元素的內容區寬度

當7水平屬性之和大於父元素內容區寬度時,會造成屬性的過分受限(overconstrained),強制元素的右外邊距為auto(在從左向右的正常流中)

元素的左右外邊距為auto,並且具有乙個具體的寬度值時,會使元素相對于父元素居中

元素的左右外邊距和寬度都為auto時,兩個外邊距會被設定為0,width為auto

元素的外邊距可以為負,依然按照規則2進行計算,這可能會造成元素的位置偏離其父元素

垂直格式化:

元素的上下外邊距和高度可以取值為auto,設定為auto的屬性會取得乙個盡可能大的值,另外的元素上下外邊距和元素上下邊框寬度要麼設定為乙個具體的值,要麼設定為預設的寬度:0(不顯示)

「7大垂直屬性」相加一定等於父元素的內容區高度

元素的高度值設為auto時,顯示時期高度將恰好足以包含它的內聯內容的行盒。對於只存在上下外邊距的子元素,元素的高度會恰好包含子元素的內容區(這會造成子元素的外邊距超出父元素內容區的效果,顯式設定子元素的邊框或內邊距可以解決這個問題)

可以為元素顯式的設定高度。當高度值大於顯示內容所需的高度時,多餘的高度會產生乙個類似下內邊距的效果;相反,當高度值太小不足以包含所有顯示內容時,可以通過overflow設定使用者**對多餘部分的呈現方式(隱藏或顯示乙個滾動條等)

無法通過設定元素的上下外邊距為auto來達到元素垂直居中的效果,因為這時候元素的上下外邊距會被計算為0。在這裡,設定元素垂直居中的方法是,將元素的上下外邊距對設定為(父元素的寬度 – 元素寬度)/2的值。(在元素不存在邊框和內邊距的情況下)

垂直外邊距會進行合併,值較大的外邊距會覆蓋較小的。對於負外邊距,會去絕對值較大的那乙個,而如果是一正一負,則取正外邊距減去負外邊距的絕對值

1.1.2 假如元素是乙個替換元素,則依次對其進行水平和垂直格式化

水平格式化:

替換元素的所有水平格式化規則與非替換元素相同

當替換元素的width設定為auto時,元素的寬度會被設定為它的固有寬度(比如乙個100*20的,固有寬度就是100)

垂直格式化:

原理同替換元素的水平格式化

1.2 假如元素是乙個行內元素,先判斷它是乙個非替換元素還是替換元素

1.2.1 假如元素是乙個非替換元素,則按照以下規則進行格式化

根據font-size的值確定字元em框的高度,字元的em框串在一起構成內容區

確定咯內容區在整行基線上分別超出了多少

line-height的值與font-size的值想減得到行間距(leading),將行間距除以2分別應用到內容區的頂部和底部,這就構成了行內框

如果設定了元素的vertical-align值,則把行內框向上或向下移動相應的偏移量

基線到最高行內框的距離加上最低行內框的距離等於行框的高度

1.2.2 假如元素是乙個替換元素,則按照以下規則進行格式化

行間距不會作用於替換元素

把替換元素的height, margin-top, margin-bottom, border-top, border-bottom, padding-top, padding-bottom相加得到元素的行內框高度

將替換元素的底邊放在整行基線上

如果設定了元素的vertical-align值,則把行內框向上或向下移動相應的偏移量

基線到最高行內框的距離加上最低行內框的距離等於行框的高度

mysql 生成UUID 儲存過程的基本概念

md5 32位 sha1 40位 她們都是單向加密 select md5 admin sha1 admin password admin uuid 36位16進製制的全球唯一字串 select uuid length uuid select uuid select format 12131321,2...

資源生成的過程

資源的總入口 initializeresourcevariables mapjtbl jump table mmidatatype.h resource table 1.加到 resource base enum ifdef mmi anda dsm endif 這個巨集展開是這樣的 ap id,r...

行內替換元素的行內框高度

font size和line height對的行內框沒有任何影響。換句話說,就是這兩個值不論怎麼變也不會影響的垂直位置 但它還是有乙個相對的line height值,vertical align的百分比值相對於元素的line height來計算。img下外邊距邊界與基線對齊,就是元素的底部與基線對齊...