day08-寬高自適應
阿新 • • 發佈：2020-12-24
技術標籤：css
文章目錄
寬高自適應屬性
網頁佈局中經常要定義元票的寬和高。但很多時候我們希望元震的大小能夠根據視窗或子元震自動調整。這就是自適應。 自適應的優點:元乘自適應在網頁佈局中非常匣要。它能夠使網頁顯示更靈活。可以適應在不同裝置、不同視窗和不同解析度下顯示。 一、寬商自適應 網頁佈局中經常萎定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元震自動調整，這就是自適應。 (1)寬度自適應元素寬度設定為100%。（塊元素寬度預設為100%) 元素脫離文件流（浮動或絕對定位〉可使元素自適應內容寬度 (2)高度自適應元素的高度自適應:設定如: div {height : auto,} 視窗的高度自適應: 設定: body，htmkheight:100%; } div{height: 30%;}
元素高寬最大、最小值設定
min-height（最小高度)
max-height(最大高度)
min-width(最小寬度)
max-width(最大寬度)
注:IE6及以下版本不識別該組屬性
過濾器（filter）
1_下劃線屬性過濾器 當在一個屬性前面增加了一個下劃線後，由於符合標準的瀏覽器不能識別帶有下劃線的屬性而忽略了這個產明，但是在IE6及更低版本瀏覽器中會繼續解析這個規則。 語法:選擇符{_屬性:屬性值;} 此方法是區分E6瀏覽器和其他瀏覽器的方法; 2)*屬性過濾器當在一個屬性前面增加了*後，該屬效能被IE7及以下瀏覽器識別，其它瀏覽器忽略該屬性的作用。語法:選擇符{屬性:屬性值;} 3) \9:E版本識別;其他瀏覽器都不識別語法:選擇符{屬性:屬性值\9;} 4) \0 :IE8及以上版本識別;其他瀏覽器都不識別 語法:選擇符{屬性:屬性值\0:} 5) !limportant最高權重關字過濾器 它表示所附加的產明具有最高優先順序的意思。被瀏覽器優先顯示。IE6不識別此寫法)語法:選擇符{屬性:屬性值!important；}
浮動元素父元素高度自適應（高度塌陷）
hack1:給父元素新增產明overflow.hidden; -原理:必須定義width或zoom:1，同時不能定義height，使用overilowhidden時，瀏覽器會自動檢查浮動區域的高度 -優點:簡單,程式碼少，瀏覽器支援好 -缺點:不能和position配合使用，因為超出的尺寸的會被隱藏 -建議:只推薦沒有使用position或對overfilow:hidden理解比較深的朋友使用 hack2:給父元素加height -原理:父級div手動定義height，就解決了父級div無法自動獲取到高度的問題 -優點:簡單，程式碼少，容易掌握 -缺點:只適合高度固定的佈局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題 -建議:不推薦使用,只注議高度固定的佈局時使用 hack3:在浮動元素下方新增空div,並給該元素新增 宣告: div{clear:both; height:0; overflow:hidden;,} hack4:萬能清除浮動法 .clear:after{content:".";clearboth;display:block;heightO;overflow.hidden;visibility:hidden}缺點:程式碼多，不易理解,不適合初學者理解原理。 優點:支援性好，各大網站都在用萬能清除浮動
偽物件選擇符||偽元素選擇器
1）、::after: 與content屬性一起使用，定義在物件後的內容。
語法:選擇符:: after{content:"文字} 選擇符::after{contenturl(圖片路徑);}
2)、 ::before:與content屬性—起使用,定義在物件前的內容。
3)、 ::first-letter定義物件內第一個字元的樣式。
說明:*(該偽元素只能用於塊級元素。)
4)、 :.first-line.定義物件內第一行的樣式。
說明:*(該偽元素只能用於塊級元素。)
*ie6以下版本瀏覽器不支援偽物件選擇符
擴充套件知識
內容部分設定:
*visibility.hidden穩藏
*visibility:hidden;和display:none;的區別:
visibility.hidden;,屬性會使物件不可見，但該物件在網頁所佔的空間沒有改變，等於留出了一塊
空白區域，而display.none屬性會使這個物件徹底消失不顯示,也不再佔用位置