国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

立即前往

首頁/文章專欄/實現(xiàn)標簽及布局樣式的問題

實現(xiàn)標簽及布局樣式的問題

OBKoro1 發(fā)布于2019-08-29 13:44 / 2441人閱讀

摘要：要實現(xiàn)下圖這個效果問題左上角的邊框?qū)挾葹椋煮w大小為下面的文字和間距為。所有元素寬度固定，高度自適應(yīng)。這時就使用了的縮放。所以就顯示了增加藍色框的的意義，使脫離文檔流和文本流，同時占位。

要實現(xiàn)下圖這個效果：

問題

左上角label的邊框?qū)挾葹?.5px，字體大小為15px；下面的文字和label間距為16px。所有元素寬度固定，高度自適應(yīng)。

解決方案

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的邊框?qū)挾群?5px的字體大小，一般情況下，是不支持的。這時就使用了css3的縮放。且以父元素左上角為縮放原點。

#label{
    width: 100px;
    border: 1px solid black;
    font-size: 30px;
    transform: scale(.5);
    transform-origin: 0 0;
}
.content{
    margin-top: 16px;
}

效果是這樣的

可以看到雖然label進行了縮放，但還占據(jù)了原來的大小的空間。

所以就顯示了增加藍色框的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高度是不定的，怎么設(shè)置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";

效果：

我胡漢三又回來了~

請大神指點有沒有更好的方法~