gpt4 book ai didi

html - 为什么元素宽度与 offsetWidth 不匹配?

转载 作者:太空狗 更新时间:2023-10-29 19:34:06 24 4
gpt4 key购买 nike

我尝试使用 nativeElement.offsetWidth 获取元素宽度,但它比实际宽度小 2.5px。我想知道我错过了什么?

我试图检查 DOM 并试图找到 2.5px 的位置,但我无法在任何地方找到它:

export class AppComponent implements OnInit { 
@ViewChild('sidebarSection') sectionContainer:ElementRef;

getNavbarWidth(){
return this.sectionContainer.nativeElement.offsetWidth;
}
}


<body>
<div class='wrapper'>
<div class='row'>
<div class='cell col s3'>
<div #sidebarSection>
<nav-menu></nav-menu>
</div>
</div>
<div class="cell col s9">
<section Id='main'>
<router-outlet>
...
</router-outlet>
</section>
</div>
</div>
</div>

例如,在 devtool 上它显示 329.5px,但 offsetWidth 仅返回 327px。

    .main-nav {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}

.navbar-nav > li > a {
color: wh
}

@media (min-width: 768px) {
/* On small screens, convert the nav menu to a vertical sidebar */
.main-nav {
background-color: #56004e;
height: 100%;
width: calc(25% - 20px);
}
.navbar {
background-color: #56004e;
border-radius: 0px;
border-width: 0px;
height: 100%;
margin-bottom: 0px;
}
.navbar-header {
float: none;
}
.navbar-collapse {
border-top: 1px solid #444;
padding: 0px;
}
}

enter image description here

最佳答案

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

注意:如果您没有使用 css 重置,您肯定需要它来解决这样的问题。

关于html - 为什么元素宽度与 offsetWidth 不匹配?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46071057/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com