一:clear
語法:
clear : none | left |right | both
引數:
none : 允許兩邊都可以有浮動物件
both : 不允許有浮動物件
left : 不允許左邊有浮動物件
right : 不允許右邊有浮動物件
說明:
該屬性的值指出了不允許有浮動物件的邊。請參閱float屬性。
對應的指令碼特性為clear。請參閱我編寫的其他書目。
示例:
div
img
二:float
語法:
float : none | left |right
引數:
none : 物件不浮動
left : 物件浮在左邊
right : 物件浮在右邊
說明:
該屬性的值指出了物件是否及如何浮動。請參閱clear屬性。
當該屬性不等於none引起物件浮動時,物件將被視作塊物件(block-level),即display屬性等於block。也就是說,浮動物件的display特性將被忽略。
對應的指令碼特性為stylefloat。請參閱我編寫的其他書目。
示例:
div
img
三:clip
語法:
clip : auto | rect ( number number number number )
引數:
auto : 物件無剪下
rect ( number number number number ) : 依據上-右-下-左的順序提供自物件左上角為(0,0)座標計算的四個偏移數值,其中任一數值都可用auto替換,即此邊不剪下
說明:
檢索或設定物件的可視區域。區域外的部分是透明的。
必須將position的值設為absolute,此屬性方可使用。
自ie5開始,此屬性在mac平台上可用。
對應的指令碼特性為clip。請參閱我編寫的其他書目。
示例:
div
div
四:overflow
語法:
overflow : visible | auto | hidden | scroll
引數:
visible : 不剪下內容也不新增滾動條。假如顯式宣告此預設值,物件將被剪下為包含物件的window或frame的大小。並且clip屬性設定將失效
auto : 此為body物件和textarea的預設值。在需要時剪下內容並新增滾動條
hidden : 不顯示超過物件尺寸的內容
scroll : 總是顯示滾動條
說明:
檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。
設定textarea物件為hidden值將隱藏其滾動條。
對於table來說,假如table-layout屬性設定為fixed,則td物件支援帶有預設值為hidden的overflow屬性。如果設為hidden,scroll或者auto,那麼超出td尺寸的內容將被剪下。如果設為visible,將導致額外的文字溢位到右邊或左邊(視direction屬性設定而定)的單元格。
自ie5開始,此屬性在mac平台上可用。
對應的指令碼特性為overflow。請參閱我編寫的其他書目。
示例:
body
div
五:overflow-x
語法:
overflow-x : visible | auto | hidden | scroll
引數:
visible : 不剪下內容也不新增滾動條。假如顯式宣告此預設值,物件將被剪下為包含物件的window或frame的寬度。並且clip屬性設定將失效
auto : 此為body物件和textarea的預設值。在需要時剪下內容並新增滾動條
hidden : 不顯示超過物件寬度的內容
scroll : 總是顯示橫向滾動條
說明:
檢索或設定當物件的內容超過其指定寬度時如何管理內容。
參閱overflow屬性。
對應的指令碼特性為overflowx。請參閱我編寫的其他書目。
示例:
body
div
六:overflow-y
語法:
overflow-y : visible | auto | hidden | scroll
引數:
visible : 不剪下內容也不新增滾動條。假如顯式宣告此預設值,物件將被剪下為包含物件的window或frame的高度。並且clip屬性設定將失效
auto : 此為body物件和textarea的預設值。在需要時剪下內容並新增滾動條
hidden : 不顯示超過物件高度的內容
scroll : 總是顯示縱向滾動條
說明:
檢索或設定當物件的內容超過其指定高度時如何管理內容。
參閱overflow屬性。
對應的指令碼特性為overflowy。請參閱我編寫的其他書目。
示例:
body
div
七:display
語法:
display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
引數:
block : css1 塊物件的預設值。用該值為物件之後新增新行
none : css1 隱藏物件。與visibility屬性的hidden值不同,其不為被隱藏的物件保留其物理空間
inline : css1 內聯物件的預設值。用該值將從物件中刪除行
compact : css2 分配物件為塊物件或基於內容之上的內聯物件
marker : css2 指定內容在容器物件之前或之後。要使用此引數,物件必須和:after及:before 偽元素一起使用
inline-table : css2 將**顯示為無前後換行的內聯物件或內聯容器
list-item : css1 將塊物件指定為列表專案。並可以新增可選專案標誌
run-in : css2 分配物件為塊物件或基於內容之上的內聯物件
table : css2 將物件作為塊元素級的**顯示
table-caption : css2 將物件作為**標題顯示
table-cell : css2 將物件作為**單元格顯示
table-column : css2 將物件作為**列顯示
table-column-group : css2 將物件作為**列組顯示
table-header-group : css2 將物件作為**標題組顯示
table-footer-group : css2 將物件作為**腳注組顯示
table-row : css2 將物件作為**行顯示
table-row-group : css2 將物件作為**行組顯示
說明:
設定或檢索物件是否及如何顯示。
目前 ie5.5僅支援以上css1的引數。
對應的指令碼特性為display。請參閱我編寫的其他書目。
示例:
img
八:visibility
語法:
visibility : inherit | visible | collapse | hidden
引數:
inherit : 繼承上乙個父物件的可見性
visible : 物件可視
hidden : 物件隱藏
collapse : 主要用來隱藏**的行或列。隱藏的行或列能夠被其他內容使用。對於**外的其他物件,其作用等同於hidden。ie5.5尚不支援此屬性。
說明:
設定或檢索是否顯示物件。與display屬性不同,此屬性為隱藏的物件保留其佔據的物理空間。
如果希望物件為可視,其父物件也必須是可視的。
對應的指令碼特性為visibility。請參閱我編寫的其他書目。
示例:
img
Web開發之Layout布局
布局種類 頁面布局的幾種方式 靜態化布局 流式布局 自適應布局 響應式布局 彈性布局 使用建議 1.如果只做pc端,那麼靜態布局 定寬度 是最好的選擇 2.如果做移動端,且設計對高度和元素間距要求不高,那麼彈性布局 rem js 是最好的選擇,乙份css 乙份js調節font size搞定 3.如果...
微信小程式css篇 布局 Layout
一 布局有以下幾種 display,float,clear,visibility,overflow,overflow x,overflow y。1.display 設定物件是否顯示。2.float 指出物件是否及如何浮動。3.clear 指出了不允許有浮動物件的邊。4.visibility 是否隱藏...
css布局之flex布局
網頁布局 layout 是css的乙個重點應用。布局的傳統解決方案,基於盒狀模型,依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便,比如,垂直居中就不容易實現。2009年,w3c提出了一種新的方案 flex布局,可以簡便 完整 響應式地實現各種頁面布局。目...