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

資訊專欄INFORMATION COLUMN

實現標簽及布局樣式的問題

OBKoro1 / 2437人閱讀

摘要：要實現下圖這個效果問題左上角的邊框寬度為，字體大小為下面的文字和間距為。所有元素寬度固定，高度自適應。這時就使用了的縮放。所以就顯示了增加藍色框的的意義，使脫離文檔流和文本流，同時占位。

要實現下圖這個效果：

問題

左上角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";

效果：

我胡漢三又回來了~

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112679.html

相關文章

  • 【CSS練習】IT修真院--練習5-護工個人界面

    摘要：任務五一個最常見的移動端頁面完成的事情學習張鑫旭世界相關章節張鑫旭系列了解通配符選擇器性能優化瀏覽器渲染原理學習各屬性及效果完成任務五學習編碼規范編碼規范并按照編碼規范優化代碼完成深度思考計劃的事情找時間把前面任務的官方提供鏈接過一遍，查缺 任務五、 一個最常見的移動端頁面 完成的事情 float學習 張鑫旭《CSS世界》相關章節 張鑫旭 float系列 了解CSS通配符 &...

    Jonathan Shieber 評論0 收藏0

  • JavaScript 工作原理之十一－渲染引擎及性能優化小技巧

    摘要：在中渲染樹中的每個節點即是一個渲染器或者渲染器對象。計算的樣式每個渲染器對象代表一個矩形區域通常是和一個節點的盒模型相對應。坐標系統是相對于根渲染器的。根渲染器的定位為和大小即為瀏覽器窗口的可視化部分比如。渲染器作廢其在屏幕上的矩形區域。 原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。 本系列持續更新中，Github 地址請查閱這里。 ...

    GraphQuery 評論0 收藏0

  • JavaScript 工作原理之十一－渲染引擎及性能優化小技巧

    摘要：在中渲染樹中的每個節點即是一個渲染器或者渲染器對象。計算的樣式每個渲染器對象代表一個矩形區域通常是和一個節點的盒模型相對應。坐標系統是相對于根渲染器的。根渲染器的定位為和大小即為瀏覽器窗口的可視化部分比如。渲染器作廢其在屏幕上的矩形區域。 原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。 本系列持續更新中，Github 地址請查閱這里。 ...

    Allen 評論0 收藏0

  • JavaScript 工作原理之十一－渲染引擎及性能優化小技巧

    摘要：在中渲染樹中的每個節點即是一個渲染器或者渲染器對象。計算的樣式每個渲染器對象代表一個矩形區域通常是和一個節點的盒模型相對應。坐標系統是相對于根渲染器的。根渲染器的定位為和大小即為瀏覽器窗口的可視化部分比如。渲染器作廢其在屏幕上的矩形區域。 原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。 本系列持續更新中，Github 地址請查閱這里。 ...

    RyanQ 評論0 收藏0

  • HTML+CSS基礎課程-imooc-【更新完畢】

    摘要：包含后代選擇器包含選擇器，即加入空格用于選擇指定標簽元素下的后輩元素。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是通過進行選擇。 6-1 認識CSS樣式 CSS全稱為層疊樣式表 (Cascading Style Sheets)，它主要是用于定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。使用CSS樣式的一個好處是通過定義某個樣式，可...

    Heier 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<