寬高自適應 偽元素

2022-04-16 11:49:09 字數 1299 閱讀 9025

● 寬高自適應

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

○ 寬度自適應:元素寬度設定為100%。(塊元素寬度預設為100%)

○ 高度自適應:元素高度設定為100%(前提給父元素設定高度)

○ min-height(最小高度)

○ max-height(最大高度)

○ min-width(最小寬度)

○ max-width(最大寬度)

注:ie6及以下版本不識別該組屬性。

○ (ie6瀏覽器相容最小高度的寫法)

■ hack1:min-height:value; _height:value;

■ hack2:min-height:value;height:auto!important;height:value;(建議使用)

注:height屬性在ie6裡就類似min-height作用。

● 偽元素

○ 選擇符:after與content屬性一起使用,定義在物件後的內容。

■ 例:div:after

div:after

○ :before與content屬性一起使用,定義在物件前的內容。

■ 例:div:before

○ ::selection使被選中的文字成為紅色(css3新增)

○ :first-letter:定義物件內第乙個字元的樣式。

○ :first-line:定義物件內第一行的樣式。

說明:*(first-letter和first-line該偽元素只能用於塊級元素。)

*ie6以下版本瀏覽器不支援偽物件選擇符。

● 擴充套件

○ 清除浮動

■ left:清除左浮動

■ right清除右浮動

■ both清除左右浮動

○ *乙個元素浮動,乙個元素不浮動時會受影響

同級要浮動都浮動,給不浮動的清除浮動

● 高度自適應

○ 元素高度自適應視窗高度

■ 設定方法:html,body

■ 自適應元素高度:height:100%;

○ 浮動元素父元素高度自適應(高度塌陷)

○ hack1:給父元素新增宣告overflow:hidden;

○ hack2:在浮動元素下方新增空div,並給該元素新增宣告: clear:both;height:0;overflow:hidden;

○ hack3:萬能清除浮動法(建議使用)

:after

元素的寬高自適應

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

寬高自適應

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

寬高自適應

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