原文:margin-top的值為%,是相對於誰的百分比

以前一直用margin top: ,transform:translateY 來實現垂直居中,但是今天在自己做banner的上下切換按鈕的垂直居中的時候才發現,margin top的 值是相對於父元素的寬度的。 也可以改變布局:writing mode:vertical rl 為縱向排列,那么相對的百分比就是相對於高度了。 用top: ,配合transform:translateY 就沒有這個問題 ...

2019-01-22 14:51 0 2180 推薦指數:

查看詳情

css margin-top設置的百分比竟然是基於父元素的寬度來計算的

一直以來,都以為margin-top設置百分比的話是基於父元素的高度計算的,今天實際用到的時候卻發現並非如此,實際上是基於父元素的高度來計算的。 如果我們想讓某個元素垂直居中,最快最好的方式是設置父元素為flex布局:display:flex;然后再利用兩個屬性即可: ...

Thu Jun 18 01:10:00 CST 2020 0 1027
CSS--百分比都是相對於誰計算的?

CSS--百分比都是相對於誰計算 目錄 CSS--百分比都是相對於誰計算 相對於父級元素寬高 相對於父級定位元素寬高 相對於自身寬高 相對於自身字體大小 相對於繼承字體大小 相對於父級元素寬高 ...

Fri Mar 20 23:16:00 CST 2020 1 1556
相對定位、絕對定位 top百分比的問題

元素加了相對定位,則top:50% 表示元素相對於初始位置,y軸偏移的距離等於元素最近一級父盒子的高度的百分之50%,且最近一級父盒子必須顯式設置高度;沒有高度,top百分比這種形式就不生效; 元素加了絕對定位,則top:50% ,表示元素相對於帶定位的父元素的距離,這里的百分比,指的是元素 ...

Fri Mar 04 07:26:00 CST 2022 0 1037
margin與padding的設置為百分比時?

一、當margin和padding的設置為百分比時,是指相對於最近的塊級父元素width(非總寬度)的相應百分比,即使是margin-topmargin-bottom、padding-top、padding-bottom,設置為百分比時也是以最近塊級父元素的width(非總寬度)為基准 ...

Fri Apr 20 23:45:00 CST 2018 0 2106
css padding和margin百分比

前段時間我同事對於margin和padding應用百分比值似乎有些誤解,覺得可能是個普遍問題,所以覺得有必要拿出來單獨寫一下。 margin和padding都可以使用百分比值的,但有一點可能和通常的想法不同,就是 margin-top | margin ...

Fri Nov 06 19:08:00 CST 2015 0 10701
關於margin和padding取值為百分比和負值的總結

以下是自己學習過程中的總結,直接上結論: 1.margin/padding取值為百分比margin和padding四個方向上的取值為百分比都是參照父級元素的寬度來計算的。 2.margin取值為負值: 比如 margin-top / right / bottom ...

Sun May 26 19:18:00 CST 2019 0 778
css百分比問題——`top`、`left`、'translate'的百分比參照誰?

比如 top、left、transform屬性的translate方法,他們的百分比都是相較誰而言的? top、left是基於父元素的: translate的參數:left(x 坐標) 和 top(y 坐標) 位置參數 , 如果是百分比,會以本身的長寬做參考 top:0; left ...

Wed Jun 06 04:04:00 CST 2018 0 840
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM