理解 height 百分比

2021-10-24 12:31:40 字數 1084 閱讀 2738

相對于父元素的高度根據百分比計算高度。如果父元素沒有設定高度或者父元素高度百分比不生效,則無法計算自己的高度。當沒有給父元素設定高度或父元素高度百分比不生效時,父元素高度由子元素高度決定。

html 的父元素可以理解成 window,瀏覽器會將 html 填充完整個瀏覽器視窗:

當 html 高度設定為具體畫素值或百分比時:

但是 html 的子元素高度設定成百分比時,會按照 html 實際設定的高度值來計算百分比。

>

html

body

.parent

style

>

class

="parent"

>

div>

效果:

將 html 高度設定為 200px ,效果如下:

當 html 高度大於瀏覽器視窗高度時,會出現滾動條:

>

html

body

.parent

style

>

class

="parent"

>

div>

效果:

如果父元素沒有設定高度或者父元素高度百分比沒有生效,那麼子元素的高度百分比不會生效:

>

body

.parent

style

>

class

="parent"

>

html 沒有設定高度div

>

這裡沒有 html 高度,因此 body 的高度規則跟 html 類似,但是這裡的 body 實際高度為 0,所以 parent 的高度百分比不生效,其高度由子元素決定。

效果:參考:理解 height 百分比

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

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

百分比布局

參考位址 螢幕的適配是我們android開發最經常做的事情之一,我們一直指望著能夠一套布局適配所有。於是在android5.0之後,提供了android support percent lib,這樣我們可以盡情的使用。使用的時候,我們嗯需要設定的有 layout marginpercent layo...

百分比布局

其中相對布局和幀布局官方是有支援庫的 compile com.android.support percent 25.3.0 但線性布局並沒有 public class percentlinearlayout extends linearlayout override protected void o...