css樣式設定引起的元素脫離正常文件流的情況

2021-10-09 04:18:38 字數 932 閱讀 1459

1.position為relative,absolute,fixed的元素

1.1 relative可以認為是半脫離,因為其在正常流中的位置仍然保留,但是定位後的位置是脫離文件流的,即可能遮擋其他元素

1.2 absolute和fixed是完全脫離文件流,即文件沒有給他們佔位置,所以在這種定位的元素後增加的某些元素可能會被遮擋,當此定位元素的面積較大時,甚至可能出現後面的某些元素完全被遮擋,得到意外的效果。這種情況可以設定父元素為relative,並且設定寬高(如果不主動設定寬高,裡面定位為absolute和fixed的元素並不會撐起元素的面積,如果全是這兩種定位的子元素,那麼父元素的面積為0*0)

2.float:left/right的元素

浮動的元素可以認為是半脫離的,其他元素遇到浮動的元素會忽略它的存在,即沒有浮動元素時,它該在哪一行現在仍在哪一行(除非浮動元素或後面的元素寬度較長,導致換行),但是會把浮動元素的位置留出來,舉例,

結果:

另外浮動的元素不會撐起其父元素的高度,如下圖div.parent1有乙個樣式為float:left的子元素,該子元素有高度,但其父元素高度為0

所以當我們沒有給父元素設定高度,而子元素又都是浮動元素時,就可能會使父元素的兄弟元素占領本該是父元素的位置,得到意外效果。

css元素特殊選擇器樣式設定

後代選擇器 h1 em子元素選擇器 如果您不希望選擇任意的後代元素,而是希望縮小範圍,只選擇某個元素的子元素,請使用子元素選擇器 child selector 例如,如果您希望選擇只作為 h1 元素子元素的 strong 元素,可以這樣寫 h1 strong 例子 結果就是第一行得第乙個,第二個ve...

css行內樣式的屬性設定,css的外部樣式的設定

15 行內樣式 行內樣式1 是通過標籤的 style 屬性來設定元素的樣式 格式 標籤 style css樣式 示例 字型內容 多個樣式之間用 分號隔開 乙個樣式多個屬性用空格分開 適用於針對性的修改某乙個標籤的樣式 行內樣式2 通過 html 標籤來設定元素的樣式 適用於頁面中進行的復用。對同一類...

獲取元素css樣式的方法

getcomputedstyle 元素 屬性名 ie不相容 currentstyle 只有ie相容 function getcss curele,attr else function getcss curele,attr catch e box style width 800px div let b...