html+css关于transform的scale（）缩放产⽣⽩边的问题⾸先是没有进⾏缩放的图
进⾏缩放后
代码：
<style type="text/css">
* {margin: 0px;padding: 0px;}
#i {
width: 300px;
height: 500px;
float: left;
background-color: cornflowerblue;
transform: scale(0.8);
-webkit-transform-origin: 0 0;
}
#m {
float: left;
background-color: aquamarine;
width: 300px;
html里的float是什么意思height: 500px;
}
</style>
</head>
<body>
<!-- 第⼀块 -->
<p id="i">Margo</p>
<!-- 第⼆块 -->
<p id="m">Margo</p>
</body>
  transform布局不会脱离⽂档流，也不改变⽂档流的⼤⼩和位置。
  所以元素还是占据了定义时的⼤⼩
解决⽅法
  我知道的只有两种⽅法
⽅法⼀：
  把被缩放元素的margin改为负值，改的值为：缩放前的值 - (scale()⾥⾯的值*缩放前的值) 即 width = 300-(0.8*300)=60px margin: 0 -60px 0 0;
⽅法⼆：
  这个⽅法⽐⽅法⼀复杂，是我在帮其他⼈布局数据图表时⽆意间发现的，在⽹上没到暂时没到类似的。
  思路就是在被缩⼩的外⾯套⼀层，并设置外⾯层的⼤⼩为⾥层缩放后的⼤⼩
图⽰:⾥⾯层的实际⼤⼩要⽐外⾯层⼤
实线: 为外层，代码中的div标签
虚线: 为⾥层，对应代码中的p标签
假设最⾥层为300x500 缩放的值0.8，则缩放后的⼤⼩为240x400
再加上: -webkit-transform-origin: 0 0; 把最外层的div的⼤⼩设置为缩放后的图像的⼤⼩(240x400)代码：
<style type="text/css">
* {margin: 0px;padding: 0px;}
#one2 {float:left;width: 240px;height: 400px;}
#two2 {float: left;}
/* 第⼀个p标签的css */
#i {
width: 300px;
height: 500px;
background-color: cornflowerblue;
transform: scale(0.8);
-webkit-transform-origin: 0 0;
}
/* 第⼆个p标签的css */
#m {
background-color: aquamarine;
width: 300px;
height: 500px;
}
</style>
</head>
<body>
<!-- 第⼀块 -->
<div id="one2">
<p id="i">Margo</p>
</div>
<!-- 第⼆块 -->
<div id="two2">
<p id="m">Margo</p>
</div>
⼀样的效果(关于两个⽅法各有什么缺点还不清楚)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。