【亚洲必赢官网】h5开发有关内容总括,微信小程序学习之flex布局实例篇

“粘连”footer布局的沉思和总计

2017/02/06 · CSS · 1
评论 ·
footer

正文笔者: 亚洲必赢官网,伯乐在线 –
zhiqiang21
。未经小编许可,禁止转载!
迎接出席伯乐在线 专辑作者。

上一篇文章介绍了Flex布局的语法,明日牵线常见布局的Flex写法。
你会看到,不管是如何布局,Flex往往都可以几行命令化解。

Sticky Footer,完美的断然底部

2017/04/14 · CSS · 1
评论 ·
footer

原文出处:
坑坑洼洼实验室   

移步端 h5开发有关内容计算(3)

2016/02/01 · HTML5 · 3
评论 ·
移动端

正文小编: 伯乐在线 –
zhiqiang21
。未经作者许可,禁止转发!
欢迎参与伯乐在线 专栏撰稿人。

后边写过两篇开发中蒙受的题材和化解方案。当时是
CSS【亚洲必赢官网】h5开发有关内容总括,微信小程序学习之flex布局实例篇。 和
JavaScript
分开写的。以往写那篇小说的时候感觉很多故事情节都是有内在联系的,所以不佳分开。

给大家享受一下那3个月来的感想吗:

明白和了然里面是有很大距离的。旁人谈到一个知识点,能接上嘴并且能公布一下投机的见识,那叫知道。遭逢难题能够想到用哪些知识点解决难题,那叫驾驭。

于是有不少知识点本身真正在书上都看看过只是在平时赶上题目标时候却不知晓怎么去用大概说想到去用,有时候会有同事给一下辅导说用哪些消除问题。关键时候仍旧多看(看书,看外人的代码)和多用。

经典的”粘连”footer布局

参考小说链接在作品最后,简单的言语总括如下:

经文的“粘连”footer布局就是。大家有一块内容<main>。当<main>的惊人丰富长的时候,紧跟在<main>末端的要素<footer>会跟在<main>要素的前边。当<main>要素相比较短的时候(比如小于屏幕的可观),大家愿意以此<footer>要素可以“粘连”在显示屏的平底。如下图所示:

main足足长时

亚洲必赢官网 1

main正如短时

亚洲必赢官网 2

地方布局的贯彻形式在参考小说中已经有涉及。上面主要探索大家项目中蒙受的事态:

咱俩须要落成的布局就是
按钮“提交”所在的区域可以自由伸缩。当屏幕较低时,最就是“提交”按钮和表单所在的区域接触仍然有一定的间隙。
示例图就是下面的:

当显示屏充分高的时候

亚洲必赢官网 3

当屏幕比较低的时候

亚洲必赢官网 4

上边的布局在活动端须求考虑以下因素对布局的熏陶:

  1. 安卓上键盘弹起会对absolutefixed爆发潜移默化;
  2. 我们的断然定位的因素是行使的bottom对立于显示屏的平底定位;

为了化解以上的七个难点的缓解方案:

  1. 运用正规文档流的成分包裹相对定位的因素;
  2. 纯属定位成分的父级成分应该有一个min-height防护,父级成分太低时,相对定位元素“溢出”父级成分;(min-height >=
    相对定位成分 + bottom);

据悉“粘连”footer布局的考虑,结合弹性盒布局。我们需求的那种布局可以有三种办法,分别介绍如下:

亚洲必赢官网 5

写在前边

做过网页开发的同班恐怕都赶上过如此难堪的排版难题:
在主体内容不丰富多或许未完全加载出来从前,就会招致出现(图一)的那种气象,原因是因为尚未丰富的垂直空间使得页脚推到浏览器窗口最头部。但是,大家期望的效果是页脚应该一贯处在页面最尾部(如图二):

亚洲必赢官网 6

笔者如今在品种中也遇上过那样的情状,在查找最佳化解方案的历程中,通晓到了
“Sticky Footer” 这么些名词。
本文将带我们重新认识那些广阔的网页效果,以及一些得力的兑现方案。

1.display:none; 和 visibility:hidden;的区别

display:none 关闭一个成分的来得(对布局尚未影响);其有着后代成分都也被会被关闭展现。文档渲染时,该因素就像不设有。(不会显得在文档流中的地点,然则DOM 节点仍会油可是生在文档流中)
visibility:hidden visibility属性让你能够控制一个图纸元素的可知性,然则仍会占有展现时候在文档流中的地点。

使用 display:none 的时候纵然元素不会显得,不过DOM
节点仍会并发,所以我们就可以利用接纳器对该因素进行操作。如下图中的示例:

亚洲必赢官网 7

1.使用vh单位

