week7 10月23日 DIV布局定位(一)

2021-07-06 02:25:01 字數 3712 閱讀 8074

一、複習

1、div邊框的設定屬性

2、屬性不同個數屬性值的賦值方式

二、新課

(一)布局定位屬性position

布局就是將元素放置在頁面的指定位置,聯合使用定位、浮動可建立按列布局、重疊、**等多種布局效果。

css有三種布局機制:

普通文件流就是由瀏覽器自動定位,預設從上到下依次排列html文件中的元素。

1、元素的定位樣式css可以對任何元素進行定位,可以按瀏覽器視窗或父元素的座標定位,也可以相對自己原來的位置定位。 

樣式屬性

取值和描述

position:定位方式;

應配合left、right、top、bottom使用

static(預設)自動定位

relative 相對定位

absolute絕對定位

fixed      固定定位

left:      左側偏移量或座標;

必須配合position使用

right:   右側偏移量或座標;

必須配合position使用

top:      頂端偏移量或座標;      

必須配合position使用

bottom:下端偏移量或座標;

必須配合position使用

clip:裁剪形狀;

—僅用於絕對定位元素

auto不裁剪(預設)

rect(top, right, bottom, left) 指定矩形

1)自動定位 static

自動定位(預設方式):position:static;

自動定位就是元素在頁面普通文件流中由html自動定位,普通文件流中的元素也稱為流動元素。

自動定位的塊級元素若不設定大小,則寬度預設為瀏覽器頁面寬度、高度自適應所包含內容的高度。

自動定位時top、bottom、left、right設定無效。

2)絕對定位 absolute

絕對定位:position:absolute;

絕對定位是將元素依據已經定位(絕對、固定或相對定位)的父元素進行定位,父元素沒有定位或沒有父元素則預設依據body瀏覽器視窗定位。

絕對定位的元素不論本身是什麼型別,定位後都將成為乙個新的塊級盒框,如果未指定寬度高度預設自適應實際包含的內容區域(不再預設瀏覽器寬度)。定位後將重疊覆蓋新位置的原有元素,它原來在正常文件流中所佔的空間同時被關閉,就是說絕對定位的元素不佔據頁面空間,原空間被後繼元素使用。

絕對定位必須用left、right、top、bottom屬性之一啟用,用於指定元素左、右、上、下外邊距距離已定位父元素(或瀏覽器)左、右、上、下內邊框的距離,或者說用已定位父元素對應邊框向中心的偏移量作為定位元素對應邊的位置。

如果定義多個屬性,當left、right衝突時以left為準,當top、bottom衝突時以top為準,如果乙個也不指定則元素仍按普通文件流布局,但它自己不再佔據空間,後續元素上移與其重疊。

絕    對定位元素定位後相對父元素的位置不再變化,若頁面內容較多拖動頁面滾動時,定位元素會隨頁面一起滾動。

絕對定位元素重疊覆蓋其他元素時可用z-index屬性設定它們的疊放次序。

注意:若直接父元素不定位時,子元素將依據再上級已定位的某個父元素(或瀏覽器)絕對定位,頁面調整時定位子元素相對直接父元素的位置將會發生變化。因此如果直接父元素不需要定位,而子元素必須根據直接父元素絕對定位時,可將父元素設定為相對定位但不設偏移量(不失去空間也不影響位置)即可保證子元素依據直接父元素準確定位。 

3)絕對定位元素的裁剪clip

clip:

裁剪形狀;

clip屬性僅對絕對定位的元素設定被裁剪時的形狀,裁剪掉不需要的部分或指定顯示區域,當元素(如影象)實際尺寸大於clip指定區域時只顯示clip區域的內容,等同於指定區域並設定overflow:hidden的效果。

裁剪形狀屬性值:

auto不裁剪(預設)由瀏覽器設定元素的形狀  

rect(top, right, bottom, left)指定矩形區域為裁剪後保留區域

inherit指定從父元素繼承clip屬性—直到ie8目前都不支援

clip屬性目前只能指定按矩形區域裁剪,top, right, bottom, left分別為顯示區域按順時針對應四邊距離被裁剪元素左上角(0,0)的距離,或者理解為元素顯示的矩形區域左上角(left, top)及右下角(right, bottom)座標。

top, right, bottom, left可以是任意帶單位的數值、也可以是被裁剪元素對應邊長的百分比%,取值0或auto表示該邊不裁剪。如果指定的剪裁區域大於元素實際區域則不裁剪。

4)固定定位fixed

固定定位:position:fixed;

固定定位與絕對定位absolute相似,定位後元素也生成為新塊級盒框、覆蓋新位置原有元素,在正常文件流中所佔的原空間關閉—被後繼元素使用。

固定定位與絕對定位absolute的區別是定位的元素無論父元素是否定位都會直接在瀏覽器視窗中定位—不會隨滾動條拖動頁面而滾動,固定定位用left、right、top、bottom指定瀏覽器左、右、上、下各邊向中心的偏移量作為定位元素外邊距位置

例如在瀏覽器四個角各放置乙個width:40px; height:40px;的矩形盒框:

position:fixed;top:50px; left:50px;           左上角定位

position:fixed;top:50px; right:50px;        右上角定位

position:fixed;bottom:50px; right:50px; 右下角定位

position:fixed;bottom:50px; left:50px;     左下角定位

注意:ie6及以下版本不支援position:fixed固定定位。

5)相對定位relative

相對定位:position:relative;

相對定位是讓元素(可以是行內元素)相對於它在正常文件流原位置按left、right、top和bottom偏移量移動到新位置。

相對定位的元素移動後保持原外觀樣式大小、移動定位後不會佔據新空間會覆蓋新位置原有元素,原位置空間被保留,其他元素相對它原來的位置不變。

left、right、top和bottom指定相對原位置移動的偏移量,可以使用帶單位數值、相對父元素的百分比%

left       正值:左邊向內—向右移動,負值:左邊向外—向左

right    正值:右邊向內—向左移動,負值:右邊向外—向右

top       正值:上邊向內—向下移動,負值:上邊向外—向上

bottom正值:下邊向內—向上移動,負值:下邊向外—向下   

例如:left:20px;  元素左邊框右移20畫素

left:-20px; 元素左邊框左移20畫素。

例如:position:relative; left:350px; bottom:150px;

相對原始位置左邊右移350、下邊上移150畫素—原空間保留。

8月23日生活

今天起的早一些,於是開啟電腦,對ftp伺服器中的遊戲進行公升級.gf打 說白天休息,於是我讓她來我家。到我家不久,bdx網咖打來 說一些電腦上不了網,於是匆匆趕去。經查是一交換器出現故障,去華美換了一台24 2,安上解決。中午,買點菜回家吃飯。下午去公司。來到公司後,除z和y,其餘小伙均出去幹活了。...

7月23日學習

鍊錶的一些內容 概念 鍊錶是線性表的鏈結儲存表示。特點 1.每個元素由結點構成 2.線性結構 3.結點可以連續,可以不連續儲存 4.結點的邏輯順序和物理順序可以不一致 5.表可以擴充 include include struct node typedef struct node node typed...

日誌2月23日

今天繼續複習了nct3級和python省賽要考的 斐波那契數列 n int input 請輸入乙個整數 deffab n if n 1 print 輸入有誤!return 1 if n 1or n 2 return 1else return fab n 1 fab n 2 result for i ...