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

番茄西紅柿發(fā)布于2019-04-23 13:11 / 2276人閱讀

摘要：是以首屏頁面左下角為參考點來調(diào)整位置。因為絕對定位脫離標準流，影響頁面的布局。相反父相子絕在我們頁面布局中，是常用的布局方案。

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

定位，position屬性

定位有三種：

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

相對定位，position：relative

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

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

相對定位的特性：

不脫標

形影分離

依舊占原來的位

作用：

微調(diào)元素位置

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

參考點：

自己原來的位置做參考點

絕對定位，position:abslute

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

特性：

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

參考點：

1.多帶帶一個絕對定位的盒子

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

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

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

注意：

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

絕對定位的盒子居中：

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

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

*{
   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;   
 }

插一句，對文字內(nèi)容的居中，例：




    
    title
    


    
        test

效果：

對文字居中的公式：

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

固定定位，position:fixed

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

特性:

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

參考點：

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

作用：

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

例：

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

父相子絕

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

父絕子絕

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

父固子絕

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

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

z-index

用來設(shè)置定位的層級優(yōu)先級，值為大于1的數(shù)字，值越大，優(yōu)先級越高

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

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

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

云服務器 GPU云服務器 web前端頁面 web前端頁面工程師頁面布局 html頁面布局

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1540.html

發(fā)表評論

登陸后可評論

0條評論

番茄西紅柿

男|高級講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 713·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3910·2021-11-30 14:52
Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

閱讀 3784·2021-11-30 14:52
VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區(qū)

閱讀 3852·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應用服務器僅48元/年

閱讀 3783·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3869·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3558·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過多的解決方法

閱讀 6105·2021-11-29 11:00

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

定位，position屬性

相對定位，position：relative

相對定位的特性：

作用：

參考點：

絕對定位，position:abslute

特性：

參考點：

絕對定位的盒子居中：

固定定位，position:fixed

特性:

參考點：

作用：

父相子絕

父絕子絕

父固子絕

z-index

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動