先来精晓下vhvw那多个单位。

  1. vh对峙于视口的莫大。视口被均分为100单位的vh。
  2. vw相对于视口的大幅度。视口被均分为100单位的vw。

上边多个单位初始的含义就是在css中收获当前显示器的可观和宽窄(不通过js统计)。

示范代码如下:

XHTML

<body> <div class=”item1″></div> <div
class=”item2″></div> <div class=”item3″> <div
class=”btn-item”>你好</div> </div> </body>

1
2
3
4
5
6
7
<body>
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3">
        <div class="btn-item">你好</div>
    </div>
</body>

css代码如下:

CSS

* { margin: 0; padding: 0; } body { /*器重就是此处拿到视窗口的冲天*/
min-height: 100vh; display: -webkit-box; display: -webkit-flex; display:
-moz-box; display: -ms-flexbox; display: flex; -webkit-flex-flow:
column; -ms-flex-flow: column; flex-flow: column; } .item1 { height:
100px; background-color: #ddd } .item2 { height: 300px;
background-color: #fea0a0 } .item3 {
/*防护相对定位的因素溢出父级成分*/ min-height: 30px !important;
border: 1px solid #481eff; position: relative; height: 0;
-webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1;
flex: 1; -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis:
0; max-height: 100%; } .btn-item { position: absolute; bottom: 10px;
border: 1px solid #000; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
* {
    margin: 0;
    padding: 0;
}
 
body {
    /*主要就是这里获取视窗口的高度*/
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
}
 
.item1 {
    height: 100px;
    background-color: #ddd
}
 
.item2 {
    height: 300px;
    background-color: #fea0a0
}
 
.item3 {
    /*防止绝对定位的元素溢出父级元素*/
    min-height: 30px !important;
    border: 1px solid #481eff;
    position: relative;
    height: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-height: 100%;
}
 
.btn-item {
    position: absolute;
    bottom: 10px;
    border: 1px solid #000;
}

以上就是全然选择css来贯彻大家项目中布局的措施,可是那个方式有一个很显眼的症结就是vh单位的包容性难题。兼容列表如下:

亚洲必赢官网 8

因为包容性难题,纯css的主目的在于大家的门类中使用或许不现实。然而大家想下难点的本色:在应用弹性盒的根底上,我们唯一要求做的就是了解弹性盒成分的万丈(就是大家项目中显示屏的高度)。

自身只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的要害参考资料是Landon
Schropp的篇章和Solved
by
Flexbox。
一、骰子的布局
骰子的一端,最多可以放置9个点。

什么是 “Sticky Footer”

所谓 “Sticky
Footer”,并不是怎样新的前端概念和技术,它指的就是一种网页效果:
即使页面内容不丰硕长时,页脚固定在浏览器窗口的底层;假设情节丰盛长时,页脚固定在页面的最尾部。
简单的说,就是页脚从来处在最底,效果大致如图所示:

亚洲必赢官网 9

本来,达成那种意义的措施有成百上千种,其中有经过脚本统计的,有通过 CSS
处理的,脚本总结的方案我们不在本文切磋。
下边大家看看有哪些通过 CSS
可以完成且适用于活动端支付的方案,并分析内部的优缺点。

2.事变冒泡引发的题材

本条难点是发出在和谐上篇小说《h5端呼起录制头扫描二维码并分析》中的。详细的代码可以看那篇文章。

2.js简单计量满意包容难题。

不畏在dom树渲染达成之后给body安装低度未显示器的惊人。为了防止不须求的“重绘”也许是“重排”在head标签中添加如下js。

JavaScript

var callback = function(){
document.body.style.height=window.screen.height+’px’; };
//是或不是是页面加载触发绑定了事件 if ( document.readyState === “complete”
|| (document.readyState !== “loading” &&
!document.documentElement.doScroll) ) { callback(); } else {
//DOMContentLoaded 仅援救ie9+ 和移动端 <=ie8 使用 onreadystatechange
可以监听dom是或不是加载已毕 document.add伊芙ntListener(“DOMContentLoaded”,
callback); }

1
2
3
4
5
6
7
8
9
10
11
var callback = function(){
    document.body.style.height=window.screen.height+’px’;
};
 
//是否是页面加载触发绑定了事件
if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll) ) {
    callback();
} else {
    //DOMContentLoaded 仅支持ie9+ 和移动端  <=ie8 使用 onreadystatechange  可以监听dom是否加载完毕
    document.addEventListener("DOMContentLoaded", callback);
}

使用 jQuery 或者是 Zepto 的章程,仍旧在head标签中添加如下js。

JavaScript

$(function(){ $(‘body’).height($(window).height()); })

1
2
3
$(function(){
    $(‘body’).height($(window).height());
})

为此在大家的品种中结合弹性盒布局和充裕简单的动态js总括显示器的莫大。就可以圆满兑现大家项目中要求的布局。

