本文探讨了CSS的transform: scale属性在缩放元素时不会减少实际空间的问题，强调该属性对行内元素无效，但适用于块级和原子行内级元素。在设计需求下使用transform: scale会导致内容缩小但占用空间不变。文中提出了两种解决方案：一是通过改变transform-origin来调整变化原点；二是利用zoom属性，它能缩小元素实际占用的空间，并且现在被多数浏览器支持。
首先声明一点，transform: scale对行内元素无效，而对块级元素和原子行内级元素生效等。
在开发中，有时会因满足设计需要而对元素进行整体缩放，transform: scale是现代浏览器都支持的css元素，应该是首选，但它会引发一个问题，虽然可以缩小整体显示的内容，但是并没有引起重排，所以占据的实际空间没有缩小，具体看下面的代码以及图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用scale缩小之后实际空间没有减小的问题解决</title>
<style type="text/css">
i {
font-style: normal;
}
.container {
margin: 100px auto;
display: flex;
align-items: center;
justify-content: center;
min-width: 140px;
padding: 5px 10px 7px;
display: inline-block;
height: 48px;
line-height: 48px;
padding: 0 10px;
text-align: center;
color: #fff;
background: linear-gradient(270deg, rgba(237,8,2,1) 0%,rgba(253,82,22,1) 100%);
border-radius: 30px;
最低0.47元/天 解锁文章
1190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
