移动端导航布局

时间: 2019-07-12阅读: 210标签: 布局

写在最前:移动端中导航的网格式布局无处无在,宽高怎么设置相适应?元素怎么居中对齐?不同场景怎么选择代码最高效?巧妙使用margin、padding等基础属性,小小技巧可以解决许多烦恼!


一、Float布局

1、场景

首页导航布局(无间距)

2、页面布局

<div class="g-grid">
    <div class="g-grid-item">
      <div class="g-grid-imgWrap">
        <img class="item-img" src="img/g1.png" />
      </div>
      <p class="g-grid-label">汽车票船票</p>
    </div>
    <!-- 以下九个子元素布局相同省略 -->
 </div>

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、代码解析(高度根据宽度进行自适应问题)

①、父元素g-grid通过overflow: hidden建立BFC,使得整体高度从1变成自适应。通常可使用clearfix来清除浮动的副作用

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

②、子元素g-grid-item通过float: left属性浮动起来,这也是该方法最主要的属性。

③、移动端比较常见的一个需求是高度根据宽度进行自适应。这个时候可以使用到padding-bottom。当width和padding-bottom相等时就实现了宽高相等(注意要将height置为0),举一反三,各种比例下也可以设置。

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

引申:vh和vw是css引入视口的概念来代替显示器的物理尺寸,它们作为单位的时候也可实现该效果,虽然现在兼容性慢慢变好,但是Android4.4之前不支持是硬伤。
vw:1vw等于视口宽度的1%。
vh:1vh等于视口高度的1%。

height:1vw;
width:1vw;


一、Display:inline-block布局

1、场景

首页导航布局(有间距)

2、样式代码

页面布局与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、代码解析(去除最后一个元素margin-right值)

①、g-grid-item设置display:inline-block布局经常会使得元素元素间莫名其妙出现空隙。可以在写代码时使得元素和元素紧紧相连,但不太方便我们编写代码,IDE格式化之后也会自动分开。此处建议设置父元素g-grid的font-size属性为0就可以去掉空隙。

②、g-grid-item这些子元素之间需要间隔时用到margin-right(或者margin-left),经常要处理最后一行设置为margin-right(或者margin-left)为0。有以下解决方法:

  1. 手动或者js为最后一个元素添加一个margin-right:0
  2. 通过伪类:nth-child(3n)来设置margin-right:0
  3. 在g-grid-item的父元素设置margin-right: -2%;(推荐该方法)

楼上的float布局也可以使用该方法去设置间隙

③、宽高多少不仅仅可以通过设置值来决定,该例子里面使用以下代码实现了width:100%,高度为父级高度减去20px,根据场景不同来决定写法。

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

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


三、Grid布局

1、场景

网格布局(无间距)

2、页面布局

<div class="g-grid">
    <div class="g-grid-item">
      <img class="item-img" src="img/g1.png" />
      <p class="g-grid-label">汽车票船票</p>
    </div>
    <!-- 以下八个子元素布局相同省略 -->
 </div>

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布局通过grid-template-columns和grid-template-rows来设置几列几行
②、g-grid-item通过设置align-content: center;来使得子元素都处于垂直居中,justify-items: center来使得子元素都处于水平居中


四、Flex布局

1、场景

九宫格布局(有空隙)

2、样式代码

页面布局与Grid布局相同请输入代码

.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布局通过flex-wrap: wrap;来进行换行,但当需要元素与元素之间存在间距时,不能使用justify-content: space-between;,减少一个元素会变成下图:

所以该例子通过margin来设置间距。

②、.g-grid-item设置flex: 0 1 31.33%;意思是元素的本来大小为父元素的31.33%,空间不足时该元素将缩小,存在剩余空间也不放大。

当该值设为flex: 1 1 31.33%;时,减少一个元素会变成下图:

尊重原创,如需转载请注明出处!  

原文来自:https://segmentfault.com/a/1190000020047828


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 网页游戏  直播/交友   H5游戏

链接: http://www.fly63.com/article/detial/4655

Web布局:display属性

经过 CSS盒模型 和视觉格式化模型两个章节中的学习,我们有了一个清晰的概念。即 在CSS中插何一个元素都是一个盒子,甚至是文本节点也是一个盒子(匿名盒子);都有自己的视觉格式化(不同的盒子)

IOS 浏览器页面布局错位(如:点不到)的分析与解决

IOS 浏览器软键盘的拉起与收缩、微信 IOS 浏览器底部导航条的显示与隐藏,很容易导致页面布局错位(相对窗体的绝对定位元素):明明按钮在这里,却要在上面一点儿点击屏幕才能点到它

移动端布局方案,简单高效,完美适配各种机型

rem布局:使用rem作为元素大小的单位,rem=fount-size,根据不同的屏幕宽度设置不同的fount-size值,这样元素也会跟着屏幕变大或变小,第二步:使用postcss-px2rem-exclude将px转换为rem

flex的各种布局

Flex是Flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。任何一个容器都可以指定为Flex布局。

响应式布局

Responsive web page响应式布局/自适应网页,可以根据浏览器设备不同(pc,pad,phone)而自动的更改布局,图片,文字效果,不会影响用户体验

css如何实现n宫格布局?

现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在.带边框, 先解释一个小技巧, 如何实现正方形, 保证看一遍就会, 结论就是:padding的值如果是百分比

css之定位

定位是css当中一种操作html元素布局的方案;属性position:static:默认值,无特殊定位,对象遵循HTML原则;absolute:绝对定位,将对象从文档流中完全拖离出来;fixed:类似于绝对定位的方式.

CSS flex布局入门

都知道html正常的文档流是自上而下排列的,块级元素会像下左图一样排列。但是项目中尤其是移动端项目会有很多需求的排版方式是要求由左到右排列。虽然可以通过dispaly:inline-block、float、position完成排版,但是需要对距离进行计算,计算起来十分麻烦

实现三栏布局的5种方式

用五种方式实现三栏布局。高度已知,左右两边宽度300px。中间自适应。看到这个题目,我们首先会想起2-3种解决办法。今天我们就来挖一挖到底有多少种方法实现三栏布局。

css实现内容不相同的左右两个div等高

现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢?下面是3种实现方法,觉得很有代表性,所以索性收藏起来。通过父元素设置 overflow:hidden

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全