CSS

body { /*使用js动态统计就足以不应用vh单位*/ /*min-height: 100vh;*/
display: flex; }

1
2
3
4
5
body {
    /*使用js动态计算就可以不使用vh单位*/
    /*min-height: 100vh;*/
    display: flex;
}

亚洲必赢官网 10

什么落到实处

如果大家页面的 HTML 结构是这么:

XHTML

<div class=”wrapper”> <div class=”content”><!–
页面主体内容区域 –></div> <div class=”footer”><!–
需求已毕 Sticky Footer 效果的页脚 –></div> </div>

1
2
3
4
<div class="wrapper">
    <div class="content"><!– 页面主体内容区域 –></div>
    <div class="footer"><!– 需要做到 Sticky Footer 效果的页脚 –></div>
</div>

题材时有暴发的景色

先看一段html 代码:

XHTML

<div class=”qr-btn” node-type=”qr-btn”>扫描二维码1 <input
node-type=”jsbridge” type=”file” name=”myPhoto” value=”扫描二维码1″
/> </div>

1
2
3
<div class="qr-btn" node-type="qr-btn">扫描二维码1
            <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
</div>

以前我的想法是以此样子的:
1.自我先触发qr-btn的 click 事件,在回调中触发 input 的click 事件click 事件
2.然后触发input 的 change 事件,获取上传图片的新闻。

依照我的笔触代码应该是下边的这些样子的

JavaScript

