即1G之内文件和1G上述文件,弹性盒模型与事先的布局形式是截然两样的三种

弹性盒子模型

 一、分析

种种人心里都有二个梦,贰个有关将来的梦,只要你指标百折不挠,不惧风雨,只要您敢去想敢去追求,你就能够创立出多个好梦,这里随处光亮,这里透亮,这里有人为您欢呼,为你拍掌,你有梦吗?那就大胆去追求吧。

布局方案

古板的布局方案大多接纳div+css+float+position+display来促成,但是随着css3中弹性盒子模型的生产,在前端布局方案中就又多出了一项彪悍的选项。
而因为近期在钻探小程序,发掘中间使用弹性盒子布局功用更加好作用更加高级中学一年级点,所以就将事先学习弹性盒模型的连锁知识点整理出来,给我们享受。

     
这次博客,主要消除文件上传等一文山会海主题材料,将从两上边来演说,即1G之内文件和1G以上文件。

以此世界有太多的人工宫外孕,他们从年轻皆有一个慕名的梦,明星梦,篮球梦,舞台梦。。。。但随着时光飞逝,他们激情逐步被磨平,没了斗志,没了激情,以致吐弃了自个儿的梦,感到这辈子不能再做梦,已由此了幻想的年龄。其实梦是未有年龄限制的,它介于你的坚贞不屈和您的信教,你的主张达成你创造了一个愿意。

弹性盒模型flex布局介绍

弹性盒模型(flexbox)又称作弹性布局,是css3中新提议的一种布局情势,通过弹性布局,能够让子成分自动调治幅度和惊人,从而完毕很好的填充任何例外显示屏尺寸的来得设备的来得空间。
弹性盒模型与后面包车型大巴布局情势是天冠地屦的二种,就算还是选取div+css的措施,但是却将事先运用的成形给替换到了弹性布局。进而使页面成分布局方式越来越的简约。
不一样于咱们后边所学习的网格系统,弹性布局更为适用于选取组件以及小比例布局。
在前头,flex经历了二回迭代,每三回迭代都发出了分歧的语法,如今我们学习服从最后版本的语法。因为前边版本在选用的时候必要考虑包容难点,而新颖版本,全部的浏览器都扶助无前缀的终点典型。

     
对于上传1G以内的公文,能够选择基本的二种上传方法:用Web控件FileUpload、html控件HtmlInputFile和用Html成分<input
type=”file” id=”file”/>,通过Request.Files上传。

公海赌船网站 1

弹性盒子模型认识

flex布局方式是三个一体化的布局模块,并非只有些属性。flex的布局重要依赖父容器和要素构成。
父容器称之为flex container(flex容器) 而其子成分称之为flex
item(flex成分)。
而全部flex布局的基本在于 对其艺术、排布和一一。

      对于1G以上的大文件,思路为:

小A是小编见过最坚贞不屈的人,他敢想,他培育了和煦的梦,二个浩大人为他击手的梦。他刚初始只是多个上班族,每一天漂泊在都市里面,上班朝九晚五,挤大巴,赶公共交通,生活都是那么俩点一线,有一天她乍然跟自家说“枫,小编想去创立一个梦,三个属于作者要好的梦。”笔者问他“你的梦是如何?”他说“笔者想弹着吉他,做贰个街头歌唱家,然后有一天形成二个的确的歌唱家。”笔者惊奇于她的主见,又毕恭毕敬他的胆子,敢想敢去追求,小编对她说“勇敢去追求你的梦吗,小编扶助你。”他跟自个儿道了谢。

弹性盒子模型的采纳

想要使用flex布局,首先要使用display:flex 也许display:inline-flex来设置父容器。
display:flex
给父成分设置完结后,那么全数父成分会化为弹性容器,可是是一个块级成分。
display:inline-flex给父成分设置完毕后,那么全体父成分会成为弹性容器,可是是二个行内块级成分,某个近乎于inline-block的功能。

