css中設定元素大小

2021-09-28 14:06:42 字數 750 閱讀 3291

css中設定元素大小是極其常見也是非常常用的,比如文字大小,、文字域等元素的寬度、高度設定,通常字型大小的值可以是相對或絕對的。

以字型大小為例,總結大小屬性設定的幾種方式。

畫素px

設定好像素的大小以後就完全確定了字型輸出的物理尺寸,可以通過雖然可以通過瀏覽器的縮放來調整文字大小,但是,這種調整是整個頁面,而不僅僅是文字。

emem則是基於基數來計算出來的相對字型大小的,這個基數是當前物件的父級字型大小。兩者相乘就是當前物件的大小,下面這個例子的字型大小就是 2em=2*16px=32px。

"font-size: 16px">

"font-size: 2em">啊哈

在瀏覽器中預設文字大小為16px,因此,已知畫素大小可以通過下面這個公式將畫素轉換為em: px/16=em

再css3 中還出現了rem,rem的大小是相對於html根元素的,通過它可以做到只修改根元素就成比例地調整所有字型大小,經常用於手機端網頁編寫使用。使用時通常設定body字型大小為100%

3. 百分比

所謂百分比就是當前元素大小佔其父元素大小的百分數。下面這個例子的字型大小就是 50%*16px=8px。

"font-size: 16px">

"font-size: 50% ">啊哈

高度寬度

當默寫元素需要設定高度和寬度時,會用到px、cm、%,px和cm都是絕對,同理%是相對於其父塊的大小。

css設定元素背景

背景background 簡寫形式為 backgroud background color background position background size background repeat background origin background clip background attac...

css元素大小以及位置總結

如上圖所示是表示乙個元素的大小,content表示的是元素內容所佔的大小 margin的距離是指元素外邊框與父元素內邊框的距離 html元素的position屬性有四個屬性值,分別是static relative fixed absolute static relative fixed absolu...

CSS題目 子元素決定父元素的大小

要求三個面板 有指定寬度 併排,面板中有內容,內容的寬由標題確定,並且居中對齊,內容的其他段落與標題左對齊。執行 data text html,ttttttttttttttttttttt data text html,rrrrrrrrrrrr 執行 總結一下上面的問題 by 一絲 標題相對容器居中,...