css樣式可以使用百分比的屬性 總結

2021-07-09 01:38:15 字數 1209 閱讀 7280

可以使用百分比的樣式屬性:

定位:top,right,bottom,left;

盒模型:height,width,margin,padding,

背景:background-position,background-size(css3),

文字:text-indent,

字型:font-size;

各個屬性使用詳細:

top,right,bottom,left:全相容,

height:基於包含它的塊級物件的百分比高度。

width:基於包含它的塊級物件的百分比寬度。

margin:百分數是相對于父元素的 width 計算的。

padding:百分數是相對于父元素的 width 計算的。

background-position:影象中描述為 50% 50% 的點(中心點)

如果影象位於 0% 0%,其左上角將放在元素內邊距區的左上角。

如果影象位置是 100% 100%,會使影象的右下角放在右邊距的右下角。

因此,如果你想把乙個影象放在水平方向 2/3、垂直方向 1/3 處,可以這樣宣告:

body

如果只提供乙個百分數值,所提供的這個值將用作水平值,垂直值將假設為 50%。這一點與關鍵字類似。

background-position 的預設值是 0% 0%,在功能上相當於 top left。這就解釋了背景影象為什麼總是從元素內邊距區的左上角開始平鋪,除非您設定了不同的位置值。

background-size相容ie9+、firefox 4+、opera、chrome 以及 safari 5+ 支援 background-size 屬性。 以父元素的百分比來設定背景影象的寬度和高度。第乙個值設定寬度,第二個值設定高度。如果只設定乙個值,則第二個值會被設定為 「auto」。

text-indent定義基於父元素寬度的百分比的縮排。當外層不指定寬度時,ie下會基於瀏覽器寬度。

font-size在所有瀏覽器中均有效的方案是為 body 元素(父元素)以百分比設定預設的 font-size 值。

不足的地方或者預設的地方,希望各路大神補充

css百分比定位和百分比尺寸

只有設定了定位的 relative,absolute,fixed 的元素才有left,top等屬性。子元素relative定位 百分比定位和百分比尺寸都是相對于父元素,無論父元素有沒有定位 子元素absolute定位 百分比定位和百分比尺寸都是相對於最近的定位了的祖先元素,如果沒有則相對於視窗。可以...

CSS百分比布局

曾經的 布局可能大家都有點陌生了吧,其實我也是基本上沒用過,自從web2.0的興起,重構的思想,這讓 布局就這樣消失了基本上,布局中有用到百分比布局的,在 布局 落下帷幕之後,基本上我們都是讓網頁固定為950 1000px,如果布局使用了百分比寬度 如90 耳邊很快就能聽到抱怨 我的顯示器上效果不太...

CSS 屬性值中的百分比

css 中經常會出現百分比單位,搞清它們的基數是件很重要的事情。我查了查 css2.1 標準,在此整理一下 乘以包含塊的寬度 margin,padding,left,right,text indent,width,max width,min width 乘以包含塊的高度 top,bottom,hei...