处理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
，根据需求选择。但更好的做法是，尽量通过合理的布局和断点设计来避免内容溢出。
Android ViewGroup使用注意事项 WORD版
本文档主要讲述的是Android ViewGroup使用注意事项；ViewGroup是View的子类，所以它也具有View的特性，但它主要用来充当View的容器，将其中的View视作自己的孩子，对它的子View进行管理，当然它的孩子也可以是ViewGroup类型。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
0 查看详情
为什么我的元素设置了宽度，却还是会溢出？
这问题我遇到过太多次了，也听过无数同行抱怨。你明明给了个
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
阻止了它缩小。这时候你可能需要显
以上就是css宽高属性使用注意事项的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1066652.html
微信扫一扫 
支付宝扫一扫 
