CSS屬性探秘系列 五 min width

2022-09-24 22:42:15 字數 1228 閱讀 6381

一、基本含義

min-width 屬性為給定元素設定最小寬度。它可以阻止 width 屬性的應用值小於 min-width 的值。min-width 的值會同時覆蓋 max-width 和 width。

二、可取值

常用百分比、固定px|em|ex等,其他屬性值如max-content,min-content相容性很不好。

divdiv

三、相容性

ie7+,常用現代瀏覽器,關於ie6的相容處理,建議使用js控制,ie6將逐漸退出前端舞台。

四、應用

常用在百分比寬度布局中,縮放瀏覽器視窗,以免視窗很小時影響頁面的布局 美觀。

相關屬性:max-width,min-ibbeczxheight,max-height

我們在做布局設計程式設計客棧時,經常有這樣的布局,兩邊或者一邊是導航類工具欄 程式設計客棧,中間是內容區域。

但我們希望中間的內區域能夠自動適應,隨著不同的解析度和瀏覽器的大小自動適應高度和寬度,以獲得較好的顯示效果。

我們假設中間的內容區域是個div,如果我們不明確設定它樣式的width屬性,它是可以自動適應的,按說這滿足了要求。

但是當瀏覽器的寬度過小時,小到已經不能整齊的顯示我們的內容,頁面的顯示就會混亂不堪。

這時我們可以為該內容div設定乙個min-width,比如在css中:

複製**

**如下:

#content

這個屬性的功能就像它的名字一樣簡單:最小寬度。該div還是自動適應寬度,但它多了個條件,當它自適應的寬度小於設定的最小寬度時,就會把該div的寬度設定為最小寬度,不再自動適應。

這個屬性在firefox和ie7中是可以使用的,但在ie6中不支援,我們可以用下面這段**代替:

複製**

**如下:

#content

前面的這段:

複製**

**如下:

((document.compatmode && document.compatmode=='css1compat')? document.documentelement.clientwidth : document.body.clientwidth) < 700

只是個判定條件,判定頁面body的寬度,這裡的是,如果頁面body的寬度小於700(這個要根據具體的頁面來指定),就把content的寬度指定為600,否則就讓它自適應寬度。

其實min-height也同理!

本文位址: /web/css/82926.html

CSS屬性探秘系列 三 line height

一 line height的定義line height 行高 相鄰文字行基線間的距離。那什麼是基線呢?對於文字 benjamin xx工程師 來說基線 base line 並不是漢字文字的下端沿,而是英文本母 x 的下端沿。二 line height理解有的時候我們會遇到,不給盒子設定寬度,只設定行...

BizTalk開發系列 五 屬性字段

biztalk 開發系列 在根據訊息內容進行路由的時候經常使用的是可分辨欄位和屬性字段。屬性字段可以在各個 biztalk server 元件 包括管道和業務流程 中進行訪問。屬性欄位還可用於訊息路由。如果需要在上下文 而不是在業務流程 中訪問公升級的訊息資料,必須建立乙個或多個屬性架構來描述要公升...

CSS系列之文字屬性

css text 文字 屬性可定義文字的外觀,比如文字的顏色 對齊文字 裝飾文字 文字縮排 行間距等。文字顏色 color 屬性用於定義文字的顏色,可使用顏色名稱,十六進製制值,rgb 來定義顏色,示例 bodyh1p style text align 屬性用於設定元素內文字內容的水平對齊方式。h1...