UC浏览器的包容难点，footer布局的切磋和小结

admin

运动端 h5开发有关内容统计（3）

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

正文作者： 伯乐在线 –
zhiqiang21
。未经作者许可，禁止转发！
迎接插足伯乐在线 专栏撰稿人。

后边写过两篇开发中遇见的题材和平解决决方案。当时是
CSS 和
JavaScript
分开写的。现在写那篇小说的时候觉得很多内容都是有内在联系的，所以倒霉分开。

给大家享受一下那7个月来的感触呢：

略知一二和精晓里面是有很大距离的。别人谈到一个知识点，能接上嘴并且能见报一下协调的理念，那叫知道。遭遇标题可以想到用哪些知识点解决难点，那叫驾驭。

于是有广大知识点自己的确在书上都看到过可是在平常遇上难点的时候却不晓得怎么去用或者说想到去用，有时候会有同事给一下辅导说用什么样解决难题。关键时候如故多看（看书，看外人的代码）和多用。

在UC浏览器上使用display:flex;时会不起成效，要丰盛包容性写法，

“粘连”footer布局的牵挂和小结

2017/02/06 · 澳门葡京 ，CSS · 1
评论 ·
footer

本文小编： 伯乐在线 –
zhiqiang21
。未经作者许可，禁止转载！
欢迎参与伯乐在线 专辑作者。

flexbox简介，flexbox

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

display:none 关闭一个因素的来得（对布局尚未影响）；其抱有后代元素都也被会被关闭显示。文档渲染时，该因素就像是不设有。（不会显得在文档流中的地方，然则DOM 节点仍会晤世在文档流中）
visibility:hidden visibility属性让您可见决定一个图纸元素的可见性,可是仍会占用展现时候在文档流中的地点。

使用 display:none 的时候即便元素不会来得，可是DOM
节点仍会出现，所以大家就足以选取采纳器对该因素举办操作。如下图中的示例：

澳门葡京 1

如下

经典的”粘连”footer布局

参照作品链接在篇章最后，不难的言语计算如下：

经典的“粘连”footer布局就是。我们有一块内容<main>。当<main>的冲天丰硕长的时候，紧跟在<main>末端的因素<footer>会跟在<main>要素的前面。当<main>要素相比短的时候（比如小于屏幕的冲天），我们意在以此<footer>要素可以“粘连”在屏幕的底层。如下图所示：

当main足足长时

澳门葡京 2

当main相比较短时

澳门葡京 3

上面布局的贯彻模式在参考小说中早已有关系。上边主要探索大家项目中遇见的景况：

俺们需求贯彻的布局就是
按钮“提交”所在的区域能够随意伸缩。当屏幕较低时，最就是“提交”按钮和表单所在的区域接触照旧有肯定的空隙。
示例图就是上面的：

当显示器丰富高的时候

澳门葡京 4

当显示器相比低的时候

澳门葡京 5

上边的布局在移动端必要考虑以下因素对布局的震慑：

  1. 安卓上键盘弹起会对absolute和fixed发生震慑；
  2. 俺们的断然定位的要素是选拔的bottom相对于屏幕的底层定位；

为了缓解上述的四个难点的缓解方案：

  1. 行使正规文档流的要素包裹相对定位的元素；
  2. 相对定位元素的父级元素应该有一个min-height预防，父级元素太低时，相对定位元素“溢出”父级元素；(min-height >=
    相对定位元素 + bottom)；

据悉“粘连”footer布局的思辨，结合弹性盒布局。大家必要的那种布局可以有三种办法，分别介绍如下：

一、概述

变更在运动布局中不再紧要，flex盒模型越来越首要。

flexbox经历过三个版本，主要区别是2009年到2012年之间的语法变化。

最新的语法和现在规范是同步的（例display:flex和“flex-{*}”属性）。
在这之间的语法是2011年出现的非官方语法，只能被IE识别（例display:flexbox;display: -ms-flexbox）。
最老的语法产生于2009年（例display: box;或者“box-{*}”属性）

flexbox是css3新增盒子模型，可以兑现复杂的布局。flexbox没有到手firefox,Opera,chrome浏览器的一点一滴帮衬，但足以选取它们的私家属性定义firefox(-moz)，opera(-o),chrome/safari(-webkit)。

