display和position的值與作用

2021-08-16 08:21:32 字數 885 閱讀 5283

常用的值有none、inline、block、inline-block

1)表示該元素不會顯示,並且該元素的空間也不存在,可理解為已刪除;

2)visibility:hidden只是將元素隱藏,但不會改變頁面布局,

但也不會觸發該元素已經繫結的事件;

3)opacity:0,將元素隱藏,不會改變頁面布局,但會觸發該元素繫結的事件。

1)內聯元素,與其他元素在一行;

2)不可設定寬高;

3)margin-top與margin-bottom無效,但margin-left與margin-right有效;

4)padding-left與padding-right同樣有效,但是padding-top與padding-bottom不會影響元素高度,會影        響背景高度;

5)常見的有、、

、、、。

塊級元素,常見的有

、、position屬性有四個可選值,分別為static、relative、absolute、fixed。

預設值,元素出現在正常的文件流中,不會受left、top、right、bottom的影響。

相對定位,相對自身位置定位,可通過設定left、top、

right、bottom的值來設定位置;

並且它原本所佔的空間不變,即不會影響其他元素布局;

經常被用來作絕對元素的容器塊。

絕對定位,相對於最近的除static定位以外的元素定位,若沒有,則相對於html定位;

脫離了文件流,不佔據文件空間;

若設定absolute,但沒有設定top、left等值,其位置不變;

若設定absolute,會影響未定義寬度的塊級元素,使其變為包裹元素內容的寬度。

固定定位 相對於瀏覽器視窗定位,脫離文件流,不會隨頁面滾動而變化。

CSS的相對定位和絕對定位(position)

定位 position 故名思議,就是確定元素在頁面中的位置。css的常用定位有兩種,一種是相對定位,一種是絕對定位。下面我們看例子 id div0 id div1 id div2 有三個div,其中乙個大的 div0,裡面含有兩個子div,div1和 div2。可以看到,大的黃色 div0,巢狀了...

visibility和display的區別和用法

div的visibility可以控制div的顯示和隱藏,但是隱藏後頁面顯示空白 style visibility none document.getelementbyid typediv1 style.visibility hidden 隱藏 document.getelementbyid type...

display的block和inline屬性

block元素特點 1.處於常規流中時,如果width沒有設定,會自動填充滿父容器 2.可以應用margin padding 3.在沒有設定高度的情況下會擴充套件高度以包含常規流中的子元素 4.處於常規流中時布局時在前後元素位置之間 獨佔乙個水平空間 5.忽略vertical align inlin...