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

Sleepy 發(fā)布于2019-08-29 14:16 / 1408人閱讀

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

結(jié)論是，如果是height的話，是相對(duì)于容器高度，如果是padding-height,margin-height則是相對(duì)于容器的寬度。

舉例說(shuō)明：




  
  
  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%;
}

從這個(gè)效果圖看，小方塊的高度確實(shí)是相對(duì)于容器的高度

padding-height,margin-height

修改父容器寬度

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

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

容器云相對(duì)于匯編語(yǔ)言程序相對(duì)于關(guān)于匯編語(yǔ)言程序相對(duì)于 js取元素相對(duì)位置

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

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

相關(guān)文章

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

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

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

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

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

摘要：彈性盒布局并沒(méi)有這樣內(nèi)在的方向限制，可以由開(kāi)發(fā)人員自由操作。漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。首先，巧妙的使用這一標(biāo)記，將瀏覽器從所有情況中分離出來(lái)。偶數(shù)字號(hào)相對(duì)更容易和設(shè)計(jì)的其他部分構(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 評(píng)論0 收藏0
CSS面試須知，哪些需要掌握得CSS技巧

摘要：首先，巧妙的使用這一標(biāo)記，將瀏覽器從所有情況中分離出來(lái)。類(lèi)似于優(yōu)先級(jí)機(jī)制優(yōu)先級(jí)最高，有他們?cè)跁r(shí)，不起作用，值需要調(diào)整。若從左向右的匹配，發(fā)現(xiàn)不符合規(guī)則，需要進(jìn)行回溯，會(huì)損失很多性能。偶數(shù)字號(hào)相對(duì)更容易和設(shè)計(jì)的其他部分構(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 評(píng)論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屬性？用來(lái)控制元素的盒子模型的解析模式，默認(rèn)為content-boxcontext-box：W3C...

alanoddsoff 2019-04-23 14:38 評(píng)論0 收藏0