html - 通过 CSS 增加垂直导航栏宽度的问题

Question

我想知道为什么更新以下 CSS 属性:width 、position 不会放大垂直的 nav bar 在我的 page.aspx 上。

作为示例，请在 CSS 下方找到:

/* The sidebar menu */
.sidenav {
    /*height: 100%;*/ /* Full-height: remove this if you want "auto" height */
    width: 300px; /* Set the width of the sidebar */
    /*position: fixed;*/ /* Fixed Sidebar (stay in place on scroll) */
    position: absolute;
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    /*background-color: #111*/; /* Black */
    background-color: #eee;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 50px;
    font-family: 'Segoe UI Historic';
    font-size: 19px;

}

    /* The navigation menu links */
    .sidenav a {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        /*font-size: 25px;*/
        font-size: 19px;
        color: #818181;
        display: block;
        font-family: 'Segoe UI Historic';
    }

        /* When you mouse over the navigation links, change their color */
        .sidenav a:hover {
            /*color: #f1f1f1;*/
            /*color: #2196F3;*/
            color: #1912e3;
            font-family: 'Segoe UI Historic';
        }

/* Style page content */
.main {
    margin-left: 160px; /* Same as the width of the sidebar */
    padding: 0px 10px;
    font-family: 'Segoe UI Historic';
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 18px;
        }
}

body {
    font-family: "Segoe UI Historic";
}

非常感谢您的反馈。

Answer 1

随机地，基于“试错”方法，我凭经验发现 在 CSS 中将 property width:300px 替换为 width:20% 确实有效。因此，如果可能的话，我很想知道这种随机发现背后的基本原理。