HTML5中精确控制元素尺寸需用CSS，主要方法有五种：一、width/height设内容区尺寸；二、max-width/min-height设尺寸边界；三、box-sizing:border-box含padding与border；四、vw/vh依视口动态缩放；五、CSS变量配合calc()灵活计算。
如果您希望在HTML5中精确控制某个元素的宽度、高度或其他尺寸相关属性，则需要通过CSS样式进行设置。以下是几种常用的CSS样式控制元素尺寸的方法：
一、使用width和height属性
width和height是最直接控制块级元素内容区域宽高的CSS属性，适用于div、section等常规容器。该方法仅影响内容框尺寸，不包含内边距、边框和外边距。
1、在CSS中选中目标元素，例如通过类名或ID选择器。
2、为该元素设置width属性，值可为像素（px）、百分比（%）、em、rem等单位。
立即学习“前端免费学习笔记（深入）”；
3、为该元素设置height属性，单位类型与width一致。
4、若需确保width/height生效于行内元素（如span），需先将其display属性设为block或inline-block。
二、使用max-width和min-height组合约束
当需要限制元素尺寸上下限时，max-width和min-height可防止内容拉伸过度或压缩过小，常用于响应式布局中保持视觉一致性。
1、为元素设置max-width，例如max-width: 800px，确保其宽度不超过指定值。
2、为同一元素设置min-height，例如min-height: 200px，保证其高度不低于设定值。
3、若同时设置width为百分比（如width: 100%），则max-width将作为实际宽度上限生效。
三、使用box-sizing改变尺寸计算方式
CSS默认采用content-box模型，即width/height仅指内容区，而padding和border会额外增加总占用空间。切换为border-box后，width/height将包含内容、内边距与边框，更符合直观尺寸预期。
1、为目标元素添加CSS声明：box-sizing: border-box。
2、该声明可配合通配符全局应用：* { box-sizing: border-box; }。
3、注意IE8及以上版本才支持该属性，旧版IE需加-ms前缀（-ms-box-sizing）。
四、使用vw、vh等视口单位动态设定
vw（viewport width）和vh（viewport height）以视口宽度或高度的1%为单位，适合创建全屏适配或比例固定型布局，无需JavaScript即可实现响应式尺寸控制。
1、设置元素宽度为视口宽度的50%：width: 50vw。
2、设置元素高度为视口高度的80%：height: 80vh。
3、可与其他单位混用，例如max-width: 90vw避免超宽显示。
五、使用CSS自定义属性配合calc()函数计算尺寸
通过CSS变量定义基础数值，再结合calc()执行加减乘除运算，可实现灵活且可维护的尺寸逻辑，尤其适合主题化或动态配置场景。
1、在:root中定义变量，例如--base-size: 16px。
2、在元素样式中使用calc()，例如width: calc(var(--base-size) * 4)得到64px宽。
3、支持混合单位运算，例如height: calc(100vh - 60px)减去固定头部高度。
