盒子模型的百分比是根據什麼來的

2022-03-04 17:46:49 字數 4552 閱讀 9347

之前一直很模糊，他們的水平和垂直方向上的百分比是根據什麼來的？

是根據寬度還是高度呢？

來揭秘一下把。

首先是margin:

可以看出margin-top和margin-bottom都是根據父容器的寬度來決定的。

比如我這裡的margin:10%

父容器的width:800px;height:600px;

結論：margin百分比也是根據父容器的寬度來決定的。不管margin-top還是margin-bottom。

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>盒子模型的定位問題


這裡的padding設定的是10%；可以看到padding-top和padding-bottom都是80px;


結論：padding百分比也是根據父容器的寬度來決定的。不管padding-top還是padding-bottom。


doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>盒子模型的定位問題


這裡的div3設定的屬性是position：absolute；top:10%;right:10%;


可以看出解析出來之後top:60px;right:80px;


結論：當position:absolute時，top的百分比是根據父容器高度來計算的，left的百分比是根據父容器的寬度來計算的。


doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>盒子模型的定位問題


這裡的div4設定的屬性是position:relative；top:10%;left:10%;


可以看出解析出來之後top:60px;left:80px;


結論：當position:relative時，top的百分比是根據父容器高度來計算的，left的百分比是根據父容器的寬度來計算的。


doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>盒子模型的定位問題


title


>


<


style 


type


="text/css"


>


*.container


.div


.div4


style


>


head


>


<


body


>


<


div 


class


="container"


>


<


div 


class


="div4 div"


>relative


div>


div>


body


>


html


>


width和height:


可以看出，設定寬度百分比和高度百分比是根據父容器的寬度和高度來設定的。


doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>盒子模型的定位問題


title


>


<


style 


type


="text/css"


>


*.container


.div


.div5


style


>


head


>


<


body


>


<


div 


class


="container"


>


<


div 


class


="div5 div"


>width和height


div>


div>


body


>


html


>


總結：height、top兩個值都是根據父容器的高度來設定的。


padding-top/padding-bottom/padding-left/padding-right、margin-top/margin-bottom/margin-left/margin-right、width、left是根據父容器的寬度來設定的。


路徑：
 
百分比布局的使用
今天有時間搗鼓了一下這個東西，和大家分享一下。官方提供的包裡，關於百分比布局有兩個，如下 就是percentframelayout和percentrelativelayout，我們今天就來說說這兩個百分比布局的使用吧。本文demo使用android studio來完成，所以直接在gradle檔案中新...


CSS屬性的百分比參照的是誰
charset utf 8 title type text css inner1 inner2 總結 百分比參照於誰 width margin padding 包含塊的width height 包含塊的height left 包含塊的width top 包含塊的height style head w...


Android百分比布局的使用
不經意見發現android支援百分比布局了，使用android percent support這個庫就可以做到了。內心是竊喜的，這樣好多布局就變得簡單多了。這個庫提供了 percentrelativelayout percentframelayout，通過名字就可以看出，這是繼承自framelayo...