當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

web前端（12）—— 页面布局2

發布時間：2023/12/2 HTML 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端（12）—— 页面布局2 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本篇博文，主要就講定位的問題，也就是頁面布局里最重要的，本篇博文不出意外的話，也是css的最后一篇博文了

定位，position屬性

定位有三種：

相對定位
絕對定位
固定定位

相對定位，position：relative

相對定位的意思就是相對于自身元素原來的位置定位

設置相對定位之后，才可以使用四個方向的屬性： top、bottom、left、right

相對定位的特性：

不脫標

形影分離

依舊占原來的位

作用：

微調元素位置

做絕對定位的參考（父相子絕）絕對定位會說到此內容。

參考點：

自己原來的位置做參考點

絕對定位，position:abslute

?絕對定位的意思就是以某謳歌參考點（往往是父級元素）作為定位基點進行設置

特性：

脫標
做遮蓋效果，提成了層級。
設置絕對定位之后，不區分行內元素和塊級元素，都能設置寬高
當設置top屬性時：絕對定位參考點是以頁面左上角（跟瀏覽器左上角區分）作參考進行調整
當設置bottom屬性時：絕對定位參考點是以首屏左下角作參考進行調整

參考點：

1.單獨一個絕對定位的盒子

當使用top屬性描述的時候是以頁面的左上角（跟瀏覽器的左上角區分）為參考點來調整位置
當使用bottom屬性描述的時候。是以首屏頁面左下角為參考點來調整位置。

2.以父輩盒子作為參考點

父輩元素設置相對定位，子元素設置絕對定位，那么會以父輩元素左上角為參考點，這個父輩元素不一定是爸爸，它也可以是爺爺，曾爺爺。
如果父親設置了定位，那么以父親為參考點。那么如果父親沒有設置定位，那么以父輩元素設置定位的為參考點
不僅僅是父相子絕，父絕子絕，父固子絕,都是以父輩元素為參考點

注意：

父絕子絕，沒有實戰意義，做站的時候不會出現父絕子絕。因為絕對定位脫離標準流，影響頁面的布局。相反‘父相子絕’在我們頁面布局中，是常用的布局方案。因為父親設置相對定位，不脫離標準流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。
絕對定位的盒子無視父輩的padding

絕對定位的盒子居中：

設置絕對定位之后，margin:0 auto不起任何作用，如果想讓絕對定位的盒子居中：

設置子元素絕對定位，然后left:50%; margin-left：元素寬度的一半，實現絕對定位盒子居中（可以當做公式記下來）

*{padding: 0;margin: 0; } .box{width: 100%;height: 69px;background: #000; } .box .c{width: 960px;height: 69px;background-color: pink;position: relative;left: 50%;margin-left: -480px; }

插一句，對文字內容的居中，例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>title</title><style>*{padding: 0;margin: 0;}.box1{width:400px;height:400px;/*background-color:rgba(120, 217, 239, 0.64);*/background: rgb(120, 217, 239);opacity: 0.64;}p{height: 20px;background: red;padding: 5px 0px;line-height: 20px;text-align: center;}</style> </head> <body><div class="box1"><p>test</p></div></body> </html>

效果：

對文字居中的公式：

p{height: 20px;background: red;padding: 5px 0px;line-height: 20px; /*垂直方向上的上下居中，其值和高度的值相同即可*/text-align: center;/*水平方向的左右居中*/}

固定定位，position:fixed

?固定當前的元素不會隨著頁面滾動而滾動

特性:

脫標
遮蓋，提升層級
固定不變

參考點：

設置固定定位，用top描述。那么是以瀏覽器的左上角為參考點，如果用bottom描述，那么是以瀏覽器的左下角為參考點

作用：?

返回頂部欄
固定導航欄
小廣告

例：

下面這是淘寶頁面右邊的：其實就用了固定定位

父相子絕

指父元素設置相對定位，子元素設置絕對定位，這種是最長用的搭配。這個父元素不一定就是直系父元素，也可以是祖宗元素

父絕子絕

指父元素和子元素都設置絕對定位，此搭配沒有實際意義，說白了這個父元素沒有起什么作用，還不如就直接一個元素設置絕對定位，開發中也基本不會這么用

父固子絕

指父元素設置固定定位（設置固定定位的元素盡量是選擇父元素，防止因為元素有屬性margin和padding造成沖突），子元素設置絕對定位

以上三種搭配，都是以父元素作為參考點進行布局

z-index

用來設置定位的層級優先級，值為大于1的數字，值越大，優先級越高

z-index 值表示誰壓著誰，數值大的壓蓋住數值小的
只有設置定位的元素，設置z-index才有效果
浮動元素不能使用z-index
z-index值沒有單位，就是一個正整數，默認的z-index值為0。
如果大家都沒有z-index值，或者z-index值一樣，那么誰寫在HTML后面，誰在上面壓著別人。
定位了元素，永遠壓住沒有定位的元素。
從父現象：在兩對父元素與子元素中，如果是其兩個子元素相比，如果父元素的z-index會覆蓋子元素的z-index值

好的，css樣式介紹完了，剩下的就是各位朋友自己下去練手了，怎么練手呢，網上找一個網站，自己動手做一個一模一樣的出來，然后你基本掌握css了

后面就進入javascript了，朋友們，我們的路還很長，我更新web前端方面的知識是為了給Python高級課程的web框架做準備的，當然也是從零基礎開始介紹的web，如果朋友您只是想學web開發，一樣適用的

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的web前端（12）—— 页面布局2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。