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

2021-09-14 05:54:46 字數 1354 閱讀 3083

要實現下圖這個效果:

左上角label的邊框寬度為0.5px,字型大小為15px;下面的文字和label間距為16px。所有元素寬度固定,高度自適應。

html**

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

position: relative;

}#label

.content

js**

var label = document.getelementbyid('label');

var labelheight = window.getcomputedstyle(label).height;

## 心路歷程

首先,0.5px的邊框寬度和15px的字型大小,一般情況下,是不支援的。這時就使用了css3的縮放。且以父元素左上角為縮放原點。

#label

.content

效果是這樣的

可以看到雖然label進行了縮放,但還佔據了原來的大小的空間。

border: 1px solid blue;

position: relative;

}#label

.content

效果:

var label = document.getelementbyid('label');

var labelheight = window.getcomputedstyle(label).height;

效果:

我胡漢三又回來了~

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

標籤的屬性及樣式

用簡單的 hr 語句就能實現多樣化的分割效果 最基本的 其中 width 規定線條的長度,還可以是百分比 color 表示顏色,size 表示厚度 align 規定線條位置,有left right center noshade 表示是否有立體效果。兩頭漸變透明 右邊漸變透明 畫虛線 畫雙線 立體效果...

文字標籤及樣式

一 文字標籤 二 列表 在html網頁中一共有三種列表 無序列表 使用ul標籤來建立乙個無序列表。使用li在ul中建立乙個乙個的列表項。乙個li就是乙個列表項。通過type屬性可以修改無序列表的專案符號。可選值 disc,預設值,實心圓點。square,實心方塊。circle,空心圓。ul有序列表 ...

文字標籤及樣式

目錄 1 文字標籤 1.1em strong 1.2 i和b 1.3 small 1.4 cite 1.5 blockquote 和q 1.6 sup和sub 1.7 ins和del 1.8 code和pre 1.9 有序列表 1.10 無序列表 1.11 定義列表 2.文字格式化 2.1 文字大小...