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

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

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

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

定位，position屬性

定位有三種：

相對(duì)定位
絕對(duì)定位
固定定位

相對(duì)定位，position：relative

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

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

相對(duì)定位的特性：

不脫標(biāo)

形影分離

依舊占原來的位

作用：

微調(diào)元素位置

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

參考點(diǎn)：

自己原來的位置做參考點(diǎn)

絕對(duì)定位，position:abslute

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

特性：

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

參考點(diǎn)：

1.多帶帶一個(gè)絕對(duì)定位的盒子

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

2.以父輩盒子作為參考點(diǎn)

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

注意：

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

絕對(duì)定位的盒子居中：

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

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

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

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




    
    title
    


    
        test

效果：

對(duì)文字居中的公式：

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

固定定位，position:fixed

固定當(dāng)前的元素不會(huì)隨著頁面滾動(dòng)而滾動(dòng)

特性:

脫標(biāo)
遮蓋，提升層級(jí)
固定不變

參考點(diǎn)：

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

作用：

返回頂部欄
固定導(dǎo)航欄
小廣告

例：

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

父相子絕

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

父絕子絕

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

父固子絕

指父元素設(shè)置固定定位（設(shè)置固定定位的元素盡量是選擇父元素，防止因?yàn)樵赜袑傩詍argin和padding造成沖突），子元素設(shè)置絕對(duì)定位

以上三種搭配，都是以父元素作為參考點(diǎn)進(jìn)行布局

z-index

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

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

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

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

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

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

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

TA的文章

tensor

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

閱讀 4022·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

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

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

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

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

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

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

資訊專欄INFORMATION COLUMN

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

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

定位，position屬性

相對(duì)定位，position：relative

相對(duì)定位的特性：

作用：

參考點(diǎn)：

絕對(duì)定位，position:abslute

特性：

參考點(diǎn)：

絕對(duì)定位的盒子居中：

固定定位，position:fixed

特性:

參考點(diǎn)：

作用：

父相子絕

父絕子絕

父固子絕

z-index

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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

定位，position屬性

相對(duì)定位，position：relative

絕對(duì)定位，position:abslute

固定定位，position:fixed