CSS定位屬性之間的相互作用

2021-07-06 07:20:54 字數 2675 閱讀 8161

在定位元素時,我們經常用到四個屬性displaypositionfloat和偏移屬性top right bottom left等。但不是在每個元素上都可以同時應用這四個屬性,一些特殊的值組合會覆蓋其他屬性的應用,這些組合有:

接下來,我們就一起來研究這些組合之間如何相互作用。

display設定成none時,其它定位屬性統統失效,因為沒有產生盒模型(the box model)。

.foo

如果將position屬性設定為absolutefixed時,將會產生以下作用:

float屬性設定的任何值都會被覆蓋,float屬性的計算值(the computed value)自動設定為none

.foo

隨著display屬性值的不同,計算值可能會被覆蓋,如下表所示。

指定值計算值

inline, inline-block, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption

block

inline-table

table

其他值跟指定值相同

下面的**中,.foo.bar表現上沒有區別。

.foo

.bar

除了上面兩種情況,當我們把float屬性設定為leftright時,相互作用如下:

跟上面絕對定位、固定定位類似,元素浮動後display屬性變換如上表所示。 

下面**中,.foo.bar的表現效果也一樣。

.foo

.bar

除了上面的變化,當position屬性值為static時,相互作用如下:

當元素靜態定位時,偏移屬性將失效,如下**所示。

.foo

在定位元素時,我們經常用到四個屬性displaypositionfloat和偏移屬性top right bottom left等。但不是在每個元素上都可以同時應用這四個屬性,一些特殊的值組合會覆蓋其他屬性的應用,這些組合有:

接下來,我們就一起來研究這些組合之間如何相互作用。

display設定成none時,其它定位屬性統統失效,因為沒有產生盒模型(the box model)。

.foo

如果將position屬性設定為absolutefixed時,將會產生以下作用:

float屬性設定的任何值都會被覆蓋,float屬性的計算值(the computed value)自動設定為none

.foo

隨著display屬性值的不同,計算值可能會被覆蓋,如下表所示。

指定值計算值

inline, inline-block, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption

block

inline-table

table

其他值跟指定值相同

下面的**中,.foo.bar表現上沒有區別。

.foo

.bar

除了上面兩種情況,當我們把float屬性設定為leftright時,相互作用如下:

跟上面絕對定位、固定定位類似,元素浮動後display屬性變換如上表所示。 

下面**中,.foo.bar的表現效果也一樣。

.foo

.bar

除了上面的變化,當position屬性值為static時,相互作用如下:

當元素靜態定位時,偏移屬性將失效,如下**所示。

.foo

CSS的定位屬性

說到css的定位屬性,首先談一下css的三種定位機制。今天介紹的是第三種定位流,他的定位屬性position有以下幾種情況 1.static 預設值 沒有定位 2.relative 相對定位 參照物 自己所在的位置 特點 如果沒有定位偏移量,對元素本身沒有任何影響,不使元素脫離文件流,空間會被保留,...

物件屬性之間的相互賦值

一 前言 當不同命名空間下的兩個類具有相同的屬性,並且需要進行相互賦值時,如下圖中的jasen.core.info類的例項與jasen.core.test.info類的例項需要相互賦值時,按照一般的思路直接賦值就可以了。通常,這種情況在呼叫web service的時候比較常見。當需要轉換的類很多時,...

蛋白質相互作用位點標籤的獲取方法

目前對蛋白質相互作用位點的 即是判定表面氨基酸中哪些事介面殘基。目前,對介面殘基的定義有兩種 第一種定義,基於氨基酸殘基的可及表面積的變化程度。蛋白質相互作用形成複合物是通過蛋白質與蛋白質之間相互接觸發生相互作用,因此溶劑可及表面積會相應發生變化,我們定義該殘基為介面殘基,是該殘基在形成複合物之後可...