flexbox经典的布局应用是垂直等高，水平均分，按比例划分。

2.风云冒泡引发的题材

那一个难点是发出在温馨上篇著作《h5端呼起视频头扫描二维码并分析》中的。详细的代码可以看那篇小说。

/* OLD – iOS 6-, Safari 3.1-6 */

1.使用vh单位

先来精晓下vhUC浏览器的包容难点，footer布局的切磋和小结。和vw这七个单位。

  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单位的包容性难点。包容列表如下：

澳门葡京 6

因为包容性难点，纯css的情势在我们的体系中应用仍旧不具体。可是大家想下难点的面目：在拔取弹性盒的基本功上，大家唯一需求做的就是掌握弹性盒元素的中度（就是我们项目中显示器的莫大）。

二、flexbox常用属性

难点产生的场景

先看一段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(){
        //做一些事情
    });

地点的代码，按照正规的思绪应该是绝非难点的，然而，在事实上的周转进程中却暴发了难题。浏览器的报错消息如下：

澳门葡京 7
这是因为堆栈溢出的标题。那么为啥碰面世如此的难题呢？我把断点打在了以下的岗位，然后点击子元素

澳门葡京 8

发出的情景是：代码无限次的触及$('.qr-btn').bind(...) ,就出现了上边的报错信息。那么是哪些来头促成的吧？
沉凝一下发觉：是因为事件冒泡的难题。我单击父元素触发子元素的click 事件，子元素的 click 事件又冒泡到父元素上，触发父元素的 click 事件，然后父元素再一次接触了子元素的 click 事件，那就招致了风浪的大循环。

display: -webkit-box;     

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

1、用于父元素的体制

  • display:block;该属性会将此因素及其直系子代参与弹性框模型中。（flexbox模型只适用于直系后代）
  • box-orient:horizontal|vertical|inline-axis|block-axis|inherit;该属性定义父元素中的子元素是什么排列的。horizontal对父元素的宽窄分配划分。
  • box-pack:start|end|center|justify;box-pack表示父容器里面子容器的水平对齐情势

澳门葡京 9

  • box-align:start|end|center|baseline|stretch;表示父容器里面子容器的垂直对齐格局。

澳门葡京 10

标题解决办法：

品尝阻止事件的冒泡，看能够化解难点？
那大家品尝在触发子元素的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();
});

由此自己的测试，代码是力所能及健康的运作的。

那么大家有没有更好的措施来化解地点的难题吧？请看接下去的情节

/* OLD – Firefox 19- (buggy but mostly works) */

参照作品：

因为是一个

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

澳门葡京 11

打赏帮衬自己写出更加多好文章，谢谢！

打赏作者

2、用于子元素的体制

  • box-flex:0|随便数字；该属性让子容器针对父容器的肥瘦按自然规则举办划分。 

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>

职能如下图：

澳门葡京 12

到此处应该之道大家该怎么创新大家的代码了，

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 标签没有必假使带有关系

display: -moz-box;       

打赏援助我写出更加多好文章，谢谢！

任选一种支付办法

澳门葡京 13
澳门葡京 14

1 赞 2 收藏 1
评论

三、快捷入门demo

4.“弹层盒”布局和经常盒模型布局的得失相比

近年来做了一个抽奖的活动，其中就有一个轮盘的旋转的卡通片效果（注意啦，中间的百般卡顿是
gif 图片又再一次最先播报了）。，效果如下图：

澳门葡京 15

有关动画已毕在下一篇文章中会继续介绍，那里最首要来关爱下布局的题材。因为大家页面会在
pc 和运动移动各出一套。所以在 pc 和活动自己分别用了三种方案，pc
传统布局完毕，h5 “弹性盒”落成。

/* TWEENER – IE 10 */

关于小编：zhiqiang21

澳门葡京 16

做认为对的业务，借使可能是错的，那就做认为自己接受得起的事情！

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

澳门葡京 17

1、子元素水平排列，按百分比分割父元素宽度

.parent宽度500px，其子元素水平排列，child-one占1/6，child-two占2/6，child-three占了3/6。

