css基礎布局複習筆記(二)定位

2022-09-17 16:27:21 字數 978 閱讀 9192

css position屬性用於指定乙個元素在文件中的定位方式。 top , right , bottom  和  left  屬 性則決定了該元素的最終位置。

相對定位 position:relative;

相對於元素自身沒有定位之前的位置進行位移!

注意:relative給百分比的問題,父級沒有高度的時候,百分比不起作用!

特性:1.不使元素脫離文件流 

2.不影響元素本身特性,行內還是行內,塊級還是塊級

相對於已經定位的父元素進行定位   

特性:1.完全脫離文件流  

2.行內元素支援寬高

3.塊級元素內容撐開寬高  

4.沒有祖先元素則相對於body  

5.一般配合相對定位使用  

6.絕對定位的元素的位置相對於最近的已定位祖先元素  

7.margin:auto;失效

擴充套件 ­ 如何使乙個盒子在頁面中百分之百居中呢?

/*

第一種方法

*/position:absolute;

top:50%;

left:50%;

margin:-100px 0 0 -100px;

/*第二種方法

*/margin:auto;

position:absolute;

top:0;

left:0;

right:0;

bottom:0;

相對瀏覽器視窗定位!

1.z-­index 可以調換兩個層的上下位置關係

2.值可以為正,也可以為負,值越大,越在上面 預設值=0

3.只能同級元素對比你在大樓裡面,你自己不能和大樓比誰高!

4.z-­index:只對定位的元素有效,其它元素均無效

css基礎布局複習筆記(一)浮動

浮動的定義 使元素脫離文件流,按照指定方向 左右 發生移動,遇到父級邊界或者相鄰的浮動元素停了下來。第一種情況導致的各種布局混亂問題 浮動元素不佔位置導致的布局變化 第二種情況浮動的元素只影響他後面的元素 根據層疊順序推算 第三種情況導致的各種掉盒子問題 如果父級寬度太窄,無法容納所有元素,無法容納...

CSS基礎和布局複習

table布局 div布局優勢 瀏覽器支援完善 表現和結構分離 樣式設計控制功能強大 可以繼承,層疊處理 transitional 鬆散過度型 strict 嚴格型 frameset 比較不常用的,使用框架使用這種模式 xhtml中的所有標籤都是要閉合的比如 但是在html中就不必這樣 即可 css...

前端基礎複習 10CSS 定位? PC端的布局?

1.css 定位?position static 預設 relative absolute fixed sticky relative 如果沒有定位偏移量,對元素本身沒有任何影響 不使元素脫離文件流 不影響其他元素布局 left top right bottom是相對於當前元素自身進行偏移的 abs...