Question

我是HTML / CSS的新手，现在我正在努力完成一个教程，我想知道来自width: 2em的em #menubar ul是什么意思？

在父容器中，没有可以引用的宽度？或许我在这里弄错了。

    <body>

    <section id="menubar">
        <ul>
            <li><a class="menubutton" href="#menu"> <img src="images/menu.png"> </a></li>
        </ul>
    </section>

    <header>
        <h1>HMTLworldBLOG</h1>
    </header>

    <nav class="nav">
        <ul>
            <li><a href="index.html" class="active">Home</a></li>
            <li><a href="index.html">Tutorials</a></li>
            <li><a href="index.html">Videos</a></li>
            <li><a href="index.html">Community</a></li>
            <li><a href="index.html">About</a></li>
        </ul>
    </nav>

    <section id="main">
        <article>
            <h2>Das ist ein Artikel</h2>
            <img src="images/bild.jpg">
            <p>Lorem ipsum.</p>
            <p>Lorem ipsum dolor sit amet.</p>
            <p>Lorem ipsum dolor sit amet.</p>
        </article>

        <aside>
            <section>
                <h2>Weitere Artikel</h2>
                <ul>
                    <li>Noch einer</li>
                    <li>Noch einer</li>
                    <li>Noch einer</li>
                </ul>
            </section>

            <section>
                <h2>Ein Textfeld</h2>
                <p>Lorem ipsum.</p>
            </section>

            <section>
                <h2>Kategorien</h2>
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>PHP</li>
                    <li>jquery</li>
                    <li>Tool</li>
                </ul>
            </section>
        </aside>
    </section>

    <footer>
        <ul>
            <li>Kontakt</li>
            <li>Datenschutz</li>
            <li>Impressum</li>
        </ul>
    </footer>
</body>

和CSS：

body {
background: #DCDCDC;
font-size: 100%;          
margin: 0em;              
padding: 0em;            
}

h1 {
font-size: 2.5em;
line-height: 3.8em;
font-family: Helvetica;
font-weight: 100;
color: #E2DBDB;
margin: 0em;
}

h2 {
font-size: 1.563em;
line-height: 1.8em;
font-family: Helvetica;
font-weight: 100;
color: #2F2D2C;
margin: 0em;
padding: 1.25em;
text-align: left;
}

p {                        
line-height: 1.25em;
font-family: Helvetica;
font-weight: 100;
color: #2F2D2C;
margin: 0em;
padding: 1.25em;           
text-align: justify;        
}

ul {
margin: 0px;               
padding: 0px;               
}

li {
list-style: square;
line-height: 1.25em;
font-family: Helvetica;
font-weight: 100;
color: #2F2D2C;
margin: 0.313em 0em 0.313em 0em;
padding: 1.25em;
}

img {                          
width: 90%;                 
height: auto;               
max-width: 100%;            
}

a {                           
text-decoration: none;
}


/*******ON TOP BAR******/

#menubar {
display: block;            
background: #ffffff;
}

#menubar ul {                   
display: block;            
width: 2em;              
padding: 0.9em;             
}

#menubar ul li {            
display: inline;           
}

Answer 1

em度量单位是相对于元素的font-size计算的，如果没有明确定义，则（通常）从其父元素继承。如果font-size为16px，则1em将等于16像素。如果使用font-size单位定义em，那么它将相对于其继承的font-size（即父元素的font-size）。

在您的具体示例中，width的{{1}}将是2em元素font-size的两倍，#menubar ul元素将从正文font-size继承设置为100%。

<强> Further reading on <length> units from MDN

Answer 2

让我以最简单的方式解释这一点。

EM 是一个相对单位。它始终基于它的父元素的font-size。

在下面的代码段中，尝试将h1标记的em更改为某些内容大。
现在，将它的父标记“.em-tutorial”的基本字体大小更改为更小的东西。

您的标题的字体大小是否也变小了？

那是因为em是根据父元素计算的（在本例中是.em-tutorial）。

.em-tutorial {
  font-size:10px;
}

.em-tutorial h1 {
  font-size:5em;
}

<div class="em-tutorial">
<h1>This heading has a font size of 2em</h1>
</div>
            
<div class="em-tutorial">
<h1>This heading has a font size of 2em</h1>
</div>

Answer 3

'em'是用css表示长度的单位。

请阅读链接

http://www.w3schools.com/cssref/css_units.asp

如果没有宽容的父容器，宽度是指的是什么？

3 个答案: