移動(dòng)端導(dǎo)航布局（基礎(chǔ)屬性解決大問(wèn)題）

Edison 發(fā)布于2019-08-30 15:44 / 1789人閱讀

摘要：移動(dòng)端比較常見(jiàn)的一個(gè)需求是高度根據(jù)寬度進(jìn)行自適應(yīng)。等于視口高度的。一布局場(chǎng)景首頁(yè)導(dǎo)航布局有間距樣式代碼頁(yè)面布局與布局相同代碼解析去除最后一個(gè)元素值設(shè)置布局經(jīng)常會(huì)使得元素元素間莫名其妙出現(xiàn)空隙。

寫(xiě)在最前：移動(dòng)端中導(dǎo)航的網(wǎng)格式布局無(wú)處無(wú)在，寬高怎么設(shè)置相適應(yīng)？元素怎么居中對(duì)齊？不同場(chǎng)景怎么選擇代碼最高效？巧妙使用margin、padding等基礎(chǔ)屬性，小小技巧可以解決許多煩惱！

一、Float布局 1、場(chǎng)景

首頁(yè)導(dǎo)航布局（無(wú)間距）

2、頁(yè)面布局


    
      
        
      
      汽車(chē)票船票

3、樣式代碼

.g-grid {
    text-align: center;
    overflow: hidden; 
    background: #fff;
}
.g-grid-item {
    position: relative;
    float: left; 
    width: 20%;
    padding: 10px 0;
    text-align: center;
}
.g-grid-imgWrap {
    display: inline-block;
    width: 30%; 
    height: 0; 
    padding-bottom: 30%; 
}
.g-grid-imgWrap img {
    width: 100%;
}
.g-grid-label {
    font-size: 12px;
    color: #333;
}

4、代碼解析（高度根據(jù)寬度進(jìn)行自適應(yīng)問(wèn)題）

①、父元素g-grid通過(guò)overflow: hidden建立BFC，使得整體高度從1變成自適應(yīng)。通常可使用clearfix來(lái)清除浮動(dòng)的副作用

 .clearfix:after{
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}
.clearfix{
    zoom:1;
}

②、子元素g-grid-item通過(guò)float: left屬性浮動(dòng)起來(lái)，這也是該方法最主要的屬性。

③、移動(dòng)端比較常見(jiàn)的一個(gè)需求是高度根據(jù)寬度進(jìn)行自適應(yīng)。這個(gè)時(shí)候可以使用到padding-bottom。當(dāng)width和padding-bottom相等時(shí)就實(shí)現(xiàn)了寬高相等（注意要將height置為0），舉一反三，各種比例下也可以設(shè)置。

width: 30%; 
height: 0; 
padding-bottom: 30%;

引申：vh和vw是css引入視口的概念來(lái)代替顯示器的物理尺寸，它們作為單位的時(shí)候也可實(shí)現(xiàn)該效果，雖然現(xiàn)在兼容性慢慢變好，但是Android4.4之前不支持是硬傷。
vw：1vw等于視口寬度的1%。
vh：1vh等于視口高度的1%。

height:1vw;
width:1vw;

一、Display：inline-block布局 1、場(chǎng)景

首頁(yè)導(dǎo)航布局（有間距）

2、樣式代碼

頁(yè)面布局與Float布局相同

.g-grid {
    margin-right: -2%;
    padding: 10px 10px 0;
    font-size: 0;
    background: #fff;
}
.g-grid-item {
    position: relative;
    display: inline-block;
    width: 31.33%;
    padding-bottom: 31.33%;
    margin-right: 2%;
    margin-bottom: 10px;
}
.g-grid-imgWrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 20px;
}
.g-grid-imgWrap img {
    width: 100%;
    height: 100%;
}
.g-grid-label {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #333;
    text-align: center;
}

3、代碼解析（去除最后一個(gè)元素margin-right值）

①、g-grid-item設(shè)置display：inline-block布局經(jīng)常會(huì)使得元素元素間莫名其妙出現(xiàn)空隙?？梢栽趯?xiě)代碼時(shí)使得元素和元素緊緊相連，但不太方便我們編寫(xiě)代碼，IDE格式化之后也會(huì)自動(dòng)分開(kāi)。此處建議設(shè)置父元素g-grid的font-size屬性為0就可以去掉空隙。

②、g-grid-item這些子元素之間需要間隔時(shí)用到margin-right(或者margin-left)，經(jīng)常要處理最后一行設(shè)置為margin-right(或者margin-left)為0。有以下解決方法：

手動(dòng)或者js為最后一個(gè)元素添加一個(gè)margin-right：0

通過(guò)偽類(lèi):nth-child(3n)來(lái)設(shè)置margin-right：0

在g-grid-item的父元素設(shè)置margin-right: -2%;（推薦該方法）

樓上的float布局也可以使用該方法去設(shè)置間隙

③、寬高多少不僅僅可以通過(guò)設(shè)置值來(lái)決定，該例子里面使用以下代碼實(shí)現(xiàn)了width：100%，高度為父級(jí)高度減去20px,根據(jù)場(chǎng)景不同來(lái)決定寫(xiě)法。

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 20px;

④、float布局和display：inline-block布局的水平居中通常使用text-align: center;，子元素在父元素里水平居中要求子元素display不為block

三、Grid布局 1、場(chǎng)景

網(wǎng)格布局（無(wú)間距）

2、頁(yè)面布局


    
      
      汽車(chē)票船票

3、樣式代碼

.g-grid {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);
    grid-template-rows: repeat(3, 100px);
    background: #fff;
}
.g-grid-item {
    display: inline-grid;
    border-right: 1px solid #eee;
    border-top: 1px solid #eee;
    align-content: center
    justify-items: center;
}
.g-grid-item:nth-child(3n) {
    border-right: none;
}
.g-grid-item img {
    height: 30px;
    width: 30px;
}
.g-grid-label {
    font-size: 12px;
    color: #333;
}

4、代碼解析

①、grid布局通過(guò)grid-template-columns和grid-template-rows來(lái)設(shè)置幾列幾行
②、g-grid-item通過(guò)設(shè)置align-content: center;來(lái)使得子元素都處于垂直居中，justify-items: center來(lái)使得子元素都處于水平居中

四、Flex布局 1、場(chǎng)景

九宮格布局（有空隙）

2、樣式代碼

頁(yè)面布局與Grid布局相同請(qǐng)輸入代碼

.g-grid {
    display: flex;
    flex-wrap: wrap;
}
.g-grid-item {
    flex: 0 1 31.33%;
    margin: 0px 1% 10px;
    padding: 1.2rem;
    box-sizing: border-box;
    text-align: center;
    background: #eee;
}
.g-grid-item img {
    height: 30px;
    width: 30px;
}
.g-grid-label {
    font-size: 12px;
    color: #333;
}

3、代碼解析(Flex換行顯式且存在間距)

①、Flex布局通過(guò)flex-wrap: wrap;來(lái)進(jìn)行換行，但當(dāng)需要元素與元素之間存在間距時(shí)，不能使用justify-content: space-between;，減少一個(gè)元素會(huì)變成下圖：

所以該例子通過(guò)margin來(lái)設(shè)置間距，這個(gè)是比較通用的方法。

@vczhan 提供了一個(gè)思路，父級(jí)為justify-content: space-between;或者justify-content: space-around;的同時(shí)，加上

.g-grid::after {
  content: "";
  width: 31.33%;
}

可以解決三列下的問(wèn)題，但是四或以上列下不固定個(gè)數(shù)的情況下還是不適用，請(qǐng)根據(jù)自己使用場(chǎng)景選擇方案。同理 @Ice丶Wing 提供的空div思路類(lèi)似，也可以這么處理。
（再次謝謝兩位?。?/p>

②、.g-grid-item設(shè)置flex: 0 1 31.33%;意思是元素的本來(lái)大小為父元素的31.33%，空間不足時(shí)該元素將縮小，存在剩余空間也不放大。

當(dāng)該值設(shè)為flex: 1 1 31.33%;時(shí)，減少一個(gè)元素會(huì)變成下圖：

尊重原創(chuàng)，如需轉(zhuǎn)載請(qǐng)注明出處！

GPU云服務(wù)器云服務(wù)器移動(dòng)端布局 web移動(dòng)端布局大數(shù)據(jù)分析解決問(wèn)題移動(dòng)端大數(shù)據(jù)分析

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116255.html

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

登陸后可評(píng)論

0條評(píng)論

Edison

男|高級(jí)講師

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

TA的文章

iWebFusion：洛杉磯4G內(nèi)存套餐$9.38/月起,加$5可升級(jí)10Gbps帶寬

閱讀 1629·2021-10-25 09:44
MaxKVM： [email protected] EPYC/2GB內(nèi)存/50GB NVMe空間/2

閱讀 3011·2021-09-04 16:48
文字處理之一：空白字符及white-space屬性

閱讀 1699·2019-08-30 15:44
vue-video-player使用筆記（兼容m3u8）

閱讀 2573·2019-08-30 15:44
移動(dòng)端導(dǎo)航布局（基礎(chǔ)屬性解決大問(wèn)題）

閱讀 1790·2019-08-30 15:44
【全文】狼叔：如何正確的學(xué)習(xí)Node.js

閱讀 2894·2019-08-30 14:14
想要清晰的明白（一）： CSS視覺(jué)格式化模型|盒模型|定位方案|BFC

閱讀 3025·2019-08-30 13:00
CSS基礎(chǔ)知識(shí)整理

閱讀 2224·2019-08-30 11:09

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

移動(dòng)端導(dǎo)航布局（基礎(chǔ)屬性解決大問(wèn)題）

相關(guān)文章

**CSS5:移動(dòng)端頁(yè)面(響應(yīng)式)**

談?wù)勴憫?yīng)式布局

響應(yīng)式布局入門(mén)之——側(cè)欄菜單

響應(yīng)式布局入門(mén)之——側(cè)欄菜單

超越“虛擬的美麗”——云計(jì)算實(shí)踐再分析

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

0條評(píng)論

Edison

男|高級(jí)講師

TA的文章

iWebFusion：洛杉磯4G內(nèi)存套餐$9.38/月起,加$5可升級(jí)10Gbps帶寬

MaxKVM： [email protected] EPYC/2GB內(nèi)存/50GB NVMe空間/2

文字處理之一：空白字符及white-space屬性

vue-video-player使用筆記（兼容m3u8）