Python全棧Web（定位佈局、定位方式）

巴黎香榭發表於2018-09-06
Python全棧Web
定位佈局：
屬性：position
取值：
static  預設值 按照文件流佈局
relative  相對定位
absolute  絕對定位
fixed     固定定位
只有元素的position屬性設定為非預設屬性 才算是已經定位的元素
偏移屬性：
top  right  bottom  left
用來配合已經定位的元素實現位置移動
取值：px
top：以元素的上邊界為基準移動元素
right：以元素的右邊界為基準移動元素
bottom：以元素的低邊界為基準移動元素
left：以元素的上左界為基準移動元素
定位方式：
相對定位：
屬性：position：relative；
元素採用相對定位時會參照它在文件中原本的位置進行偏移
絕對定位：
屬性：position：absolute；
特點：
1.絕對定位的元素，會脫離文件流不佔位
2.絕對定位元素會參照離他最近的已經定位的祖先元素進行偏移
3.如果沒有已經定位的祖先元素  元素會參照body(瀏覽器視窗左上角)進行偏移
注意：
所有元素只要脫流就可以設定寬高大小
通常使用“父相子絕”的方式頁面佈局 限制其他元素的佈局方式
浮動和絕對定位點都可以實現元素脫流，採用浮動+外邊距調整元素的位置
等價於絕對定位+偏移屬性  浮動更常見於外圍結構標籤，做網頁整體佈局時
使用，絕對定位更常見於內部元素的調整
浮動和相對定位可以共存 設定相對定位只是為了輔助內部子元素+的定位佈局
堆疊次序的調整：
已經定位的元素堆疊在一起是的排列順序
語法：
屬性：z-index
取值：整數  數值越大越靠上
注意：
如果我們元素z-index屬性值相同，後來者居上
父子元素都設定z-index  永遠都是子元素在上
不受影響
z-index屬性只能用在已經定位的元素上
固定定位：
可以使元素的位置固定在瀏覽器視窗的某個位置
不會隨網頁內容的滾動而滾動
語法：
屬性：position
取值:fixed
配合偏移屬性實現元素位置的固定
注意：
固定定位的元素永遠是參照瀏覽器的視窗定位的
固定定位的元素都會變成塊元素
顯示方式：
1.決定元素以何種樣式顯示在網頁中
屬性：display
取值：
none 設定元素隱藏  隱藏後不佔位
block 設定元素顯示  或 將元素轉換為塊元素
inline 轉換為行內元素
inline-block 轉換為行內塊元素
顯示效果：
屬性：visibility
取值：
visible 預設值 表示顯示
hidden 元素隱藏   仍然在文件中佔位
元素透明度：
屬性：opacity 設定元素透明度
取值：0~1 0：透明 1：不透明
元素設定opacity屬性 所有的內容都會實現透明效果
子元素會繼承父元素的透明效果
如果父子元素都設定了opacity 子元素最終的效果是在父元素半透明的基礎上
在進行半透明   子元素最終效果=父元素opacity*本身opacity
設定垂直對齊方式：
屬性：vertical-align
取值：top  middle  bottom
可以用在行內元素上 但更常見於為行內快元素設定vertical-align
調整行內快元素左右內容與它的對齊方式
游標顯示：
改變滑鼠懸停在元素上時的顯示外觀
屬性：cursor
取值：
default   預設
pointer   顯示為小手形狀
text   顯示為 I
crosshair 顯示為 +
列表屬性：
列表本身是塊級元素，自帶外邊距，電郵專案符號
屬性：
屬性：list-style-type
設定專案符號
取值：
none 取消專案符號
disc 實心原點
circle 空心原點
square 實心方塊
…
設定專案符號為圖片：
屬性：list-style-image
取值：
url(“圖片路徑”)
設定專案符號的位置：
屬性：list-style-position
取值：inside  outside
設定專案符號出現在內容框的外部還是內部
**簡寫屬性：
list-style：none；
常用來取消列表的專案符號
轉換屬性：
主要是用來改變元素在頁面中的位置、尺寸、角度
屬性：transform
取值：
轉換函式
多個函式之間用空格隔開
轉換原點：
轉換原點實際上就是元素轉換操作的基準點
屬性：transform-origin
取值：x y；
表示以元素左上角為原點進行選取旋轉原點的座標
可以使用畫素值、百分比、方位值
top  center  bottom
left center  right
預設以元素的中心點為原點
轉換函式：
平移變換：
改變元素在網頁中的位置
屬性：transform
取值：translate(x, y)
x表示元素在水平方向上平移的距離
y表示元素在垂直方向上平移的距離
可以填寫正值或負值
其他情況：
translateX(value)
指水平方向位移
translateY(value)
指垂直方向位移
translate(value)
等價於translateX
縮放變換：
改變元素在頁面中的大小
屬性：transform
取值：scale(value)
value為無單位的素值 表示縮放比例
預設值是1   正常比例顯示
value > 1 會等比放大
0 < value < 1 等比縮小
value < 0 元素會等比反轉
其他情況：
scaleX(v)
橫向縮放
scaleY(v)
垂直縮放
旋轉變換：
元素旋轉一定的角度顯示
屬性：transform
取值：rotate(ndeg)
表示元素按照指定的角度旋轉
正值：順時針  負值：逆時針
3D變換：
rotateX(ndeg)沿X軸旋轉
rotateY(ndeg)沿Y軸旋轉
rotateZ(ndeg)沿Z軸旋轉
旋轉原點會影響轉換效果
元素如果涉及旋轉操作 會連帶座標軸一起旋轉,影響後面的位移


相關文章