透明和寬高自適應

2021-10-02 14:00:17 字數 1760 閱讀 7368

1.透明屬性

ie瀏覽器寫法:filter:alpha(opacity=value);取值範圍0-100

相容其他寫法:opacity=value;取值範圍0-1

(1)swf檔案引入

"value" height="value">

"movie" value="flash路徑及全稱" />或

"flash路徑及全稱" wmode="transparent">

(2)內聯框架(html格式的引入)

"" scrolling="no" frameborder="0">

src url 規定在iframe中是否顯示的文件的url

scrolling yes/no 規定是否在iframe中顯示的滾動條

frameborder 0/1 規定是否顯示框架的邊框

(3)滾動字幕

"scroll(滾動)/alternate(晃動)" direction="up(從下向上)/left(從右向左)/down(從上向下)/right(從左向右)"

scrollmount

(滾動速度)="value" height="value(上下滾動範圍)" width="value(左右滾動範圍)">內容

3.寬高自適應

(1)什麼是寬高自適應:乙個容器的大小可以隨著盒子元素或者瀏覽器視窗進行變化。

(2)寬度自適應:寬度不寫,寬度的單位用%,使用min-width/max-width(最後一種方法ie6不相容,需要除錯)

(3)高度自適應:預設情況下,height用%是不生效的,需要給body,html

高度不寫存在問題:

父元素高度塌陷:所有的子元素浮動並且父元素沒有設定高度,這個時候最近的父元素會高度塌陷=>

a.給父元素新增overflow:hidden;zoom:預設是1,不能是負值,比一大是放大,比1小是縮小,僅僅是視覺上的放大和縮小。但不適合和定位定出去的效果一起使用。

b.給浮動元素的最後面新增乙個空的標籤,比如div,並新增宣告

,但頁面會出現很多無用的div,造成**的冗餘

c.萬能清除法

父元素:after

父元素:zoom:1

4.顯示與隱藏

display:none

visibility:hidden只是隱藏內容但是位置還在

visibility:visible可見

opacity:0

5.最小高度相容

min-height屬性:最小高度,ie6瀏覽器不識別該屬性

相容元素具備最小高度自適應的方法:hack1:min-height:value;_height

:value;

hack2

:min-height

:value;

height

:auto!important;

height

:value 建議使用,不能更改順序

6.過濾器

(1)下劃線屬性過濾器

選擇符選擇符

高版本最高優先順序,ie6及更低版本不能識別他

(3)\9

選擇符ie瀏覽器組識別

(4)\0

選擇符ie8及以上使用

(5)+或*

選擇符ie7及以下識別

(6):root選擇器

:root選擇器

除了ie8及更早的瀏覽器識別

寬高自適應

網頁布局中經常要定義元素的寬和高。但是很多時候我們希望元素的大小能夠根據視窗或子元素自動調整,這就是自適應 元素自適應在網頁布局中非常重要,他能夠使網頁顯示更加靈活,可以適應在不同裝置 不同視窗和不同解析度下顯示 1.寬度自適應 元素寬度設定為100 塊元素寬度預設為100 2.元素具備最小高度的自...

寬高自適應

寬高自適應 靈活 網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整,這就是pc自適應。自適應的優點 元素自適應在網頁布局中非常重要,它能夠使網頁顯示更靈活,可以適應在不同裝置 不同視窗和不同解析度下顯示。一 相對視窗和父元素的自適應寫法 寬度 width 1...

寬高自適應

寬高自適應可以使得網頁更加靈活,適應在不同的裝置不同解析度下。一 pc端寬高自適應 相對視窗或者父元素的自適應情況 寬度自適應 width 100 預設情況下,不新增定位時 寬度自適應的比例,是參照父元素的寬度進行顯示的,也就是說,如果元素的父元素是整個頁面的話,顯示的時候就是鋪滿整個螢幕 如果當父...