Question

以下是嵌套div和p作为最内层元素的html代码，

<!DOCTYPE html>
<html>
    <head>
        <title>How em unit works?</title>
        <link href="style.css" rel="stylesheet" type="text/css" media="all">
    </head>
    <body>
        <div>
            <div>
                <p> Some text</p>           
            </div>
        </div>
    </body>
</html>

如果样式为，

body{
    font-size: 10px;  /* Default font size is 16 css pixels for body tag*/
}

body > div{
    font-size: 20px;

}

body > div > div{
    font-size: 50px;
}

p{
    font-size: 0.5em;   /*   25 css pixels  */
    width: 6em;         /* 6X50 css pixels  */
    height: 6em;        /* 6X50 css pixels  */  
    padding-right: 3em; /* 3X50 css pixels  */  
    margin-left: 3em;   /* 3X50 css pixels  */  
    background-color: red;
}

然后，段落文字将font-size作为0.5 x 50px（最近的父font-size的0.5倍）。

我的问题，

body{
    font-size: 10px;  /* Default font size is 16 css pixels for body tag*/
}

body > div{
    font-size: 20px;
    position: relative;

}

body > div > div{
    font-size: 50px;
}

p{
    font-size: 0.5em;   
    width: 6em;         
    height: 6em;        
    padding-right: 3em; 
    margin-left: 3em;   
    background-color: red;
    position: absolute;
}

如果p获得position: absolute且最外层div变为position: relative，则em单位行为如何更改为p元素？

Answer 1

如果p是position：absolute？
，em单位行为如何变化？

它根本没有变化。

父元素仍然是父元素。

Answer 2

排名不会影响em尺码。所以无论段落的位置如何都是一样的。我更喜欢rem。 em有时会变得怪异，如果你不跟踪所有事情，可能会让一些东西看起来很糟糕。

编辑：我看到其他两个人打我回答这个问题。

＆＃39; em＆＃39; css单元工作定位元素？

2 个答案: