摘要：要实现下图这个效果问题左上角的边框宽度为，字体大小为下面的文字和间距为。所有元素宽度固定，高度自适应。这时就使用了的缩放。所以就显示了增加蓝色框的的意义，使脱离文档流和文本流，同时占位。
要实现下图这个效果：
问题左上角label的边框宽度为0.5px，字体大小为15px；下面的文字和label间距为16px。所有元素宽度固定，高度自适应。
解决方案html代码
Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusamus ipsa voluptatem rem labore in alias officia, iste molestiae, illum ratione explicabo delectus laborum iusto. Tempore aspernatur, nesciunt excepturi eum.
CSS代码
.parent{
width:300px;
background: goldenrod;
}
#wrapper{
position: relative;
}
#label{
width: 100px;
border: 1px solid black;
font-size: 30px;
transform: scale(.5);
transform-origin: 0 0;
position: absolute;
top: 0;
left: 0;
}
.content{
margin-top: 16px;
}
js代码
var label = document.getElementById("label");
var wrapper = document.getElementById("wrapper");
var labelHeight = window.getComputedStyle(label).height;
wrapper.style.height = parseInt(labelHeight)/2 + "px";
## 心路历程
首先，0.5px的边框宽度和15px的字体大小，一般情况下，是不支持的。这时就使用了css3的缩放。且以父元素左上角为缩放原点。
#label{
width: 100px;
border: 1px solid black;
font-size: 30px;
transform: scale(.5);
transform-origin: 0 0;
}
.content{
margin-top: 16px;
}
效果是这样的
可以看到虽然label进行了缩放，但还占据了原来的大小的空间。
所以就显示了增加蓝色框的wrapper的意义，使label脱离文档流和文本流，同时占位。（float并不能脱离文本流）
进一步的代码是这样的：
#wrapper{
border: 1px solid blue;
position: relative;
}
#label{
width: 100px;
border: 1px solid black;
font-size: 30px;
transform: scale(.5);
transform-origin: 0 0;
position: absolute;
top: 0;
left: 0;
}
.content{
border: 1px solid red;
margin-top: 16px;
}
效果：
哦哟~蓝色框wrapper塌了，怎么占位呢？
label高度是不定的，怎么设置wrapper的高度呢？
只好用js了：
var label = document.getElementById("label");
var wrapper = document.getElementById("wrapper");
var labelHeight = window.getComputedStyle(label).height;
wrapper.style.height = parseInt(labelHeight)/2 + "px";
效果：
我胡汉三又回来了~
请大神指点有没有更好的方法~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112679.html
摘要：任务五一个最常见的移动端页面完成的事情学习张鑫旭世界相关章节张鑫旭系列了解通配符选择器性能优化浏览器渲染原理学习各属性及效果完成任务五学习编码规范编码规范并按照编码规范优化代码完成深度思考计划的事情找时间把前面任务的官方提供链接过一遍，查缺 任务五、 一个最常见的移动端页面 完成的事情 float学习 张鑫旭《CSS世界》相关章节 张鑫旭 float系列 了解CSS通配符 &...
摘要：在中渲染树中的每个节点即是一个渲染器或者渲染器对象。计算的样式每个渲染器对象代表一个矩形区域通常是和一个节点的盒模型相对应。坐标系统是相对于根渲染器的。根渲染器的定位为和大小即为浏览器窗口的可视化部分比如。渲染器作废其在屏幕上的矩形区域。 原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。 本系列持续更新中，Github 地址请查阅这里。 ...
摘要：在中渲染树中的每个节点即是一个渲染器或者渲染器对象。计算的样式每个渲染器对象代表一个矩形区域通常是和一个节点的盒模型相对应。坐标系统是相对于根渲染器的。根渲染器的定位为和大小即为浏览器窗口的可视化部分比如。渲染器作废其在屏幕上的矩形区域。 原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。 本系列持续更新中，Github 地址请查阅这里。 ...
摘要：在中渲染树中的每个节点即是一个渲染器或者渲染器对象。计算的样式每个渲染器对象代表一个矩形区域通常是和一个节点的盒模型相对应。坐标系统是相对于根渲染器的。根渲染器的定位为和大小即为浏览器窗口的可视化部分比如。渲染器作废其在屏幕上的矩形区域。 原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。 本系列持续更新中，Github 地址请查阅这里。 ...
摘要：包含后代选择器包含选择器，即加入空格用于选择指定标签元素下的后辈元素。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过进行选择。 6-1 认识CSS样式 CSS全称为层叠样式表 (Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。使用CSS样式的一个好处是通过定义某个样式，可...
阅读 2476·2021-11-19 09:56
阅读 706·2021-09-24 10:25
阅读 1401·2021-09-09 09:34
阅读 2006·2021-09-09 09:33
阅读 797·2019-08-30 15:54
阅读 431·2019-08-29 18:33
阅读 1144·2019-08-29 17:19
阅读 389·2019-08-29 14:19