<style>
        .parent{
            width: 500px;
            height: 200px;
            display: -webkit-box;
            -webkit-box-orient: horizontal;/* 虽然默认的排列方式是水平的，但是为了区分起见，加上该属性 */
        }
        .child-one{
            background: lightblue;
            -webkit-box-flex: 1;
        }
        .child-two{
            background: lightgray;
            -webkit-box-flex: 2;
        }
        .child-three{
            background: lightgreen;
            -webkit-box-flex: 3;
        }
    </style>
</head>
<div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中-->
    <div class="parent">
        <div class="child-one">1</div>
        <div class="child-two">2</div>
        <div class="child-three">3</div>
    </div>
</div>

澳门葡京 18

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-content和align-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;
}

display: -ms-flexbox;     

2、子元素水平排列，一个子元素定宽，剩余子元素按百分比分割

澳门葡京 19<style>
.parent{ width: 500px; height: 200px; display: -webkit-box;
background-color:pink; -webkit-box-orient: horizontal;/*
即便默许的排列方式是水平的，不过为了不相同起见，加上该属性 */ }
.child-one{ background: lightblue; -webkit-box-flex: 1; } .child-two{
background: lightgray; -webkit-box-flex: 2; } .child-three{ background:
lightgreen; /*定宽，并加上左右margin,父元素加上粉红色背景观更好精晓*/
width:150px; margin:0 15px; } </style> </head> <div
style=”display: -webkit-box;-webkit-box-pack: center;border: 1px solid
#000;”><!—webkit-box-pack:center让.parent水平居中–> <div
class=”parent”> <div class=”child-one”>1</div> <div
class=”child-two”>2</div> <div
class=”child-three”>3</div> </div> </div> View Code

澳门葡京 20

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 就可以化解难点，可是即使多行啊？会出怎么样景况吧，看下图：
澳门葡京 21

为此那里只可以考虑不利用line-height，使用padding 来化解难题,尝试padding后的成效。如下图：
澳门葡京 22

可以看看容器的底下多出了一有的。那也是大家采纳的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;
}

/* NEW – Chrome */

3、子元素垂直排列，分割父元素中度

.parent中的子元素垂直排列，所以每个子元素宽度占100%。

澳门葡京 23<style>
.parent{ width: 400px; height: 600px; display: -webkit-box;
background-color:pink; -webkit-box-orient: vertical;/*子元素垂直排列
*/ } .child-one{ background: lightblue; -webkit-box-flex: 1; }
.child-two{ background: lightgray; -webkit-box-flex: 2; } .child-three{
background: lightgreen;
/*定高，有上下margin,父元素加上灰色背景观更好领悟*/ height:200px;
margin:15px 0; } </style> </head> <div style=”display:
-webkit-box;-webkit-box-pack: center;border: 1px solid
#000;”><!—webkit-box-pack:center让.parent水平居中–> <div
class=”parent”> <div class=”child-one”>1</div> <div
class=”child-two”>2</div> <div
class=”child-three”>3</div> </div> </div> View Code

澳门葡京 24

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 开发进度。

打赏援助我写出越来越多好文章，谢谢！

打赏作者

display: -webkit-flex;  

4、子元素水平排列，定高垂直方向居中对齐

父元素中子元素水平排列，子元素定高时设置垂直方向对齐格局为居中对齐。

澳门葡京 26<style>
.parent{ width: 400px; height: 200px; display: -webkit-box;
background-color:pink; -webkit-box-orient: horizontal;
/*-webkit-box-align:center;/*父元素中子元素水平排列，定高时设置垂直方向对齐情势为垂直居中*/
} .child-one{ background: lightblue; -webkit-box-flex: 1; height:100px;
} .child-two{ background: lightgray; -webkit-box-flex: 2; height:110px;
} .child-three{ background: lightgreen; -webkit-box-flex: 2;
height:120px; } </style> </head> <div style=”display:
-webkit-box;-webkit-box-pack: center;border: 1px solid
#000;”><!—webkit-box-pack:center让.parent水平居中–> <div
class=”parent”> <div class=”child-one”>1</div> <div
class=”child-two”>2</div> <div
class=”child-three”>3</div> </div> </div> View Code

