CSS基礎 定位的輔助元素

2021-09-26 02:25:31 字數 1115 閱讀 2296

之前介紹過了定位的元素,以及通過偏移屬性去實現這個定位,這篇文章主要介紹輔助定位實現的其他元素,包括寬度和高度、內容溢位或剪裁、以及元素的可見性

當確定了元素定位到**之後,有時候需要宣告高度和寬度。高度屬性(height)和寬度屬性(width)是非常常見的兩個屬性。當不確定寬度高度又不想超出時,此時可設定最小最大寬度(高度)解決,但需注意的是此時的屬性不可為負

值:| | inherit

初始值:auto

應用於: 除了非替換行內元素和表元素以外的所有元素

繼承性:無

百分數:相對於包含塊的寬度

計算值:對於百分數,根據指定確定;對於長度值,則為絕對長度;否則,則為none

最大寬度(高度)類似;此做法的好處是可以相對安全的混合使用不同的單位

如果乙個元素的內容相對於元素大小來說過大就有可能溢位元素本身

值:visible | hidden | scroll | auto | inherit

初始值:visible

應用於:塊級元素和替換元素

繼承性:無

計算值:根據指定確定

如果值為scroll,元素的內容就會根據元素框的邊界處裁剪,但是會提供滾動條,可供滑動

如果值為hidden,元素的內容會在元素框的邊界處裁剪,超出裁剪框的內容則不可見。

值: rect(top,right,bottom,left) | auto | inherit

初始值:auto

應用於:絕對定位元素(css2中,也應用於塊級元素和替換元素)

繼承性:無

計算值:對於矩形,4個計算長度表示裁剪矩形區域的4個邊;否則,根據指定確定

rect(...)的值不是邊偏移,而是距元素左上角的距離;只允許長度值和auto

除了控制元素的溢位和裁剪,還可以控制元素的可見性(visibility)

值:visible | hidden | collapse | inherit

初始值:visible

應用於:所有元素

繼承性:有

計算值:根據指定確定

不管可見或是不可見,元素都會影響文件的布局。這裡的作用僅僅只是使元素不可見,但不刪除其元素框;其次,元素是具有繼承性的,所以在後代元素中,若出現不一致,必須宣告可見性

CSS 元素的定位

css定位令你可以將乙個元素精確地放在頁面上你所指定的地方。聯合使用定位與浮動 參見第13課 你將能夠建立多種高階而精確的布局。本課我們將討論以下內容 把瀏覽器視窗想象成乙個座標系統 如果我們要把這個標題放置在距文件頂部100畫素 左邊200畫素的地方,我們可以在css中輸入以下 h1 得到的顯示效...

css元素定位

我們可以使用css的position屬性來設定元素的定位型別,postion的設定項如下 relative 生成相對定位元素,元素所佔據的文件流的位置不變,元素本身相對文件流的位置進行偏移 absolute 生成絕對定位元素,元素脫離文件流,不佔據文件流的位置,可以理解為漂浮在文件流的上方,相對於上...

CSS基礎學習10 CSS設定元素的定位

十 css設定元素的定位 css定位可以將乙個元素精確的放在頁面上你所指定的地方。聯合使用定位和float 浮動 可以建立多種高階而精確的布局。1.絕對定位 乙個採用絕對定位的元素不獲得任何空間。這就意味著 該元素在被定位後不會留下空位。value position absolute 然後可以通過屬...