处理CSS宽高需理解盒模型、响应式单位与布局策略；02. 优先设置box-sizing: border-box防止尺寸溢出；03. 避免固定像素，多用rem、%、vw/vh实现响应式；04. 利用min/max宽高控制弹性范围；05. 图片用max-width:100%保持比例；06. 内容高度尽量由内容撑开；07. 元素溢出常因padding/border未计入宽高、长单词不断行或flex子项min-width限制，需通过box-sizing、word-break或调整flex属性解决。
CSS的宽高属性，说起来简单，用起来可真是一门学问。核心在于，别光盯着那几个像素值，得琢磨它们怎么跟盒模型、内容、还有你整个页面的响应式策略打配合。搞不好，页面就崩了，或者维护起来能让你头大。
我们很多时候写CSS，一上来就是
width: 200px; height: 100px;。这当然没错，但要是项目稍微复杂点，或者要考虑移动端，这种固定思维就容易出问题。我的经验是，处理宽高，你得先把自己当成一个建筑师，而不仅仅是画图的。
首先得把盒模型这事儿彻底搞明白。你得清楚
box-sizing: content-box;和
border-box;的区别。默认是
content-box，这意味着你设置的
width只是内容的宽度，padding 和 border 会额外撑开。而
border-box则把 padding 和 border 都包含在
width里，这通常更符合我们直觉。我个人习惯在项目初期就全局设置
box-sizing: border-box;，能省不少心，比如这样：
*, *::before, *::after {
box-sizing: border-box;
}接着，别死盯着
px。响应式时代，
px固然有它的用武之地，但更多时候，我们得学会用
em、
rem、
%、
vw、
vh。
em和
rem适合字体大小和相关元素的相对缩放，特别是
rem，它基于根元素字体大小，更容易控制。
%在父元素有明确尺寸时很好用，但如果父元素尺寸不确定，它也跟着不确定。
vw和
vh直接跟视口挂钩，做全屏或者响应式布局时非常方便。比如一个全屏背景图的容器：
.full-screen-hero {
width: 100vw;
height: 100vh;
/* 或者 min-height: 100vh; 根据需求选择 */
}还有
min-width、
max-width、
min-height、
max-height这对搭档，它们是弹性布局的守护神。你可能想让一个元素宽度不超过某个值，但又不能低于某个值，这时候就得靠它们。比如
max-width: 100%;是图片响应式处理的经典手法，防止图片撑破容器：
立即学习“前端免费学习笔记（深入）”；
img {
max-width: 100%; /* 图片宽度不会超过父容器 */
height: auto; /* 保持图片比例 */
}别忘了让内容自己决定大小。很多时候，我们不需要显式设置
height，让内容撑开就好。除非有特殊布局需求，比如固定高度的卡片，不然
height: auto;或者干脆不设置
height，反而是更稳妥的选择。如果内容溢出，
overflow属性就登场了，
hidden、
scroll、
auto，根据需求选择。但更好的做法是，尽量通过合理的布局和断点设计来避免内容溢出。
创想商务B2B网站橙色模板
下载
创想商务B2B网站管理系统（橙色风格版）V3.0 注意事项：该风格模板基于创想商务B2B网站管理系统（v3.0）使用。 部分特色功能如下： 1、一健在线安装 ： 2、商铺独立二级域名： 3、阶梯价批发： 4、零售商城： 5、会员等级自由转换： 6、在线交易： 7、会员商家多方位推广： 8、多种赢利模式： 9、分类多属性关联： 10、自主风格模板设计： 11、HTML静态化处理： 12、灵活SEO
为什么我的元素设置了宽度，却还是会溢出？
这问题我遇到过太多次了，也听过无数同行抱怨。你明明给了个
width: 200px;，结果内容还是跑出去了，是不是很抓狂？这背后的原因其实挺多的，不光是
width本身的问题。
最常见的一个坑就是
box-sizing。如果你用的是默认的
content-box，那么你设置的
width仅仅是内容区域的宽度。如果你又加了
padding或者
border，比如
padding: 10px; border: 1px solid red;，那么元素的实际总宽度就会变成
200px + 10px*2 + 1px*2 = 222px。这多出来的 22px 自然就可能导致溢出。所以，前面提到的全局
box-sizing: border-box;就显得尤为重要，它能让你的
width和
height包含 padding 和 border，更符合直觉。
再一个原因可能是文本内容。如果你的文本是一长串没有空格的单词或URL，比如
thisisareallylongwordthatwontbreak，CSS默认是不会在单词中间断行的，除非遇到空格或连字符。这时候，即使容器宽度足够，这个超长的单词也会撑破容器。解决方法通常是使用
word-break: break-all;或
overflow-wrap: break-word;来强制断行。
.overflow-text-container {
width: 200px;
border: 1px solid #ccc;
word-break: break-all; /* 或者 overflow-wrap: break-word; */
}还有一种情况，如果你在使用 Flexbox 或 Grid 布局，子项默认的
min-width是
auto，这表示它会尝试适应其内容的最小尺寸。如果子项内容本身就很宽，即使父容器设置了
width，子项也可能因为
flex-shrink默认为 1 而不会缩小到足以适应父容器，或者说，它的
min-width阻止了它缩小。这时候你可能需要显