澳门葡京 27

打赏辅助我写出越来越多好小说，谢谢！

任选一种支付办法

澳门葡京 28
澳门葡京 29

2 赞 16 收藏 3
评论

display: flex;

四、经典布局

flexbox经典的布局应用是笔直等高，水平均分，按百分比划分，水平垂直居中，还是可以完结移动端的弹窗。

有关小编：zhiqiang21

澳门葡京 30

做认为对的工作，倘若可能是错的，那就做认为自己承受得起的业务！

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

澳门葡京 31

利用flex:1;时也要添加如下包容性写法：-webkit-box-flex: 1;     

1、垂直等高,水平均分，按百分比划分

.parent{display: -webkit-box; display: -webkit-flex; display: flex;}
.child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}

完整demo

澳门葡京 32<style>
.parent{display: -webkit-box; display: -webkit-flex; display: flex;
height:100px; width:150px; background-color:pink;}
.child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1; border:1px solid
green; } </style> <div class=”parent”> <div
class=”child”></div> <div class=”child”></div>
<div class=”child”></div> </div> View Code

澳门葡京 33

 /* OLD – iOS 6-, Safari 3.1-6 */           

2、水平居中

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

完整demo:

澳门葡京 34<style>
.parent{display: -webkit-box; display: -webkit-flex; display: flex;
-webkit-box-pack: center; -webkit-justify-content: center;
justify-content: center; height:100px; width:150px;
background-color:pink;} .child{ width:50px; height:50px; border:1px
solid green; } </style> <div class=”parent”> <div
class=”child”></div> </div> View Code

澳门葡京 35

 -moz-box-flex: 1;        

3、垂直居中

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

完整demo

澳门葡京 36<style>
.parent{display: -webkit-box; display: -webkit-flex; display: flex;
-webkit-box-align: center; -webkit-align-items: center; align-items:
center; height:100px; width:150px; background-color:pink;} .child{
width:50px; height:50px; border:1px solid green; } </style>
</head> <body> <div class=”parent”> <div
class=”child”></div> </div> View Code

澳门葡京 37

 /* OLD – Firefox 19- */           

4、移动端弹窗 

 现在移动端很多弹窗组件使用flexbox来兑现，直接嵌套div.overlay>div.pop。