当父容器设置了那个性子之后,里面包车型客车子元素暗中同意的全方位产生flex item
(flex成分)
Tip:flex布局与大家从前所学习的布局情势是属于别的一套布局方案,所以在接纳了flex布局之后,如Block”,“inline”,“float”
和 “text-align” 等部分属性会失效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container-flex {
            width: 600px;
            border:1px solid #ccc;
            display:flex;
        }
        .container-inline {
            width: 600px;
            border:1px solid #ccc;
            display:inline-flex;
        }
        .container-flex div {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .container-inline div {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container-flex">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-flex">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-inline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class="container-inline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

施行的机能如下:

公海赌船网站 2

           (1)协议:可采用http协议或ftp协议

那天未来,他起来了她的赞美之旅,有一天夜里作者去看她的弹唱,他先到八个街边,拿着吉他,弄着话筒,初始了自弹自唱,真的唱得不佳听,基本是不能入耳,人群里闹哄哄的人,都大声嚷嚷的叫他尽快归家,别在那吓死人。只怕换做自己,小编早就收拾东西就跑人了啊。但是小A呢,他东风吹马耳,继续唱着她的歌,当时本人恍然就对他肃然生敬,笔者在想着他以什么心绪和激情去百折不回的吧,他是什么做到不受影响的啊,假若是本人,作者能或不可能能跟她一致有诸如此比的胆气啊?这个都以自己不敢尝试和尚未去经历的。

须要名词解释

在行使弹性盒子模型此前,供给掌握部分弹性盒模型的根基概念名词。

main axis 主轴
cross axis 交叉轴/侧轴 与主轴垂直
main start 主轴起源边
main end 主轴终点边
cross start 交叉轴起源边
cross end 交叉轴终点边

公海赌船网站 3

           (2)断点续传

公海赌船网站 4

何以接纳弹性盒子模型

弹性盒子模型在付入手提式有线电话机端的时候利用频率较高,在微信小程序支付的时候也是采纳作用十一分高的本事,能够经过多少个实例来看一下弹性盒子的益处:

实例1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*启用flex布局*/
            background-color: pink;
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

代码结果如下:

公海赌船网站 5

在上述实例中须要潜心的点:
① 启用flex布局 display:flex

父成分的子成分在父成分设置了display:flex之后,子成分会活动的形成弹性盒子的子元素,
被称为flex items
③ 暗中认可景况,全部的 flex-item 会依据 flex 容器的最上部和右侧对齐。

实例2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*启用flex布局*/
            background-color: pink;
            justify-content:flex-start;/*默认*/
            justify-content:flex-end;/*在主轴的末端对其*/
            justify-content:center;/*在主轴的中间对其*/
            justify-content:space-between;/*在整个主轴中平均分配空间,无论其中有多少个元素*/
            justify-content:space-around;/*Flex-item 默认会被均匀的分布,但是每一个
                                        都会在其给定的空间内居中显示。*/
            align-items:center;/*让items在垂直方向上居中*/
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

代码效果如下:

公海赌船网站 6

咱俩能够通过特别轻易的习性设置来调动对其格局,举个例子:
justify-content: flex-start / flex-end /center /space-between
/space-around
咱俩也得以通过align-items:center 属性让 items 在笔直方向居中。

实例3:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #item-container {
            display: flex;/*启用flex布局*/
            background-color: pink;
            justify-content:flex-start;/*默认*/
            justify-content:flex-end;/*在主轴的末端对其*/
            justify-content:center;/*在主轴的中间对其*/
            justify-content:space-between;/*在整个主轴中平均分配空间,无论其中有多少个元素*/
            justify-content:space-around;/*Flex-item 默认会被均匀的分布,但是每一个
                                        都会在其给定的空间内居中显示。*/
            align-items:center;/*让items在垂直方向上居中*/
        }
        .square {
            width: 200px;
            height: 200px;
            background-color: orange;
            order: -1; /*让正方形显示在第一位而不是中间*/
        }
        .circle {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="item-container">
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle"></div>
    </div>
</body>
</html>

实例3 和 实例2
轮廓相似,然而在.square类里设有一句order:-1,能够改换成分的渲染顺序。那几个是弹性盒模型中四个那几个了得的叁个方面。

实例3代码效果如下:

公海赌船网站 7

           (3)使用插件

这天早上,在回去的途中,作者问她“小A,为啥您那么大胆,固然那么多个人说你,尽管你通晓您唱不佳,为何您要么有胆量唱下去?是何许让你这么坚贞不屈?”“其实作者也未尝敢于,刚开始人家说本身的时候,笔者真便是想舍弃,可是小编又想了下,即使您被否决就屏弃,被笑话就逃避,那么你不得不适合一辈子停留在原地,假若想被认同,就要学会有庞大的心灵,接受外部一切声音,好的坏的都去领受,然后把这么些转账为引力,多练两回就足以了,也是其一信念一贯支撑着自己。”听完作者有一点又对她充实了一重敬意。作者想他的水滴石穿终有一天会被料定的,因为他敢做梦,敢造梦,纵然开始是不尽的,可是也是因为残缺本事带动其余一种美。

flex布局格局属性

在flex整个系统其中,大意上可以分为两类,一类是给父容器设置的习性,一类是给父容器中子成分设置的特性。

           (4)非插件方式完毕

公海赌船网站 8

弹性容器属性 — 给父成分设置的属性

1.flex-direction
概念内部因素怎样在flex容器中布局,定义了主轴的来头(是好在反)。

语法:

row | row-reverse | column | column-reverse
row 暗许值,子成分会排列在一行 从主轴右边初步
row-reverse 子成分会排列在一行。可是是从右边最初
column 子成分垂直显示,从侧轴开头点起初
column-reverse 垂直显示,不过从甘休点初始

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            width: 100%;
            height: 500px;
            border:1px solid #ccc;
            display:flex;
            flex-direction: row-reverse;
            flex-direction: column;
            flex-direction: column-reverse;
        }
        .container div {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

2.flex-wrap 操纵容器内的子成分是被胁持放在一行中要么是被放在四个行上
。假设同意换行,那些天性允许你调控行的堆成堆方向。

语法:
nowrap | wrap | wrap-reverse
nowrap 全部的要素被摆在一行 暗许值
wrap 当一行成分过多,则允许成分 换行
wrap-reverse 将侧轴源点和终点颠倒

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    .container {
        width: 600px;
        height: 500px;
        border:1px solid #ccc;
        display:flex;
        flex-wrap:wrap;
        flex-wrap:wrap-reverse;
    }
    .container div {
        width: 200px;
        height: 100px;
        background-color: orange;
    }
</style>
</head>
<body>
<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>
</body>
</html>

3.justify-content
属性定义了浏览器怎样分配顺着父容器主轴的弹性(flex)元素之间及其周边的半空中。

语法:
flex-start | flex-end | center | space-between | space-around
flex-start :
从行首开首排列。每行第三个弹性成分与行首对齐,同一时间全数继续的弹性成分与前四个对齐。暗许
flex-end :
从行尾开端排列。每行最后二个弹性成分与行尾对齐,其余因素将与后贰个对齐
center :
伸缩成分向每行中式点心排列。每行第三个成分到行首的相距将与每行最终一个因素到行尾的距离同样
space-between :
在每行上均匀分配弹性成分。相邻成分间距离一样。每行第一个成分与行首
对齐,每行最终贰个因素与行尾对齐。
space-around :
在每行上均匀分配弹性元素。相邻成分间距离同样。每行第贰个成分到行首的相距和每行最后贰个因素到行尾的距离将会是周围成分之间离开的四分之二。

实例代码:

参照下面的实例2.

4.align-items
属性以与justify-content同样的格局在侧轴方向旅长当前行上的弹性元素对齐。

语法:
flex-start | flex-end | center | baseline | stretch
align-items: flex-start; 对齐到侧轴源点
align-items: flex-end; 对齐到侧轴终点
align-items: center; 在侧轴上居中
align-items: baseline; 与基准线对齐
align-items: stretch; 拉伸成分以适应 暗中认可值

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    #item-container {
        display: flex;/*启用flex布局*/
        background-color: pink;
        justify-content:space-around;
        align-items:baseline;/*与基准线对齐*/
    }
    .square {
        width: 200px;
        height: 200px;
        background-color: orange;
    }
    .circle {
        border-radius: 50%;
        width: 150px;
        height: 150px;
        background-color: green;
    }
    .container {
        width: 500px;
        height: 600px;
        border:1px solid #ccc;
        display:flex;
        align-items: stretch;
    }
    .container div {
        width: 100px;
        background-color:red;
        border:1px solid green;
    }
</style>
</head>
<body>
<div id="item-container">
    <div class="circle"></div>
    <div class="square"></div>
    <div class="circle"></div>
</div>
<!-- <div class="container">
    <div>1</div>
    <div>2</div>
</div> -->
</body>
</html>

5.align-content 多行对其艺术,如若独有一行,则失效。

公海赌船网站,语法:
flex-start | flex-end | center | space-between | space-around |
stretch
flex-start : 与交叉轴的起源对其
flex-end : 与交叉轴的巅峰对其
center : 与交叉轴的中式茶食对其
space-between : 与接力轴两端对其,轴线之间的距离平均布满
space-around:
全数行在容器中平均布满,相邻两行间距相等。容器的垂直轴起源边和极端边分别与第一行和最终一行的离开是隔壁两行间距的一半。
stretch :拉伸全部行来填满剩余空间。剩余空间平均的分配给每一行

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 900px;
            border:1px solid #ccc;
            display:flex;
            flex-wrap:wrap;
            align-content:flex-start;
            align-content:flex-end;
            align-content:center;
            align-content:space-between;
            align-content:space-around;
            align-content:stretch; /*默认*/
        }
        .container div {
            width: 200px;
            height: 80px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</body>
</html>

二、文件大小属于[0,1G]范围

此后的小运因为本身直接专业费力,基本没再去看小A的演唱,直到有一天二个摄像并发在本身手机里,多个疯传极流行的录像,标题是街头艺人唱哭了众多客官,我点开一看,是小A,他唱了一首《胭脂扣》,他的嗓子一出去,小编吓到了,那么些是本人认知的,五音不全的他呢?他的歌声带着深情,像述说着一段过往伤痛的传说,声音歌词透入人心,听着心灵会感受到丝丝伤痛又带着有个别无可奈何,听着会令人有想哭的冲动。。因为那些录像,他被察觉,被认可,成为一个真的的歌手。作者想他是马到功成的,他完结了,他已经让投机成功了,小编为她欢乐和自豪,他把自身的人在世出了光明,他把温馨的梦造得那么美那么动人心弦,小编这颗摩拳擦掌的心也类似被点燃了热情。

弹性成分属性 — 给子成分设置的习性

order
order属性规定了弹性容器中的可伸缩项目在布局时的相继。成分根据order属性的值的增序实行布局。具有一样order属性值的要素依照它们在源代码中冒出的一一实行布局。

语法:
order:

align-self 定义flex子项单独在侧轴(纵轴)方向上的对齐情势

语法:
stretch|center|flex-start|flex-end|baseline

flex-grow 定义弹性盒子成分扩充比率
flex-shrink 定义弹性盒子成分的减少比率
flex-basis 钦命了flex
item在主轴方向上的起初大小。假如不接纳box-sizing来
转移盒模型的话,那么那性情子就调控了flex item的内容盒content-box)的宽
可能高(取决于主轴的主旋律)的尺寸大小。

