本博客介紹瞭以下各屬性中的相對值以什麼為基礎:
父元素寬高設置 width:300px;height:200px;
子元素寬高設置為 height:150px;width:100px;
父元素border厚度20px;
子元素的border厚度10px;
子元素和父元素設置為box-sizing:content-box;(默認就是content-box)
em可以查看如下鏈接說明:
MDN關於transform的介紹:
博客有說過transform在inline元素中是無效的。
(1)用transform:translateX(50%)測試,可以看到最後計算絕對值是60;
這是由子元素自己的寬度加上兩邊的border厚度(100+10+10)×50%=60計算得到,所以transform:translateX的相對值(百分比)是以子元素自己的寬度為基礎計算的。
子元素自身設置為box-sizing:border-box;計算就不用考慮border厚度,因為寬度已經把border厚度包括瞭。
如果沒有給body設置寬度,就會按照body的自身寬度,也就是窗口寬度與border厚度來計算。(這裡隻示例瞭block元素,因為block是占用一行,所以會隨著窗口變寬而變化)
(2)子元素自己設置font-size:20px;父元素font-size:10px;
用transform:translateX(0.5em)測試,可以看到最後計算絕對值是10;所以transform:translateX的相對值(em)是以子元素自己的字體大小為基礎計算的。
2bcb17603ff5695596ec2599938a7c16
如果沒有設置font-size,就會按照瀏覽器默認的字體大小 font-size:16px為計算基礎;
68154235ff62d0c8c58951c933f2c7f6
(3)用transform:translateY(50%)測試,可以看到最後計算絕對值是85;
這是由子元素自己的高度height加上兩邊的border厚度(150+10+10)×50%=85計算得到,所以transform:translateY的相對值(百分比)是以子元素自己的高度height為基礎計算的。
子元素自身設置為box-sizing:border-box;計算就不用考慮border厚度,因為高度已經把border厚度包括瞭。
159ba3fa16abbc07920b5c9999ca862b
如果沒有給body設置高度,就會按照body的自身高度,這個高度由文檔流的高度決定(這個例子中是200+20+20),與body自己的border(10+10)厚度來計算,height等於240px。
(4)子元素自己設置font-size:20px;父元素font-size:10px;
用transform:translateY(0.5em)測試,可以看到最後計算絕對值是10;所以transform:translateY的相對值(em)是以子元素自己的字體大小為基礎計算的。
如果沒有設置font-size,就會按照瀏覽器默認的字體大小 font-size:16px為計算基礎;
(1)用margin:50%;padding:50%;測試,可以看到最後計算絕對值是150;說明margin/padding的相對值(百分比)都是按照父元素的寬度width作為基礎。
(2)子元素自己設置font-size:20px;父元素font-size:10px;
用margin:0.5em;padding:0.5em;測試,可以看到最後計算絕對值是10;所以margin:0.5em;padding:0.5em的相對值(em)是以子元素的自身字體大小為基礎計算的。
(1)用 height:50%;width:50%;測試,可以看到最後計算絕對值是height:100px;width:150px;說明height/width的相對值(百分比)都是按照父元素的高度和寬度height/width作為基礎。
(2)子元素自己設置font-size:20px;父元素font-size:10px;
用height:0.5em;width:0.5em;測試,可以看到最後計算絕對值是10;所以height:0.5em;width:0.5em;的相對值(em)是以子元素的自身字體大小為基礎計算的。
(1)子元素自己設置font-size:20px;父元素font-size:10px;
用line-height:50%;測試,可以看到最後計算絕對值是10;說明line-height:50%的相對值(百分比)都是按照子元素自身的字體大小作為基礎。
(2)子元素自己設置font-size:20px;父元素font-size:10px;
用line-height:0.5em;測試,可以看到最後計算絕對值是10;說明line-height:0.5em的相對值(em)都是按照子元素自身的字體大小作為基礎。
(1)當使用position:relative前提使用top/bottom/left/right。
(1-1)用top/bottom/left/right:50%測試,可以看到最後計算絕對值是top/bottom:100px;left/right:150px;所以top/bottom和left/right的相對值(百分比)是以父元素的高height和寬width為基礎計算的。
(1-2)子元素自己設置font-size:20px;父元素font-size:10px;
用top/bottom/left/right:0.5em測試,可以看到最後計算絕對值是top/bottom/left/right:10px;所以top/bottom和left/right的相對值(em)是以子元素自身的字體大小為基礎計算的。
(2)當使用position:absolute前提使用top/bottom/left/right。
(2-1) 在body上增加width:500px;height:400px;把它的非static父級元素定位在body上。
用top/bottom/left/right:50%測試,可以看到最後計算絕對值是top/bottom:200px;left/right:250px;所以top/bottom和left/right的相對值(百分比)是以非static父級元素定位的高height和寬width為基礎計算的。
(2-2)在body上增加width:500px;height:400px;fonti-size:30px;把它的非static父級元素定位在body上。
用top/bottom/left/right:0.5em測試,可以看到最後計算絕對值是top/bottom/left/right:10px;所以top/bottom和left/right的相對值(em)子元素自身的字體大小為基礎計算的。
相對值(百分比和em)是以什麼為基礎計算。
本文為本人的原創文章,著作權歸本人所有,轉載務必註明來源
上一篇
下一篇
你手上的小黑本能帶你去全球哪些地方呢?全球第5!可免簽187個國傢和地區。▼今年第三季度,亨利護照指數(Henley Passport In...
随着工艺验证进入QbD时代,FDA的新工艺验证指南将工艺验证分为三个阶段,今天我们要讲述的工艺性能确认(PPQ)是阶段2(工艺 ...