使用box-sizing

在CSS中，默认情况下，分配给元素的宽度和高度仅应用于元素的内容框。如果元素具有任何边框或填充，则将其添加到宽度和高度，以获得在屏幕上呈现的框的大小。这意味着当设置宽度和高度时，你必须调整你给的值，以允许添加任何边框或者填充。

使用box-sizing属性可以用来调整这种行为：

content-box:是默认的，并给你默认的CSS盒子大小行为。如果将元素的宽度设置为100像素，则元素的内容框将为100像素宽，任何边框或填充的宽度将被添加到最终的渲染宽度。

border-box:告诉浏览器在您为宽度和高度指定的值中考虑任何边框和填充。如果将元素的宽度设置为100像素，则100个像素将包含您添加的任何边框或填充，并且内容框将缩小以吸收该额外的宽度。这通常使元素的大小更容易。

來自MDN

如果想height和width在最直观的方式表现 并把这段代码放在你的CSS的reset中

html {

    box-sizing: border-box;

}

*, *::before, *::after {

    box-sizing: inherit

}