Tip:必要小心的是,在上边的尾声的flex-grow、flex-shrink、flex-basis
四个属性最棒互相搭配使用。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main {
    width: 350px;
    height: 100px;
    border: 1px solid #c3c3c3;
    display: flex;
}

#main div {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100px;
}

#main div:nth-of-type(2) {
    flex-shrink: 3;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>
</body>
</html>

ok,上边大约正是局地常用的弹性盒子模型flex-box常用的性子,上面包车型客车实例很八只是给了代码,未有给效果图,是因为希望正在学习弹性盒子模型的同志们最棒把代码实际的敲一下,何况亲自品尝区别的属性值,来分析分裂属性带来的不及的机能。
弹性盒子模型难度比较小,但是却与观念的布局方案有非常大的歧异。

    
html控件HtmlInputFile达成上传:

公海赌船网站 9

      1、上传分界面

追寻纪念的零散,把它搭成桥梁,通往梦的彼岸,勇敢的去搜索本人的梦,只要您敢做梦,你就足以创立出贰个能够的梦,并且令你美好的梦成真。何人说年轻不能够狂,何人说有梦不可能做,何人说失败就不可能成功。假使您连梦都不敢做,假使您连走路都不敢去,即使你连败北都不敢去品尝,那么您就没资格去说人家,因为比起敢去尝试,即便失利,也在坚定不移的人来讲,你就是八个忍辱含垢的人。假如你有梦,那么就挺身的去搜寻,青春无怨无悔,有梦最美,出发吧,放飞你的梦,创制属于你和煦的揣度。

      公海赌船网站 10

     2、前端代码 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileUpLoad.aspx.cs" Inherits="DEMO.FileUpLoad" %>

 
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <asp:Image ID="Image1" runat="server"/> 
       <asp:Button ID="btnUpLoad" runat="server" Text="上传" OnClick="btnUpLoad_Click" />  
       <asp:Label ID="Label1" runat="server" Text="" Style="color: Red"></asp:Label>  
    </div>
    </form>
