CSS在不影響總體布局情況下讓元素自由縮小

2021-10-10 01:35:50 字數 1482 閱讀 3131

開始狀態

>

class

="box1"

>

box1box1div

>

class

="box2"

>

box2box2div

>

class

="box3"

>

box3box3div

>

class

="box4"

>

box4box4div

>

class

="box5"

>

box5box5div

>

body

>

>

.box1

.box2

.box3

.box4

.box5

style

>

效果

要求此時,如果要將class = "box2"的div元素高度由100px變化成50px,而不對總體布局產生變化,即如圖

但是如果這裡單純地讓box2的height變為50px,如

.box2
會得到下圖所示效果,此時box2高度的變化會影響box3 4 5的整體布局

要解決這個問題,可以在class = "box2"的div元素外加一層div元素盒子,把box2的div元素包含在內,然後把該盒子的大小設定為固定值,這樣,改變box2的高度就不會對box3 4 5產生變化,具體實現如下。

>

class

="box1"

>

box1box1div

>

class

="box_0"

>

class

="box2"

>

box2box2div

>

div>

class

="box3"

>

box3box3div

>

class

="box4"

>

box4box4div

>

class

="box5"

>

box5box5div

>

body

>

>

.box1

.box_0

.box2

.box3

.box4

.box5

style

>

同樣的道理,在img元素中也可以如此應用,使得在不影響總體布局的情況下讓改變大小。

CSS改變字型大小而不影響網頁

我們在網頁中使用 css來設定網頁 和字型大小,一般使用的是網路上較流行的9磅字 在css中,我把font size設定成9pt,在顯示設定成小字型時,我們看到的就是小五號字型顯示,但在設定大字型的計算機中就會變成了11磅,網頁自然會亂。css可以識別多種數值單位,一般有兩種確定文字尺寸的常用單位 ...

Vue 評論互不影響

是 true 或者 false 即可。用全域性變數來控制,就會影響其他的,所以這裡單獨為每一條在加乙個屬性 第一部分 為每個屬性單獨增加屬性showcontent getcommentlist page this currentpage then data v for data,index in d...

CSS 設定背景透明度,不影響子元素

由於 opacity 屬效能被子元素繼承,使用它設定父元素背景透明度時也會影響子元素 解決方法 1 使用 rgba example 1 classname 2 使用 opacity,設定乙個背景div,此div使用絕對布局 example 123 content here 4demo 1 docty...