//点击父级元素的事件 $(‘.qr-btn’).bind(‘click’,function(){
//触发子成分的风云 $(‘[node-type=jsbridge]’).trigger(“click”); });
$(‘[node-type=jsbridge]’).bind(‘change’,function(){ //做一些作业 });

1
2
3
4
5
6
7
8
//点击父级元素的事件
    $(‘.qr-btn’).bind(‘click’,function(){
        //触发子元素的事件
        $(‘[node-type=jsbridge]’).trigger("click");
    });
    $(‘[node-type=jsbridge]’).bind(‘change’,function(){
        //做一些事情
    });

地方的代码,依照常规的笔触应该是不成难点的,可是,在实际的运行进程中却爆发了难题。浏览器的报错音讯如下:

亚洲必赢官网 11
那是因为堆栈溢出的题材。那么为何会并发这么的标题啊?我把断点打在了以下的职位,然后点击子成分

亚洲必赢官网 12

发出的境况是:代码无限次的触及$('.qr-btn').bind(...) ,就出现了地点的报错新闻。那么是何许原因促成的吗?
寻思一下发觉:是因为事件冒泡的题材。我单击父成分触发子成分的click 事件,子元素的 click 事件又冒泡到父成分上,触发父成分的 click 事件,然后父成分再次接触了子成分的 click 事件,那就造成了事件的大循环

参考小说:

因为是一个

cssstickyfooter.com
ryanfait.com/sticky-footer
css-tricks.com/snippets/css/sticky-footer
pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way
mystrd.at/modern-clean-css-sticky-footer


亚洲必赢官网 13

打赏协助我写出越多好文章,多谢!

打赏小编

上面,就来看看Flex怎么着落到实处,从1个点到9个点的布局。你可以到codepen查看Demo。

兑现方案一:absolute

透过相对定位处理相应是大规模的方案,只要使得页脚向来稳定在主容器预留占位地点。

CSS

html, body { height: 100%; } .wrapper { position: relative; min-height:
100%; padding-bottom: 50px; box-sizing: border-box; } .footer {
position: absolute; bottom: 0; height: 50px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
html, body {
    height: 100%;
}
.wrapper {
    position: relative;
    min-height: 100%;
    padding-bottom: 50px;
    box-sizing: border-box;
}
.footer {
    position: absolute;
    bottom: 0;
    height: 50px;
}

以此方案需点名 html、body 100% 的可观,且 content 的 padding-bottom
需要与 footer 的 height 一致。

难题消除办法:

品味阻止事件的冒泡,看可以缓解难点?
那大家品尝在触发子成分的click的时候,尝试协会子成分的冒泡,看行不行缓解自个儿的标题?添加如下的代码:

JavaScript

$(‘[node-type=jsbridge]’).bind(‘click’,function(e){ //
console.log(e.type); e.stopPropagation(); });

1
2
3
4
$(‘[node-type=jsbridge]’).bind(‘click’,function(e){
      // console.log(e.type);
       e.stopPropagation();
});

通过本身的测试,代码是力所能及健康的运行的。

那么我们有没有更好的法子来化解地方的题材呢?请看接下去的情节

打赏协理本身写出越多好小说,多谢!

任选一种支付办法

亚洲必赢官网 14
亚洲必赢官网 15

1 赞 2 收藏 1
评论

亚洲必赢官网 16

完成方案二:calc

通过计算函数 calc 计算(视窗高度 –
页脚高度)赋予内容区最小中度,不要求别的额外样式处理,代码量最少、最不难易行。

CSS

.content { min-height: calc(100vh – 50px); } .footer { height: 50px; }

1
2
3
4
5
6
.content {
    min-height: calc(100vh – 50px);
}
.footer {
    height: 50px;
}

一经不需考虑 calc() 以及 vh
单位的合作意况,这是个很出色的兑现方案。
同样的难题是 footer 的惊人值必要与 content 其中的统计值一致。

3.lable标签的 for 属性

先来看 lable 标签的概念:

标签为`input`元素定义标注(标记)。
`label`元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在
label
元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
 标签的for属性应当与有关要素的 id 属性相同。

看想转手 w3school 的示范代码和法力:

XHTML

<form> <label for=”male”>Male</label> <input
type=”radio” name=”sex” id=”male” /> <br /> <label
for=”female”>Female</label> <input type=”radio” name=”sex”
id=”female” /> </form>

1
2
3
4
5
<form>  <label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />  <label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

作用如下图:

亚洲必赢官网 17

到那里应该之道大家该怎么改革我们的代码了,

XHTML

<lable class=”qr-btn” node-type=”qr-btn”
for=”qr-input”>扫描二维码1 <input node-type=”jsbridge”
id=”qr-input” type=”file” name=”myPhoto” value=”扫描二维码1″ />
</lable>

1
2
3
<lable class="qr-btn" node-type="qr-btn" for="qr-input">扫描二维码1
        <input node-type="jsbridge" id="qr-input" type="file" name="myPhoto" value="扫描二维码1" />
</lable>

而外 lable 标签的样式大家有福同享索要团结定义外,还有五个优点:

  • 减少了 JavaScript 的书写;
  • lable 标签和 input 标签没有必即使富含关系

有关作者:zhiqiang21

亚洲必赢官网 18

做认为对的工作,假使恐怕是错的,那就做认为自身承受得起的业务!

个人主页 ·
我的小说 ·
11 ·
     

亚洲必赢官网 19

如果不加表明,本节的HTML模板一律如下。
<div class=”box”> <span
class=”item”></span></div>

达成方案三:table

透过 table 属性使得页面以表格的造型显示。

CSS

html, body { height: 100%; } .wrapper { display: table; width: 100%;
min-height: 100%; } .content { display: table-row; height: 100%; }

1
2
3
4
5
6
7
8
9
10
11
12
html, body {
    height: 100%;
}
.wrapper {
    display: table;
    width: 100%;
    min-height: 100%;
}
.content {
    display: table-row;
    height: 100%;
}

亟需小心的是,使用 table 方案存在一个比较常见的样式限制,平时margin、padding、border 等品质会不切合预期。
小编不提议利用那些方案。当然,难点也是可以缓解的:别把其它样式写在 table
上。

4.“弹层盒”布局和一般性盒模型布局的优缺点相比

多年来做了一个抽奖的位移,其中就有一个轮盘的团团转的动画片效果(注意啊,中间的不得了卡顿是
gif 图片又再度先导播报了)。,效果如下图:

亚洲必赢官网 20

有关动画实以后下一篇小说中会继续介绍,那里紧要来关心下布局的题材。因为大家页面会在
pc 和运动移动各出一套。所以在 pc 和运动自身分别用了二种方案,pc
古板布局达成,h5 “弹性盒”完结。

地点代码中,div成分(代表骰子的一个面)是Flex容器,span成分(代表一个点)是Flex项目。若是有多个档次,就要添加五个span成分,以此类推。
1.1 单项目
先是,只有左上角1个点的情形。Flex布局暗许就是首行左对齐,所以一行代码就够了。

兑现方案四:Flexbox

Flexbox 是相当适合落成那种功能的,使用 Flexbox
完毕不仅不需要其它附加的元素,而且允许页脚的惊人是可变的。

虽说一大半 Flexbox
布局常用来水平方向布局,但别忘了实际上它也可用以垂直布局,所以您须要做的是将垂直部分包装在一个
Flex 容器中,并接纳要推而广之的一部分,他们将自动占用其容器中的所有可用空间。

CSS

html { height: 100%; } body { min-height: 100%; display: flex;
flex-direction: column; } .content { flex: 1; }

1
2
3
4
5
6
7
8
9
10
11
html {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.content {
    flex: 1;
}

内需留意的是想要包容各个系统装置,需求兼顾 flex 的匹配写法。

1.弹性盒达成九宫格

外边的这么些灯是利用相对化定位来做的,就然而过多的介绍,首要的是看中间的奖状九宫格的局地。html
代码如下:

XHTML

<div class=”re-middle”> <div class=”row-a”
node-type=”row-a”> <div>mac pro</div>
<div>扫地机器人</div> <div>iphone6s</div>
</div> <div class=”row-b” node-type=”row-b”>
<div>20积分</div> <div></div>
<div>降价券</div> </div> <div class=”row-c”
node-type=”row-c”> <div>ps4</div> <div>
<p>猴年限定</p>公仔</div>
<div>祝福红包</div> </div> <div
node-type=”reward-layer”></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="re-middle">
    <div class="row-a" node-type="row-a">
        <div>mac pro</div>
        <div>扫地机器人</div>
        <div>iphone6s</div>
    </div>
    <div class="row-b" node-type="row-b">
        <div>20积分</div>
        <div></div>
        <div>优惠券</div>
    </div>
    <div class="row-c" node-type="row-c">
        <div>ps4</div>
        <div>
            <p>猴年限定</p>公仔</div>
        <div>祝福红包</div>
    </div>
    <div node-type="reward-layer"></div>
</div>

css代码如下:

CSS

.re-middle { position: absolute; width: 28.3rem; height: 16rem; top: 0;
left: 0; right: 0; bottom: 0; margin: auto; background-color: #f69f75;
color: #ffdece; font-size: 1.8rem; } .row-a, .row-b, .row-c { height:
5.3rem; display: -webkit-box; display: -webkit-flex; display:
-ms-flexbox; display: flex; -webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap; flex-flow: row nowrap; } .row-a div, .row-b
div, .row-c div { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1;
flex: 1; text-align: center; line-height: 5.3rem; background-color:
#f69f75; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.re-middle {
    position: absolute;
    width: 28.3rem;
    height: 16rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #f69f75;
    color: #ffdece;
    font-size: 1.8rem;
}
.row-a,
.row-b,
.row-c {
    height: 5.3rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
.row-a div,
.row-b div,
.row-c div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    line-height: 5.3rem;
    background-color: #f69f75;
}

由地点的 css
代码可以看出来自我独自是在档次方向上利用了“弹性盒”,而在竖直的样子上,仍旧选拔了定点中度(因为本身是用的
rem 单位,那里的固化也是不可相信的,中度会依照 fontsize 值举行总括。)

那么行不行在竖直和档次都以用“弹性盒”呢?
来看一下上面的css代码:

CSS

.re-middle { position: absolute; width: 28.3rem; height: 16rem; top: 0;
left: 0; right: 0; bottom: 0; margin: auto; background-color: #f69f75;
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox;
display: flex; -webkit-box-orient: vertical; -webkit-box-direction:
normal; -webkit-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; color: #ffdece; font-size: 1.8rem; } .row-a,
.row-b, .row-c { /*height: 5.3rem;*/ -webkit-box-flex: 1;
-webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display:
-webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow:
row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .row-a
div, .row-b div, .row-c div { -webkit-box-flex: 1; -webkit-flex: 1;
-ms-flex: 1; flex: 1; text-align: center; line-height: 5.3rem;
background-color: #f69f75; /*position: relative;*/
-webkit-box-align:center; -webkit-align-items:center;
-ms-flex-align:center; align-items:center; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.re-middle {
    position: absolute;
    width: 28.3rem;
    height: 16rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #f69f75;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #ffdece;
    font-size: 1.8rem;
}
.row-a,
.row-b,
.row-c {
    /*height: 5.3rem;*/
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
.row-a div,
.row-b div,
.row-c div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    line-height: 5.3rem;
    background-color: #f69f75;
    /*position: relative;*/
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
}

周末的时候有关那个布局本人又翻书看了下“弹性盒”的文档,终于完毕了在竖直和垂直方向上都达成内容的程度垂直居中内部成分。实际下边的代码只必要把内容的父级成分再一次定义为display:flex再添加八个属性justify-contentalign-items就足以了。前者是控制弹性盒的情节垂直方向居中,后者决定内容水平方向居中。

详尽代码如下:

CSS

.row-a div, .row-b div, .row-c div { -webkit-box-flex: 1; -webkit-flex:
1; -ms-flex: 1; flex: 1; border: 1px solid #000; -webkit-box-align:
center; -webkit-align-items: center; -ms-flex-align: center;
align-items: center; -webkit-box-pack: center; -webkit-justify-content:
center; -ms-flex-pack: center; justify-content: center; display:
-webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.row-a div,
.row-b div,
.row-c div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: 1px solid #000;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

亚洲必赢官网 21

写在终极

以上二种达成方案,小编都在档次中尝试过,每一个达成的措施其实德州小异,同时也都有友好的利害。
内部有的方案存在限制性问题,须求稳定页脚中度;其中一部分方案要求添加额外的因素或然需要Hack 手段。同学们得以根据页面具体须要,接纳最契合的方案。

自然,技术是不断更新的,或许还有不少不一样的、更好的方案。但相信大家最终目都是相同的,为了更好的用户体验!

参考资料:

1 赞 4 收藏 1
评论

亚洲必赢官网 22

2.传统办法贯彻

与 h5 端相比较,我在 pc 端的完成是古板的浮动形式.我的 HTML 代码如下:

XHTML

<div class=”re-middle”> <div class=”row-a”> <div>mac
pro</div> <div class=”row-a-sec”>祝福红包</div>
<div class=”row-a-last”> iphone 6s</div> </div>
<div class=”row-b clearfix”> <div>降价券</div> <div
class=”row-b-sec”></div> <div
class=”row-b-last”>20积分</div> </div> <div
class=”row-c”> <div>扫地机器人</div> <div
class=”row-c-sec”>猴年限定 <p>公仔</p> </div>
<div class=”row-c-last”>ps4</div> </div> <div
class=”reward-btn”></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="re-middle">
    <div class="row-a">
        <div>mac pro</div>
        <div class="row-a-sec">祝福红包</div>
        <div class="row-a-last"> iphone 6s</div>
    </div>
    <div class="row-b clearfix">
        <div>优惠券</div>
        <div class="row-b-sec"></div>
        <div class="row-b-last">20积分</div>
    </div>
    <div class="row-c">
        <div>扫地机器人</div>
        <div class="row-c-sec">猴年限定
            <p>公仔</p>
        </div>
        <div class="row-c-last">ps4</div>
    </div>
    <div class="reward-btn"></div>
</div>

css 代码如下:

CSS

.re-middle { background-color: #f89f71; width: 530px; height: 320px;
position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
} .row-a, .row-b, .row-c { /*height: 106px;*/ font-size: 0; overflow:
hidden; } .row-a > div, .row-c > div { float: left; width: 176px;
height: 106px; text-align: center; } .row-b div { float: left; width:
176px; height: 106px; text-align: center; line-height: 106px;
background-color: #f69f75; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.re-middle {
    background-color: #f89f71;
    width: 530px;
    height: 320px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.row-a,
.row-b,
.row-c {
    /*height: 106px;*/
    font-size: 0;
    overflow: hidden;
}
.row-a > div,
.row-c > div {
    float: left;
    width: 176px;
    height: 106px;
    text-align: center;
}
.row-b div {
    float: left;
    width: 176px;
    height: 106px;
    text-align: center;
    line-height: 106px;
    background-color: #f69f75;
}

由地点的 css
代码比较看大家得以明确看出古板的生成形式的布局和“弹性盒”布局的一部分优缺点:

  • float布局代码简洁,不过必须确定的指定盒子的升幅和惊人,多显示器的适配上会少了一些(rem动态总结除外)。
  • “弹性盒”布局代码应用新的
    css3属性,须要添加额外的厂商前缀,扩张了代码的复杂度(添加厂商前缀可以动用
    sublime 插件,一键完结,推荐自家的稿子 前端开发工程师的 sublime
    配置)
  • “弹性盒”为多显示屏的适配提供了便利性。我不用去关注子成分的增幅和冲天是稍稍,或许是屏幕的涨幅是有点,都会依照实际请款flex本身会去适配。

赶上的一个小标题,多行文本的惩治居中:
其一九宫格内的文本成分,即便只是单行的话,只要利用 line-height 就足以缓解难题,但是如果多行呢?会出哪些状态吧,看下图:
亚洲必赢官网 23

故此那里只好考虑不应用line-height,使用padding 来消除问题,尝试padding后的职能。如下图:
亚洲必赢官网 24

可以看到容器的上边多出了一局地。那也是我们接纳的padding的难点,那么怎么化解那个标题吧?那即将动用从前提到过的box-sizing来消除难点。

CSS

.row-c-sec { color: #ffdece; font-size: 30px; padding-top: 17px;
background-color: #f69f75; /*使容器的高=内容中度+padding +border*/
box-sizing: border-box; }

1
2
3
4
5
6
7
8
.row-c-sec {
    color: #ffdece;
    font-size: 30px;
    padding-top: 17px;
    background-color: #f69f75;
    /*使容器的高=内容高度+padding +border*/
    box-sizing: border-box;
}

.box { display: flex;}

5.按钮多次交到的化解方案

在做“跑马灯”插件的时候蒙受了一个标题,就是用户点击初始抽奖按钮之后在还一向不回到结果的时候用户又第二次点击抽奖按钮,那多少个时候机会合世“奇葩”的题材。比如说:第四回呼吁和第二次呼吁重合再次来到的结果呈现哪一个,即便允许用户展开二次抽奖,交互也不自身。而且只要前端页面不做限定以来,显示也会现出奇葩的题材。比如上面那样:

亚洲必赢官网 25

那般是或不是很糟糕啊。。。

那就是说本人是怎么消除那些题材呢?
答案很简短,我就是在点击按钮之后,使用相对化定位弹起了一个透明的弹层,将按钮给覆盖,等结果回到并出示以往,我在同时去掉弹层。那样就幸免了用户的双重提交。详细看一下代码:

XHTML

<div node-type=”cover_layer”></div>

1
<div node-type="cover_layer"></div>

CSS

cover-layer{ width:100%; height:100%; top:0; position:absolute;
z-index:9999; }

1
2
3
4
5
6
7
cover-layer{
    width:100%;
    height:100%;
    top:0;
    position:absolute;
    z-index:9999;
}

此处保障自个儿的这么些透明的弹层可以覆盖在抽奖按钮的地点。当然这么些class 是自我透过JavaScript动态的丰裕和删除的。

JavaScript

$(node).on(‘clcik’,’.reward-btn’,function(){ //呼起弹层
$(‘[node-type=cover_layer]’,node).addClass(‘cover-layer’); …..
//再次来到结果随后去掉弹层
$(‘[node-type=cover_layer]’,node).removeClass(‘cover-layer’); …..
});

1
2
3
4
5
6
7
8
$(node).on(‘clcik’,’.reward-btn’,function(){
    //呼起弹层
    $(‘[node-type=cover_layer]’,node).addClass(‘cover-layer’);
    …..
    //返回结果以后去掉弹层
    $(‘[node-type=cover_layer]’,node).removeClass(‘cover-layer’);
    …..
});

本次的享受就到此地,下四回会享用“轮盘”抽奖效果的 JavaScript 开发进程。

打赏帮助自个儿写出愈来愈多好小说,多谢!

打赏小编

安装项目标对齐格局,就能促成居中对齐和右对齐。

打赏协理我写出愈来愈多好作品,感激!

任选一种支付格局

亚洲必赢官网 26
亚洲必赢官网 27

2 赞 16 收藏 3
评论

亚洲必赢官网 28

有关小编:zhiqiang21

亚洲必赢官网 29

做认为对的事体,如若大概是错的,那就做认为本身承受得起的作业!

个人主页 ·
我的稿子 ·
11 ·
     

亚洲必赢官网 30

.box { display: flex; justify-content: center;}

亚洲必赢官网 31

.box { display: flex; justify-content: flex-end;}

安装交叉轴对齐格局,能够垂直运动主轴。

亚洲必赢官网 32

.box { display: flex; align-items: center;}

亚洲必赢官网 33

.box { display: flex; justify-content: center; align-items: center;}

亚洲必赢官网 34

.box { display: flex; justify-content: center; align-items: flex-end;}

亚洲必赢官网 35

.box { display: flex; justify-content: flex-end; align-items: flex-end;}

1.2 双项目

亚洲必赢官网 36

.box { display: flex; justify-content: space-between;}

亚洲必赢官网 37

.box { display: flex; flex-direction: column; justify-content:
space-between;}

亚洲必赢官网 38

.box { display: flex; flex-direction: column; justify-content:
space-between; align-items: center;}

亚洲必赢官网 39

.box { display: flex; flex-direction: column; justify-content:
space-between; align-items: flex-end;}

亚洲必赢官网 40

.box { display: flex;}.item:nth-child(2) { align-self: center;}

亚洲必赢官网 41

.box { display: flex; justify-content: space-between;}.item:nth-child(2)
{ align-self: flex-end;}

1.3 三项目

亚洲必赢官网 42

.box { display: flex;}.item:nth-child(2) { align-self:
center;}.item:nth-child(3) { align-self: flex-end;}

1.4 四项目

亚洲必赢官网 43

.box { display: flex; flex-wrap: wrap; justify-content: flex-end;
align-content: space-between;}

亚洲必赢官网 44

HTML代码如下。
<div class=”box”> <div class=”column”> <span
class=”item”></span> <span class=”item”></span>
</div> <div class=”column”> <span
class=”item”></span> <span class=”item”></span>
</div></div>

CSS代码如下。
.box { display: flex; flex-wrap: wrap; align-content:
space-between;}.column { flex-basis: 100%; display: flex;
justify-content: space-between;}

1.5 六项目

亚洲必赢官网 45

.box { display: flex; flex-wrap: wrap; align-content: space-between;}

亚洲必赢官网 46

.box { display: flex; flex-direction: column; flex-wrap: wrap;
align-content: space-between;}

亚洲必赢官网 47

HTML代码如下。
<div class=”box”> <div class=”row”> <span
class=”item”></span> <span class=”item”></span>
<span class=”item”></span> </div> <div
class=”row”> <span class=”item”></span> </div>
<div class=”row”> <span class=”item”></span> <span
class=”item”></span> </div></div>

CSS代码如下。
.box { display: flex; flex-wrap: wrap;}.row{ flex-basis: 100%;
display:flex;}.row:nth-child(2){ justify-content:
center;}.row:nth-child(3){ justify-content: space-between;}

1.6 九项目

亚洲必赢官网 48

.box { display: flex; flex-wrap: wrap;}

二、网格布局
2.1 基本网格布局
最简易的网格布局,就是平均分布。在容器里面平均分配空间,跟下边的骰子布局很像,不过急需安装项目标自动缩放。

亚洲必赢官网 49

HTML代码如下。
<div class=”Grid”> <div class=”Grid-cell”>…</div>
<div class=”Grid-cell”>…</div> <div
class=”Grid-cell”>…</div></div>

CSS代码如下。
.Grid { display: flex;}.Grid-cell { flex: 1;}

2.2 百分比搭架子
某个网格的增幅为固定的比例,其他网格平均分配剩余的上空。

亚洲必赢官网 50

HTML代码如下。
<div class=”Grid”> <div class=”Grid-cell
u-1of4″>…</div> <div class=”Grid-cell”>…</div>
<div class=”Grid-cell u-1of3″>…</div></div>

.Grid { display: flex;}.Grid-cell { flex: 1;}.Grid-cell.u-full { flex: 0
0 100%;}.Grid-cell.u-1of2 { flex: 0 0 50%;}.Grid-cell.u-1of3 { flex: 0 0
33.3333%;}.Grid-cell.u-1of4 { flex: 0 0 25%;}

三、圣杯布局
圣杯布局)(Holy
Grail
Layout)指的是一种最普遍的网站布局。页面从上到下,分成多少个部分:底部(header),躯干(body),底部(footer)。其中人体又水平分为三栏,从左到右为:导航、主栏、副栏。

亚洲必赢官网 51

HTML代码如下。
<body class=”HolyGrail”> <header>…</header> <div
class=”HolyGrail-body”> <main
class=”HolyGrail-content”>…</main> <nav
class=”HolyGrail-nav”>…</nav> <aside
class=”HolyGrail-ads”>…</aside> </div>
<footer>…</footer></body>

CSS代码如下。
.HolyGrail { display: flex; min-height: 100vh; flex-direction:
column;}header,footer { flex: 1;}.HolyGrail-body { display: flex; flex:
1;}.HolyGrail-content { flex: 1;}.HolyGrail-nav, .HolyGrail-ads { /*
五个边栏的肥瘦设为12em / flex: 0 0 12em;}.HolyGrail-nav { /
导航放到最左侧 */ order: -1;}

假定是小显示屏,躯干的三栏自动变成垂直叠加。
@media (max-width: 768px) { .HolyGrail-body { flex-direction: column;
flex: 1; } .HolyGrail-nav, .HolyGrail-ads, .HolyGrail-content { flex:
auto; }}

四、输入框的布局
大家经常须要在输入框的前线添加提醒,后方添加按钮。

亚洲必赢官网 52

HTML代码如下。
<div class=”InputAddOn”> <span
class=”InputAddOn-item”>…</span> <input
class=”InputAddOn-field”> <button
class=”InputAddOn-item”>…</button></div>

CSS代码如下。
.InputAddOn { display: flex;}.InputAddOn-field { flex: 1;}

五、悬挂式布局
突发性,主栏的左边或右手,需求加上一个图片栏。

亚洲必赢官网 53

HTML代码如下。
<div class=”Media”> <img class=”Media-figure” src=”” alt=””>
<p class=”Media-body”>…</p></div>

CSS代码如下。
.Media { display: flex; align-items: flex-start;}.Media-figure {
margin-right: 1em;}.Media-body { flex: 1;}

六、固定的底栏
突发性,页面内容太少,不能占满一屏的高度,底栏就会抬高到页面的中档。那时可以利用Flex布局,让底栏总是出现在页面的尾部。

亚洲必赢官网 54

HTML代码如下。
<body class=”Site”> <header>…</header> <main
class=”Site-content”>…</main>
<footer>…</footer></body>

CSS代码如下。

.Site { display: flex; min-height: 100vh; flex-direction:
column;}.Site-content { flex: 1;}

七,流式布局
每行的项目数一定,会自动分行。

亚洲必赢官网 55

CSS的写法。
.parent { width: 200px; height: 150px; background-color: black; display:
flex; flex-flow: row wrap; align-content: flex-start;}.child {
box-sizing: border-box; background-color: white; flex: 0 0 25%; height:
50px; border: 1px solid red;}

(完)

网站地图xml地图