footer布局的想想和计算,UC浏览器的包容难题

活动端 h5开发有关内容统计(3)

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

正文小编: 伯乐在线 –
zhiqiang21
。未经小编许可,禁止转载!
欢迎插足伯乐在线 专栏撰稿人。

后面写过两篇开发中相遇的难点和平解决决方案。当时是
CSS 和
JavaScript
分开写的。现在写那篇小说的时候感觉很多情节都是有内在联系的,所以糟糕分开。

给我们大快朵颐一下那四个月来的感受啊:

了解和精通里面是有很大距离的。外人谈到一个知识点,能接上嘴并且能见报一下和谐的看法,这叫知道。碰着难点可以想到用什么知识点解决难点,那叫明白。

就此有不少知识点自己真正在书上都看看过不过在平常赶上题目的时候却不知晓怎么去用或者说想到去用,有时候会有同事给一下率领说用哪些解决难题。关键时候仍然多看(看书,看别人的代码)和多用。

在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. 安卓上键盘弹起会对absolutefixed发出震慑;
  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单位

先来通晓下vhvw那四个单位。

  1. vh相对于视口的惊人。视口被均分为100单位的vh。
  2. vw冲突于视口的升幅。视口被均分为100单位的vw。

footer布局的想想和计算,UC浏览器的包容难题。上边四个单位起初的意义就是在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.addEventListener(“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-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;
}

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-wrapflex-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的这几个处境下,要求采取冒泡的主意才能接触绑定的事件

网站地图xml地图