元素的定位屬性主要包括定位模式和邊偏移兩部分。
1、邊偏移
邊偏移屬性
描述top
頂端偏移量,定義元素相對於其父元素上邊線的距離
bottom
底部偏移量,定義元素相對於其父元素下邊線的距離
left
左側偏移量,定義元素相對於其父元素左邊線的距離
right
右側偏移量,定義元素相對於其父元素右邊線的距離
也就說,以後定位要和這邊偏移搭配使用了, 比如 top: 100px; left: 30px; 等等
position屬性的常用值值描述
static
自動定位(預設定位方式)
relative
相對定位,相對於其原文件流的位置進行定位
absolute
絕對定位,相對於其上乙個已經定位的父元素進行定位
fixed
固定定位,相對於瀏覽器視窗進行定位
相對定位不脫標(不脫離標準流)
相對定位是將元素相對於它在標準流中的位置進行定位,當position屬性的取值為relative時,可以將元素定位於相對位置。
注意: 1.元素相對定位後,雖然可以用便偏移量改變位置,但是在文件流中的位置仍保留。
2.每次移動的位置,都是以自己的左上角為基點移動
浮動:多個塊級元素一行顯示
相對定位:主要價值就是移動位置
絕對定位完全脫標
當position屬性的取值為absolute時,可以將元素的定位模式設定為絕對定位。
若所有父元素都沒有定位,以瀏覽器為準對齊(document文件)。
絕對定位是將元素依據最近的已經定位(絕對、固定或相對定位)的父元素(祖先)進行定位。
普通的盒子是左右margin 改為 auto就可, 但是對於絕對定位就無效了
水平居中的演算法:
1.left 50% ,父盒子的一半大小
2.再有外邊距負的一半值即可
它以瀏覽器視窗作為參照物來定義網頁元素。當position屬性的取值為fixed時,即可將元素的定位模式設定為固定定位。
固定定位是一種特殊的絕對定位
當對多個元素同時設定定位時,定位元素之間有可能會發生重疊。
1.預設值是0,取值越大,定位元素越居上
2.取值相同,看書寫順序
3.數字沒有單位
4.只有定位才有該屬性,浮動,標準流,靜態定位都沒有該屬性
定位模式
是否脫標(脫離標準流)
是否使用偏移量
移動位置基準
靜態static
不脫標,正常模式
不可以正常
相對定位relative
不脫標,占有位置
可以相對與自己移動
絕對定位absolute
脫標,不佔位置
可以相對於定位父級移動
固定定位fixed
脫標,不佔位置
可以相對於瀏覽器移動
設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。
cursor : default 小白 | pointer 小手 | move 移動 | text 文字
解決的方法就是:
給img vertical-align:middle | top等等。 讓不要和基線對齊。
給img 新增 display:block; 轉換為塊級元素就不會存在問題了。
使用translate方法來將文字或影象在水平方向和垂直方向上分別垂直移動50畫素。
可以改變元素的位置,x、y可為負值;
translate(x,y)水平方向和垂直方向同時移動(也就是x軸和y軸同時移動)
translatex(x)僅水平方向移動(x軸移動)
translatey(y)僅垂直方向移動(y軸移動)
讓定位的盒子水平居中
對元素進行水平或垂直方向的縮放
scale(x,y)使元素水平方向和垂直方向同時縮放(也就是x軸和y軸同時縮放)
scalex(x)元素僅水平方向縮放(x軸縮放)
scaley(y)元素僅垂直方向縮放(y軸縮放)
可以對元素進行旋轉,正值為順時針,負值為逆時針;
transform
:rotate
(45deg)
;
transform-origin: 50px 10px ;
如果是4個角,用left,top,這些值,如果想要精確的位置,就用畫素值
transform
:skew
(30deg,0deg)
;
就是沿著 x 立體旋轉.
沿著y軸進行旋轉
沿著z軸進行旋轉
電腦顯示屏是乙個2d平面,影象之所以具有立體感(3d效果),其實只是一種視覺呈現,通過透視可以實現此目的。
透視可以將乙個2d平面,在轉換的過程當中,呈現3d效果。
注:並非任何情況下需要透視效果,根據開發需要進行設定。
perspective 一般作為乙個屬性,設定給父元素,作用於所有3d轉換的子元素
僅水平方向移動(x軸移動)
僅垂直方向移動(y軸移動)
前後移動,直觀的表現就是大小變化
[注意]其中,x和y可以是長度值,也可以是百分比,百分比是相對於其本身元素水平方向的寬度和垂直方向的高度和;z只能設定長度值
backface-visibility 屬性定義當元素不面向螢幕時是否可見。
課堂筆記3
第三節課 找出向量中的偶數下標 vec 5 8which vec 2 0 1 which vec 100 1 尋找水仙花數 nums 100 999first.num nums 100second.num nums 100 10 third.num nums 10nums first.num 3 s...
軟體構造 課堂筆記3
本文內容主要基於老師上課的內容,以及上課的ppt 類 靜態的 物件 執行時存在的動態的 上圖是基於時間的計費系統 例,乙個程式,程式中的所有物件通過名為id的成員變數來儲存唯一的id,如何管理id?一種比較好的實踐方式是,將id的建立全部放在newid 函式中,這樣只需要呼叫newid 函式,而不需...
c語言課堂筆記3
一.陣列是一組具有相同型別的變數的集合。c語言中輸入下標都是從。例如,對上例應用陣列可以將10個成績值儲存在記憶體的乙個連續區域中,使用乙個統一的名字來標識這組相同型別的資料,這個名字稱為陣列名。構成陣列的每個資料項稱為陣列元素。c程式通過陣列下標實現對陣列元素的訪問。1.c語言中陣列的下標都是從零...