当前位置: 首页 > Web前端 > HTML

内容少时,页面依然可以拖动,解决

时间:2023-03-28 00:00:03 HTML

描述页的问题。当页面内容因需要设置padding而未满时,仍可拖动页面。css属性为box-sizing:border-box;box-sizing详解(来自MDN):在CSS盒子模型的默认定义中,你为一个元素设置的宽度和高度只会应用到这个元素的内容区域。如果元素有任何border或padding,绘制到屏幕时框的宽度和高度将添加到设置的border和padding值。这意味着当你调整一个元素的宽高时,你需要时刻关注这个元素的border和padding。当我们实现响应式布局时,此功能尤其烦人。box-sizing属性可用于调整这些行为:content-box是默认值。如果将元素的宽度设置为100px,则元素的内容区域将为100px宽,所有边框和填充的宽度将添加到最终绘制的元素宽度中。width=内容的宽度height=内容的高度计算宽度和高度都不包括内容的边框和填充。border-box告诉浏览器:你要设置的边框和padding值包含在宽度中。也就是说,如果你将一个元素的宽度设置为100px,那么这个100px就会包括它的border和padding,内容区域的实际宽度就是width减去(border+padding)的值。在大多数情况下,这使得设置元素的宽度和高度变得更加容易。width=border+padding+contentwidthheight=border+padding+contentheight