行內盒模型 字型詳解

2021-10-02 17:45:15 字數 1337 閱讀 7361

1、行內盒模型內容區由font-size(文字大小樣式)決定大小。

文字大小的值常用有兩類:

​ ① px

​ ② em(例:1.5em、2em,含義為該文字的大小是父元素文字大小的1.5倍,2倍)

2、文字基線的位置由該字型中的x的小寫字母的底線決定

​ css中的單位1ex = 該文字中小寫字母x的高度

3、行框:由line-height控制最小行框高度

4、行高=(line-height + font-size)

line-height取值分兩類:

​ ①:px,直接定義固定值

​ ②:倍數,一當前字型大小為基數設定倍數,比如line-height:1.5,那麼實際行高的值就為16✖1.5=24px %, 字型按百分比取值,比如line-height, 那麼實際行高值為150%;16✖150%=24px

5、行間距=(line-height – font-size)​直接定義類:

​ font-family: tahoma, 「宋體」, sansserif;

引入類:

​ @font-face

​ span

目前的字型設計領域,字型大致分為兩大類vertical-align垂直對齊

​ vertical-align:

​ baseline:使元素的基線與父元素的基線對齊

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

​ top:使元素及其後代元素的頂部與整行的頂部對齊

​ bottom:使元素及其後代元素的底部與整行的底部對齊。

文字縮排樣式text-indent

​ ext-indent:2em;/文字首行縮排2個字元/

​ text-indent:20px;/文字首行縮排20px/

文字對齊格式text-align

​ text-align:left;/左對齊/ (預設對齊方式)   text-align:center;/居中對齊/    text-align:right;/右對齊/    text-align:justify; /兩端對齊/

文字裝飾text-decoration

​ text-decoration:underline;/下劃線/ text-decoration:line-through;/貫穿線/

​ text-decoration:overline;/上劃線/

行內盒模型

行內元素具有盒子模型嗎 行內元素同樣具有盒子模型。行內元素的屬性設定 行內元素的上下內邊距和外邊距屬性設定是無效的 行內元素的左右外邊距和內邊距屬性設定是有效的 行內元素的padding top padding bottom從顯示的效果上是增加的但其實設定的是無效的。並不會對他周圍的元素產生任何影響...

css 行內 塊級 盒模型

行內元素 a span strong img input select 和其他元素都在一行上 高,行高及頂和底邊距不可改變 寬度就是它的文字或的寬度,不可改變。塊級元素 h1 h6 div p ul ol li dl dt dd 總是在新行上開始 高度,行高以及頂和底邊距都可控制 寬度預設是它的容器...

盒模型詳解

每乙個元素表示乙個矩形盒子 內容content,內邊距padding。邊框borde,外邊框margin,他在頁面中佔據實際大小是content padding border margin之和 盒模型有兩種標準盒子,w3c ie盒模型 3 兩種盒模型的區別 標準盒模型內容大小就是content大小,...