CSS學習筆記——傳統定位篇
1. 標準流(文件流)
在沒有使用任何定位和浮動情況下,Html中塊元素從上到下排布(每個塊獨佔一行,自帶換行),內聯元素從左到右排布。
2.幾種常見定位
1、靜態定位(static)
一般的標籤元素不加任何定位屬性都屬於靜態定位,在頁面的最底層屬於標準流。
靜態定位的元素不會受到 top, bottom, left, right影響。
2、絕對定位(absolute)
absolute表示,相對於上級元素(一般是父元素)進行偏移,即定位基點是父元素。
它有一個重要的限制條件:定位基點(一般是父元素)不能是static定位,否則定位基點就會變成整個網頁的根元素html。
另外,absolute定位也必須搭配top、bottom、left、right這四個屬性來定位。
3、相對定位(relative)
relative表示,相對於預設位置(即static時的位置)進行偏移,即定位基點是元素的預設位置。
它必須搭配top、bottom、left、right這四個屬性一起使用,用來指定偏移的方向和距離。
4、固定定位(fixed)
fixed表示,相對於視口(viewport,瀏覽器視窗)進行偏移,即定位基點是瀏覽器視窗。這會導致元素的位置不隨頁面滾動而變化,好像固定在網頁上一樣。
5、粘性定位(sticky)
sticky跟前面四個屬性值都不一樣,它會產生動態效果,很像relative和fixed的結合:一些時候是relative定位(定位基點是自身預設位置),另一些時候自動變成fixed定位(定位基點是視口)。
sticky生效的前提是,必須搭配top、bottom、left、right這四個屬性一起使用,不能省略,否則等同於relative定位,不產生"動態固定"的效果。
6、浮動定位(float)
float 屬性定義元素在哪個方向浮動,在 CSS 中,任何元素都可以浮動。浮動元素會生成一個塊級框,而不論它本身是何種元素。
如果浮動非替換元素(html大部分元素都是不可替換元素),則要指定一個明確的寬度;否則,它們會盡可能地窄。
註釋:假如在一行之上只有極少的空間可供浮動元素,那麼這個元素會跳至下一行,這個過程會持續到某一行擁有足夠的空間為止。
3、對比:(精華!!!!要理解透!!)
不脫標元素:靜態定位的元素和相對定位元素佔在標準流中的空間(相對定位元素在)。
是否在標準流中 | 能否使用top、bottom、left、right | 是否還佔標準流的空間 | 在未使用top等定位下元素的位置變化 | top、bottom、left、right定位的基點(參照點) | |
靜態定位(static) | 在標準流中 | 不能使用top、bottom、left、right | 佔空間 | 預設標準流位置 | / |
絕對定位(absolute) | 脫離標準流 | 必須使用top、bottom、left、right | 不佔空間 | 緊鄰最近不脫標的元素 | 父元素不是stastic就為父元素否則就是html根元素 |
相對定位(relative) | 在標準流中 | 必須使用top、bottom、left、right | 佔空間 | 緊鄰最近不脫標的元素 | 基點為最近不脫標的元素位置 |
固定定位(fixed) | 脫離標準流 | 可以使用top、bottom、left、right | 不佔空間 | 緊鄰最近不脫標的元素 | 基點是瀏覽器視窗 |
浮動定位(float) | 脫離標準流 | 不能使用top、bottom、left、right | 不佔空間 | 緊鄰最近不脫標的元素 | / |
相關文章
- web前端學習筆記(CSS盒子的定位)Web前端筆記CSS
- CSS 學習筆記CSS筆記
- 學習筆記19:影像定位筆記
- css學習筆記(一)CSS筆記
- 前端學習記錄(CSS篇)前端CSS
- 【學習筆記】HTML篇筆記HTML
- HTML&CSS學習筆記HTMLCSS筆記
- CSS 基礎學習筆記CSS筆記
- Animation.css學習筆記CSS筆記
- div+css學習筆記CSS筆記
- CSS 小結筆記之定位CSS筆記
- css居中辦法學習筆記CSS筆記
- webpack 學習筆記:引入 CSS(下)Web筆記CSS
- CSS學習筆記:flex佈局CSS筆記Flex
- webpack 學習筆記:引入 CSS(上)Web筆記CSS
- 《css揭祕》學習筆記(一)CSS筆記
- day02_css學習筆記CSS筆記
- CSS學習摘要-定位例項CSS
- MySQL學習筆記【基礎篇】MySql筆記
- pandas 學習筆記 (入門篇)筆記
- swoft 學習筆記之 response 篇筆記
- Android 學習筆記思考篇Android筆記
- Vue學習筆記之路由篇Vue筆記路由
- Mysql學習筆記(安裝篇)MySql筆記
- Android 學習筆記核心篇Android筆記
- MyBatis學習筆記(1)—使用篇MyBatis筆記
- Javascript 學習筆記--語法篇JavaScript筆記
- iOS學習筆記-動畫篇1iOS筆記動畫
- Flask學習筆記(安裝篇)Flask筆記
- HTML5學習筆記 Geolocation(地理定位)HTML筆記
- Appium學習筆記4_元素定位方法APP筆記
- CSS學習筆記之字型樣式CSS筆記
- CSS學習筆記(一) 盒子模型CSS筆記模型
- xhtml & css 簡易學習筆記(一)HTMLCSS筆記
- W3school的CSS筆記(定位)CSS筆記
- TCP 學習筆記(三) 可靠傳輸TCP筆記
- Python學習筆記(語法篇)Python筆記
- Android 學習筆記架構篇Android筆記架構