澳门葡京 38<style>
.overlay{ /*flex style*/ display:-webkit-box;
-webkit-box-orient:horizontal; -webkit-box-pack:center;
-webkit-box-align:center; display:-moz-box; -moz-box-orient:horizontal;
-moz-box-pack:center; -moz-box-align:center; display:-o-box;
-o-box-orient:horizontal; -o-box-pack:center; -o-box-align:center;
display:-ms-box; -ms-box-orient:horizontal; -ms-box-pack:center;
-ms-box-align:center; display:box; box-orient:horizontal;
box-pack:center; box-align:center; display: -webkit-flex;
-webkit-align-items: center; -webkit-justify-content: center; display:
flex; align-items: center; justify-content: center; /*other style*/
width:100%; max-width:750px; height:100%; position:fixed; top:0; left:0;
background:rgba(0,0,0,0.5); } .popup{ width:90%; max-width:650px;
border:1px solid green; padding:20px 4% 4% 4%; box-sizing:border-box;
height:auto; background:#fff; border-radius:4px; position:relative; }
.popup-close{ width:15px; height:14px; background:url(image/close.png)
no-repeat; background-size:100% 100%; position:absolute; top:8px;
right:8px; } </style> 主页面的文字 <div class=”overlay”>
<div class=”popup”> <a href=”javascript:;”
class=”popup-close”></a> 弹层的文字 </div> </div>
View Code

澳门葡京 39

 width: 20%;             

五、兼容性

澳门葡京 40

 

PC端：

  • 无前缀：Chrome 29+, Firefox 28+, IE 11+, Opera 17+
  • 急需前缀：Chrome 21+, Safari 6.1+, Opera 15+要求前缀-webkit-

提示：旧版本的Firefox（22-27）援救除了flex-wrap和flex-flow之外的新语法。Opera
(12.1+ –
17+)使用flex可以没有个人前缀，然而中间的15和16本子须求个人前缀。

移动端：

  • 无前缀：Android 4.4+, Opera mobile 12.1+, BlackBerry 10+, Chrome for
    Android 39+, Firefox for Android 33+, IE 11+ mobile
  • 亟待前缀：iOS 7.1+必要前缀-webkit-

 /* For old syntax, otherwise collapses. */            

六、资源链接

display:-webkit-box

A Complete Guide to Flexbox

探索Flexbox

时下Web App中的Flexbox应用

 

正文小编starof,因知识本身在变化，小编也在不停学习成才，文章内容也不安时更新，为幸免误导读者，方便追根溯源，请各位转发注脚出处：

 

一、概述
浮动在运动布局中不再主要，flex盒模型越来越首要。
flexbox经历过多个本子，主要分裂是二零零六年到二零一二年之内的语…

-webkit-flex: 1;         

 /* Chrome */            

-ms-flex: 1;             

 /* IE 10 */           

 flex: 1;                  

/* NEW, Spec – Opera 12.1, Firefox 20+ */

只是，一定要留意：若是效果于flex:1的元素为input或button时，只用flex:1;是不起功用的，还要加上display:block;才能起功效。以下为小案例复制代码

<style>

html,body{

padding: 0;

margin: 0;

}

.demo1{

background-color: yellow;

text-align: center;

height: 80px;

display: -webkit-flex;

display: flex;

-webkit-align-items: center;

align-items: center;

/* for uc */

display: -webkit-box;

-webkit-box-align: center;

}

.demo1>div{

background-color: green;

margin: 2px;

-webkit-flex: 1;

flex: 1;

/* for uc */

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-flex: 1;

}

.demo2{

background-color: yellow;

width: 80px;

height: 200px;

display: -webkit-flex;

display: flex;

-webkit-flex-direction: column;

flex-direction: column;

-webkit-align-items: center;

align-items: center;

/* for uc */

display: -webkit-box;

-webkit-box-orient: vertical;

-moz-box-orient: vertical;

box-orient: vertical;

-webkit-box-align: center;

}

.demo2>div{

background-color: green;

width: 40px;

margin: 2px;

-webkit-flex: 1;

flex: 1;

/* for uc */

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-flex: 1;

}

.demo3{

text-align: center;

padding: 0 6px;

display: -webkit-box;      /* OLD – iOS 6-, Safari 3.1-6 */

display: -moz-box;        /* OLD – Firefox 19- (buggy but mostly works)
*/

display: -ms-flexbox;      /* TWEENER – IE 10 */

display: -webkit-flex;    /* NEW – Chrome */

display: flex;

}

.demo3 .btn{

-webkit-box-flex: 1;      /* OLD – iOS 6-, Safari 3.1-6 */

-moz-box-flex: 1;        /* OLD – Firefox 19- */

width: 20%;              /* For old syntax, otherwise collapses. */

-webkit-flex: 1;          /* Chrome */

-ms-flex: 1;              /* IE 10 */

flex: 1;                  /* NEW, Spec – Opera 12.1, Firefox 20+ */

display:block;

height: 40px;

color:#fff;

text-align: center;

line-height: 40px;

cursor: pointer;

font-size: 17px;

font-weight: 700;

margin-top:0px;

margin-bottom:20px;

font-family: “方正正中黑简体”, “Microsoft YaHei”, “sans-serif”;

-webkit-appearance : none ;  /*解决iphone safari上的圆角难题*/

}

.prev {

background-color: #FEBC21;

margin-right:6px;

}

.next {

background-color: #FE9121;

}

</style>

<h2>左右排列，上下居中</h2>

<div class=”demo1″>

<div>flex</div>

<div>flex</div>

<div>flex</div>

</div>

<h2>上下排列，左右居中</h2>

<div class=”demo2″>

<div>flex</div>

<div>flex</div>

<div>flex</div>

</div>

<h2>左右排列，元素为input或button</h2>

<div class=”demo3″>

<button class=”btn prev”>button</button>

<input type=”button” class=”btn next” id=”btn” value=”input”>

</div>

在position:fixed的那一个景况下，须要使用冒泡的主意才能接触绑定的风浪

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website