<tfoot id="mceys"></tfoot>

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

james 發(fā)布于2019-08-01 18:25 / 506人閱讀

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

結(jié)論是，如果是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;
}

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

GPU云服務(wù)器云服務(wù)器相對于匯編語言程序相對于關(guān)于匯編語言程序相對于 js取元素相對位置

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51720.html

相關(guān)文章

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

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

Sleepy 2019-08-29 14:16 評論0 收藏0
height:100%; 為什么不起作用

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

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

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

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

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

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

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

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