css 元素的豎向百分比設定是相對于容器的高度嗎？

Sleepy 發布于2019-08-29 14:16 / 1392人閱讀

摘要：結論是，如果是的話，是相對于容器高度，如果是則是相對于容器的寬度。

結論是，如果是height的話，是相對于容器高度，如果是padding-height,margin-height則是相對于容器的寬度。

舉例說明：




  
  
  JS Bin

height

.wrapper{
  height: 400px;
  width:200px;
  background: #ccc;
  display: block;
}
.content{
  width:100px;
  height: 50%;
  background: red;
  margin-left: 10%;
  padding-top: 12%;
  margin-top: 10%;
}

從這個效果圖看，小方塊的高度確實是相對于容器的高度

padding-height,margin-height

修改父容器寬度

.wrapper{
  height: 400px;
  width:400px;
  background: #ccc;
  display: block;
}

對比前后兩張圖，內部方塊的padding-height和margin-height分別隨著父容器的width增大而變大，說明他們的百分比設定是相對于父容器的寬度

容器云相對于匯編語言程序相對于關于匯編語言程序相對于 js取元素相對位置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113033.html

css 元素的豎向百分比設定是相對于容器的高度嗎？

摘要：結論是，如果是的話，是相對于容器高度，如果是則是相對于容器的寬度。結論是，如果是height的話，是相對于容器高度，如果是padding-height,margin-height則是相對于容器的寬度。舉例說明： JS Bin height .wrapper{ height: 400px; width:200px; b...

james 2019-08-01 18:25 評論0 收藏0
height:100%; 為什么不起作用

摘要：你知道為什么不起作用嗎按常理，當我們用的屬性定義一個元素的高度時，這個元素應該按照設定在瀏覽器的縱向空間里擴展相應的空間距離。當你設置一個頁面元素的高度(height)為100%時，期望這樣元素能撐滿整個瀏覽器窗口的高度，但大多數情況下，這樣的做法沒有任何效果。你知道為什么height:100%不起作用嗎？按常理，當我們用CSS的height屬性定義一個元素的高度時，這個元素應該按...

LiangJ 2019-08-30 10:58 評論0 收藏0
50道CSS基礎面試題（附答案）

摘要：彈性盒布局并沒有這樣內在的方向限制，可以由開發人員自由操作。漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用這一標記，將瀏覽器從所有情況中分離出來。偶數字號相對更容易和設計的其他部分構成比例關系。 1 介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin低版本I...

wua_wua2012 2019-08-30 13:58 評論0 收藏0
CSS面試須知，哪些需要掌握得CSS技巧

摘要：首先，巧妙的使用這一標記，將瀏覽器從所有情況中分離出來。類似于優先級機制優先級最高，有他們在時，不起作用，值需要調整。若從左向右的匹配，發現不符合規則，需要進行回溯，會損失很多性能。偶數字號相對更容易和設計的其他部分構成比例關系。 1 介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？標準盒子模型：寬度=內容的寬度（content）+ border + paddin...

wushuiyong 2019-08-30 11:24 評論0 收藏0
整理 45 道 CSS 基礎面試題（附答案）

1、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin 2、box-sizing屬性？用來控制元素的盒子模型的解析模式，默認為content-boxcontext-box：W3C...

alanoddsoff 2019-04-23 14:38 評論0 收藏0