实现标签及布局样式的问题

OBKoro1 发布于2019-08-29 13:44 / 2413人阅读

摘要：要实现下图这个效果问题左上角的边框宽度为，字体大小为下面的文字和间距为。所有元素宽度固定，高度自适应。这时就使用了的缩放。所以就显示了增加蓝色框的的意义，使脱离文档流和文本流，同时占位。

要实现下图这个效果：

问题

左上角label的边框宽度为0.5px，字体大小为15px；下面的文字和label间距为16px。所有元素宽度固定，高度自适应。

解决方案

html代码


    
        
            Lorem ipsum
        
    
    
        Lorem 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";

效果：

我胡汉三又回来了~

请大神指点有没有更好的方法~

云服务器 GPU云服务器布局遇到的问题 android布局的实现样式和布局 iOS书架布局样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112679.html

【CSS练习】IT修真院--练习5-护工个人界面

摘要：任务五一个最常见的移动端页面完成的事情学习张鑫旭世界相关章节张鑫旭系列了解通配符选择器性能优化浏览器渲染原理学习各属性及效果完成任务五学习编码规范编码规范并按照编码规范优化代码完成深度思考计划的事情找时间把前面任务的官方提供链接过一遍，查缺任务五、一个最常见的移动端页面完成的事情 float学习张鑫旭《CSS世界》相关章节张鑫旭 float系列了解CSS通配符 &...

Jonathan Shieber 2019-08-29 15:42 评论0 收藏0
JavaScript 工作原理之十一－渲染引擎及性能优化小技巧

摘要：在中渲染树中的每个节点即是一个渲染器或者渲染器对象。计算的样式每个渲染器对象代表一个矩形区域通常是和一个节点的盒模型相对应。坐标系统是相对于根渲染器的。根渲染器的定位为和大小即为浏览器窗口的可视化部分比如。渲染器作废其在屏幕上的矩形区域。原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。本系列持续更新中，Github 地址请查阅这里。 ...

GraphQuery 2019-08-02 16:03 评论0 收藏0
JavaScript 工作原理之十一－渲染引擎及性能优化小技巧

摘要：在中渲染树中的每个节点即是一个渲染器或者渲染器对象。计算的样式每个渲染器对象代表一个矩形区域通常是和一个节点的盒模型相对应。坐标系统是相对于根渲染器的。根渲染器的定位为和大小即为浏览器窗口的可视化部分比如。渲染器作废其在屏幕上的矩形区域。原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。本系列持续更新中，Github 地址请查阅这里。 ...

Allen 2019-08-22 18:07 评论0 收藏0
JavaScript 工作原理之十一－渲染引擎及性能优化小技巧

摘要：在中渲染树中的每个节点即是一个渲染器或者渲染器对象。计算的样式每个渲染器对象代表一个矩形区域通常是和一个节点的盒模型相对应。坐标系统是相对于根渲染器的。根渲染器的定位为和大小即为浏览器窗口的可视化部分比如。渲染器作废其在屏幕上的矩形区域。原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。本系列持续更新中，Github 地址请查阅这里。 ...

RyanQ 2019-08-30 15:53 评论0 收藏0
HTML+CSS基础课程-imooc-【更新完毕】

摘要：包含后代选择器包含选择器，即加入空格用于选择指定标签元素下的后辈元素。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过进行选择。 6-1 认识CSS样式 CSS全称为层叠样式表 (Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。使用CSS样式的一个好处是通过定义某个样式，可...

Heier 2019-08-01 15:04 评论0 收藏0