CSS布局物件之Layout 用法介紹

2021-06-06 14:37:15 字數 4373 閱讀 2440

一: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布局,可以簡便 完整 響應式地實現各種頁面布局。目...