</body>
</html>

  3、后端代码  

 //string serverpath = Server.MapPath("~/ImageFile");
            if (FileUpload1.PostedFile.ContentLength > 0)
            {
                if (File.Exists(@"C:\Users\WJM\documents\visual studio 2013\Projects\DEMO\DEMO\ServerImages\" + FileUpload1.PostedFile.FileName))
                {
                    Label1.Text = "文件已经存在";
                }
                else
                {
                    FileUpload1.PostedFile.SaveAs(@"C:\Users\WJM\documents\visual studio 2013\Projects\DEMO\DEMO\ServerImages\" + FileUpload1.PostedFile.FileName);

                    this.Image1.ImageUrl = this.Image1.ImageUrl = @"ServerImages/"+FileUpload1.PostedFile.FileName;//相对路径,将上传的图片给Image控件;//相对路径,将上传的图片给Image控件
                    Label1.Text = "上传成功!";
                }

            }
            else
            {
                Label1.Text = "上传失败";
            }

  4、配置文件

<?xml version="1.0" encoding="utf-8"?>
<!--
  有关如何配置 ASP.NET 应用程序的详细信息,请访问
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <system.web>
    <httpRuntime executionTimeout="36000" delayNotificationTimeout="36000" maxRequestLength="2147483647" targetFramework="4.5"></httpRuntime>
     <compilation debug="true" targetFramework="4.5" />
    <!--<httpRuntime targetFramework="4.5" />-->
  </system.web>
  <system.webServer>
    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="2147483648"/>
      </requestFiltering>
    </security>
  </system.webServer>
</configuration>

  注释:对于配置文件不太熟识的爱侣,能够参照我的另一篇博客:ASP.NET
Web.config

   Web控件FileUpload实现

      1、上传分界面

三、文件大小属于[1G,10G]范围

 

讲解:未完,敬请期待。。。。。。。

  • 多谢您的开卷,若有不足之处,接待指教,共同学习、共同进步。
  • 博主网站:http://www.cnblogs.com/wangjiming/。
  • 本博客为博主原创。
  • 如您喜欢,麻烦推荐一下;如你有新主见,招待建议,邮箱:二零一四177728@qq.com。
  • 能够转发该博客,但必得知名博客来源。

相关文章