學習記錄 css 基本視覺格式化

2021-07-09 10:39:46 字數 1605 閱讀 7668

元素框

外邊距

邊框 內邊距

內容區最近的塊級祖先框、表單元格和行內塊祖先框的內容邊界構成

width:做內邊界到右內邊界

height:上內邊界到小內邊界

元素框寬度:可見元素框(width+padding)+外邊距(margin)

7個屬性的值加一起往往是父元素的width

只應用於外邊距,兩個上下關係的元素間外邊距會合併成外邊距最大的那個元素的外邊距,互相巢狀的元素,也會合併成外邊距最大的元素的那個值

如果元素有邊框或者內邊距,絕不會合併

非替換元素及不屬於後代行內元素的所有文字,line-height,font-size,框的行間距line-height-font-size;替換元素height,margin,padding,border

基線位置及內容區對於基線的位置

vertical-align,垂直偏移量

計算最後的行框高度,基線與最高行內框頂端間的距離加基線與最低行內框底端間的距離

line-height

實際上只影響行內元素和其他行內內容,不影響至少不直接影響塊級元素。為塊級元素設定line-height,這個值只是應用到塊級元素的內聯內容時才會有視覺影響。從理論上講,只有行內元素才可以繼承這個行高,然而大多數文字並沒有包含在行內元素中。

行內框內容區的高度:font-size,字型框,em框

行內框:(line-height)-(font-size)平分兩份分在font-size上下,形成行內框,不論減出來是正是負,其實就是line-height。行內框確定了整個行框的高度,基線與最高行內框頂端間的距離加基線與最低行內框底端間的距離。因為涉及到基線對齊的問題,而基線的位置往往由font-size決定,所以兩者共同決定。

垂直對齊

vertical-align

管理line-height

line-height改變可能導致文字行重疊

line-height相對於元素本身的font-size設定,用em在繼承時,可以保證子元素不會繼承父元素的計算值,而是繼承em值並根據自身font-size計算,在line-height之間傳遞縮放因子

行框的高度取決於組成元素如何對齊,這種對齊一覽與基線落在各元素什麼位置。

增加框屬性

行內元素邊框由font-size,padding決定,不會影響行框的生成

外邊距不用應用到行內非替換元素的頂端和底部,不影響行框的高度

行內元素作為一行放置,外邊距只會出現在其開始和末尾,內邊距也出現在邊界上

替換元素的內容、外邊距、邊框、內邊距決定元素的行內框,但是不影響line-height的值。line-height對於替換元素來說,用於確定其擺放位置,因為vertical-align的百分數值相對於line-height計算。

增加框屬性

內邊距和邊框會影響行框,他們作為行內替換元素的行內框的一部分(與行內非替換元素不同)

外邊距正值使行框變高,負值使其變低

替換元素和基線

下外邊距邊界與基線對齊

display

改變角色

計算值浮動元素和絕對定位元素

inline-table->table

none->none

其他->block

cheapter7 基本視覺格式化

一 一些術語 1 替換元素與非替換元素 非替換元素,如果元素的內容包含在文件中,則稱之為非替換元素。eg.這個段落就是非替換元素 替換元素,指用作為其他內容佔位符的乙個元素。eg.src title alt 2 正常流 這裡指西方語言文字從左向右 從上向下顯示,這也是我們熟悉的傳統html文件的文字...

CSS格式化排版

文字排版 字型 我們可以使用css樣式為網頁中的文字設定字型 字型大小 顏色等樣式屬性。這裡注意不要設定不常用的字型,因為如果使用者本地電腦上如果沒有安裝你設定的字型,就會顯示瀏覽器預設的字型。因為使用者是否可以看到你設定的字型樣式取決於使用者本地電腦上是否安裝你設定的字型。現在一般網頁喜歡設定 微...

css格式化排版

1,文字排版 字型 語法 body 這裡注意不要設定不常用的字型,因為如果使用者本地電腦上如果沒有安裝你設定的字型,就會顯示瀏覽器預設的字型。因為使用者是否可以看到你設定的字型樣式取決於使用者本地電腦上是否安裝了你設定的字型 2,文字排版 字型大小 顏色 語法 body 3,文字排版 粗體 語法 標...