【亚洲必赢官网】H5移动端知识点统计,CSS3弹性伸缩布局

CSS3弹性伸缩布局(一)——box布局

2015/08/23 · CSS ·
CSS3

原文出处: 郭锦荣   

H5移动端知识点总括

2016/02/05 · CSS,
HTML5 · 2
评论 ·
移动端

原文出处:
涂根华   

运动支付主导知识点

一. 使用rem作为单位

XHTML

html { font-size: 100px; } @media(min-width: 320px) { html { font-size:
100px; } } @media(min-width: 360px) { html { font-size: 112.5px; } }
@media(min-width: 400px) { html { font-size: 125px; } }
@media(min-width: 640px) { html { font-size: 200px; } }

1
2
3
4
5
html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html { font-size: 112.5px; } }
@media(min-width: 400px) { html { font-size: 125px; } }
@media(min-width: 640px) { html { font-size: 200px; } }

给手机安装100px的字体大小; 对于320px的无绳电话机包容是100px,
此外手机都是等比例万分;
由此安插稿上是稍微像素的话,那么转换为rem的时候,rem = 设计稿的像素/100
即可;

二.  禁用a,button,input,optgroup,select,textarea 等标签背景变暗

在活动端应用a标签做按钮的时候照旧文字连接的时候,点击按钮会现出一个
“暗色的”背景,比如如下代码:
button1

在活动端点击后 相会世”暗色”的背景,这时候大家必要在css参与如下代码即可:

CSS

a,button,input,optgroup,select,textarea{ -webkit-tap-highlight-color:
rgba(0,0,0,0); }

1
2
3
a,button,input,optgroup,select,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

三. meta基础知识点:

1.页面窗口自动调整到装备宽度,并禁止用户及缩放页面。

XHTML

<meta name=”viewport” content=”width=device-width, initial-scale=1.0,
minimum-scale=1.0,maximum-scale=1.0, user-scalable=0″ />

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />

质量基本含义:
content=”width=device-width:
决定 viewport 的轻重缓急,device-width 为设备的涨幅
initial-scale – 开首的缩放比例
minimum-scale – 允许用户缩放到的微小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是不是足以手动缩放

.忽略将页面中的数字识别为电话号码
<meta name=”format-detection” content=”telephone=no” />

  1. 忽略Android平苏州对邮箱地址的识别
    <meta name=”format-detection” content=”email=no” />
  2. 当网站添加到主显示器急速启动格局,可隐藏地址栏,仅针对ios的safari
    <meta name=”apple-mobile-web-app-capable” content=”yes” />
  3. 将网站添加到主显示器快捷启动格局,仅针对ios的safari顶端状态条的体裁
    <meta name=”apple-mobile-web-app-status-bar-style” content=”black”
    />
    <!– 可选default、black、black-translucent –>
    6.
    急需在网站的根目录下存放favicon图标,幸免404呼吁(使用fiddler能够监听到),在页面上需加link如下:
    <link rel=”shortcut icon” href=”/favicon.ico”>

因此页面上通用的模版如下:

XHTML

<!DOCTYPE html> <html> <head> <meta
charset=”utf-8″> <meta
content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no”
name=”viewport”> <meta content=”yes”
name=”apple-mobile-web-app-capable”> <meta content=”black”
name=”apple-mobile-web-app-status-bar-style”> <meta
content=”telephone=no” name=”format-detection”> <meta
content=”email=no” name=”format-detection”>
<title>题目</title> <link rel=”shortcut icon”
href=”/favicon.ico”> </head> <body> 那里起初内容
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <title>标题</title>
        <link rel="shortcut icon" href="/favicon.ico">
    </head>
    <body>
        这里开始内容
    </body>
</html>

四:移动端如何定义字体font-family

body{font-family: “Helvetica Neue”, Helvetica, sans-serif;}

五:在android或者IOS下 拨打电话代码如下

<a href=”tel:15602512356″>打电话给:15602512356</a>

六:发短信(winphone系统无效)

<a href=”sms:10010″>发短信给: 10010</a>

七:调用手机系统自带的邮件效用

1.
当浏览者点击那个链接时,浏览器会活动调用默许的客户端电子邮件程序,并在收件人框中活动填上收件人的地方下边
<p><a
href=”mailto:tugenhua@126.com”>发电子邮件</a></p>

2、填写抄送地址;
在IOS手机下:在收件人地址后用?cc=先导;
正如代码:
<p><a
href=”mailto:tugenhua@126.com?cc=879083421@qq.com”>填写抄送地址</a></p>

在android手机下,如下代码:
<p><a
href=”mailto:tugenhua@126.com?879083421@qq.com”>填写抄送地址</a></p>

  1. 填上密件抄送地址,如下代码:
    在IOS手机下:紧跟着抄送地址然后,写上&bcc=,填上密件抄送地址
    <a
    href=”mailto:tugenhua@126.com?cc=879083421@qq.com&bcc=aa@qq.com”>填上密件抄送地址</a>
    在安卓下;如下代码:
    <p><a
    href=”mailto:tugenhua@126.com?879083421@qq.com?aa@qq.com”>填上密件抄送地址</a></p>

4.
涵盖多少个收件人、抄送、密件抄送人,用分号隔(;)开三个收件人的地址即可兑现。如下代码:
<p><a
href=”mailto:tugenhua@126.com;879083421@qq.com;aa@qq.com”>包蕴多少个收件人、抄送、密件抄送人,用分号隔(;)开多少个收件人的地方即可完成</a></p>

5、包蕴主题,用?subject=可以填上宗旨。如下代码:
<p><a
href=”mailto:tugenhua@126.com?subject=【约请函】”>包括宗旨,可以填上大旨</a></p>

6、包罗内容,用?body=可以填上内容(须求换行的话,使用%0A给文本换行);代码如下:
<p><a
href=”mailto:tugenhua@126.com?body=我来测试下”>包蕴内容,用?body=可以填上内容</a></p>

  1. 情节涵盖链接,含http(s)://等的文本自动转接为链接。如下代码:
    <p><a
    href=”mailto:tugenhua@126.com?body=;

八:webkit表单输入框placeholder的颜色值改变:

要是想要默许的水彩突显紫色,代码如下:
input::-webkit-input-placeholder{color:red;}
若是想要用户点击变为红色,代码如下:
input:focus::-webkit-input-placeholder{color:blue;}

九:移动端IOS手机下清除输入框内阴影,代码如下

input,textarea {
-webkit-appearance: none;
}

十:在IOS中 禁止长按链接与图片弹出菜谱

a, img {
-webkit-touch-callout: none;
}

calc基本用法

calc基本语法:
.class {width: calc(expression);}
它可以帮助加,减,乘,除; 在大家做手机端的时候极度实惠的一个知识点;
可取如下:

  1. 支撑使用 “+”,”-“,”*” 和 “/” 四则运算。
  2. 可以勾兑使用百分比(%),px,em,rem等作为单位可进展计算。
    浏览器的包容性有如下:
    IE9+,FF4.0+,Chrome19+,Safari6+
    正如测试代码:

我是测试calc

CSS

.calc{ margin-left:50px; padding-left:2rem; width:calc(100%-50px-2rem);
height:10rem; }

1
2
3
4
5
6
.calc{
    margin-left:50px;
    padding-left:2rem;
    width:calc(100%-50px-2rem);
    height:10rem;
}

box-sizing的精晓及选择

该属性是解决盒模型在分裂的浏览器中显现不一致的标题。它有多个属性值分别是:
content-box: 默许值(标准盒模型);
width和height只囊括内容的宽和高,不包罗边框,内边距;
诸如如下div元素:

box

css如下:.box {width:200px;height:200px;padding:10px;border:1px solid
#333;margin:10px;box-sizing:content-box;}
那就是说在浏览器下渲染的莫过于增加率和中度分别是:222px,222px;
因为在专业的盒模型下,在浏览器中渲染的实际上增幅和可观概括
内边距(padding)和边框的(border);如下图所示:

亚洲必赢官网 1

border-box:
width与height是包含内边距和边框的,不包涵外地距,那是IE的奇妙情势应用的盒模型,比如依旧地方的代码:
<div>box</div>;
css代码如下:

CSS

.box {width:200px;height:200px;padding:10px;border:1px solid
#333;margin:10px;box-sizing:border-box;}

1
.box {width:200px;height:200px;padding:10px;border:1px solid #333;margin:10px;box-sizing:border-box;}

那就是说此时浏览器渲染的width会是178px,height也是178px;
因为此时定义的width和height会包含padding和border在内;
利用这些特性对于在利用比例的情形下布局页面格外有用,比如有两列布局宽度都是50%;然而呢还有padding和border,那么那么些
时候如若大家不使用该属性的话(当然大家也得以选取calc方法来测算);
那么总宽度会压倒页面中的100%;由此那时候能够动用那
个特性来使页面达到100%的布局.如下图所示:

亚洲必赢官网 2

浏览器协助的档次如下:

亚洲必赢官网 3

理解display:box的布局

display: box; box-flex
是css3新加上的盒子模型属性,它可以为大家解决按比列划分,水平均分,及垂直等高等。

一:按百分比划分:

此时此刻box-flex 属性还从未到手firefox, Opera,
chrome浏览器的完全援救,但我们得以行使它们的个体属性定义firefox(-moz-),opera(-o-),chrome/safari(-webkit-)。box-flex属性首要让子容器针对父容器的肥瘦按自然的规则举办划分。
代码如下:

CSS

<div class=”test”> <p id=”p1″>Hello</p> <p
id=”p2″>W3School</p> </div> <style> .test{
display:-moz-box; display:-webkit-box; display:box; width:300px; } #p1{
-moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; border:1px solid
red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2;
border:1px solid blue; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="test">
      <p id="p1">Hello</p>
      <p id="p2">W3School</p>
</div>
<style>
   .test{
      display:-moz-box;
      display:-webkit-box;
      display:box;
      width:300px;
   }
   #p1{
      -moz-box-flex:1.0;
      -webkit-box-flex:1.0;
      box-flex:1;
      border:1px solid red;
   }
   #p2{
      -moz-box-flex:2.0;
      -webkit-box-flex:2.0;
      box-flex:2;
      border:1px solid blue;
   }
</style>

一般来说图所示:

亚洲必赢官网 4

注意:

  1. 务必给父容器定义 display: box,
    其子元素才可以举行分割。如上给id为p1设置box-flex设置为1,给id为p2设置box-flex为2,
    证实分别给其安装1等分和2等分,也就是说给id为p1元素设置宽度为 300 * 1/3
    = 100px; 给id为p2元素设置宽度为 300 * 2/3 = 200px;
    2.
    万一举办父容器划分的同时,他的子元素有的设置了小幅,有的要拓展剪切的话,那么划分的增加率
    = 父容器的拉长率 – 已经设置的小幅 。
    再拓展相应的剪切。

正如图所示:

亚洲必赢官网 5

亚洲必赢官网 6

二:box具体的性质如下:

box-orient | box-direction | box-align | box-pack | box-lines

  1. box-orient;
    box-orient
    用来规定父容器里的子容器的排列格局,是程度仍然垂直,可选属性如下所示:
    horizontal | vertical | inline-axis | block-axis | inherit
    一:horizontal | inline-axis
    给box设置 horizontal 或 inline-axis
    属性效果表现一样。都得以将子元素举行水平排列.
    如下html代码:

CSS

<div class=”test”> <p id=”p1″>Hello</p> <p
id=”p2″>W3School</p> </div> css代码如下: <style>
.test{ display:-moz-box; display:-webkit-box; display:box; width:300px;
height:200px; -moz-box-orient:horizontal; -webkit-box-orient:horizontal;
box-orient:horizontal; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0;
box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0;
-webkit-box-flex:2.0; box-flex:2; border:1px solid blue; }
</style>

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
<div class="test">
       <p id="p1">Hello</p>
       <p id="p2">W3School</p>
   </div>
   css代码如下:
   <style>
       .test{
          display:-moz-box;
          display:-webkit-box;
          display:box;
          width:300px;
          height:200px;
          -moz-box-orient:horizontal;
          -webkit-box-orient:horizontal;
          box-orient:horizontal;
       }
       #p1{
          -moz-box-flex:1.0;
          -webkit-box-flex:1.0;
          box-flex:1;
          border:1px solid red;
       }
       #p2{
          -moz-box-flex:2.0;
          -webkit-box-flex:2.0;
          box-flex:2;
          border:1px solid blue;
       }
    </style>

一般来说图所示:

亚洲必赢官网 7

二:vertical 可以让子元素进行垂直排列; 

css代码如下:

CSS

<style> *{margin:0;padding:0;} .test{ display:-moz-box;
display:-webkit-box; display:box; width:300px; height:200px;
-moz-box-orient:vertical; -webkit-box-orient:vertical;
box-orient:vertical; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0;
box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0;
-webkit-box-flex:2.0; box-flex:2; border:1px solid blue; }
</style>

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
<style>
   *{margin:0;padding:0;}
   .test{
      display:-moz-box;
      display:-webkit-box;
      display:box;
      width:300px;
      height:200px;
      -moz-box-orient:vertical;
      -webkit-box-orient:vertical;
      box-orient:vertical;
   }
   #p1{
      -moz-box-flex:1.0;
      -webkit-box-flex:1.0;
      box-flex:1;
      border:1px solid red;
   }
   #p2{
      -moz-box-flex:2.0;
      -webkit-box-flex:2.0;
      box-flex:2;
      border:1px solid blue;
   }
</style>

如下图所示:

亚洲必赢官网 8

三:inherit。 Inherit属性让子元素继承父元素的连带属性。
成效和第一种意义同样,都是水平对齐;

2. box-direction
照旧如下html代码:

XHTML

<div class=”test”> <p id=”p1″>Hello</p> <p
id=”p2″>W3School</p> </div>

1
2
3
4
<div class="test">
     <p id="p1">Hello</p>
     <p id="p2">W3School</p>
</div>

box-direction
用来确定父容器里的子容器的排列顺序,具体的特性如下代码所示:
normal | reverse | inherit
normal是默许值,根据HTML文档里的社团的先后顺序依次突显,
如若box-direction 设置为 normal,则结构顺序照旧id为p1元素,id为p2元素。
reverse: 表示反转。若是设置reverse反转,则结构排列顺序为
id为p2元素,id为p1元素。如下代码:
css代码如下:

CSS

<style> *{margin:0;padding:0;} .test{ display:-moz-box;
display:-webkit-box; display:box; width:300px; height:200px;
-moz-box-direction:reverse; -webkit-box-direction:reverse;
box-direction:reverse; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0;
box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0;
-webkit-box-flex:2.0; box-flex:2; border:1px solid blue; }
</style>

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
<style>
       *{margin:0;padding:0;}
       .test{
          display:-moz-box;
          display:-webkit-box;
          display:box;
          width:300px;
          height:200px;
          -moz-box-direction:reverse;
          -webkit-box-direction:reverse;
          box-direction:reverse;
       }
       #p1{
          -moz-box-flex:1.0;
          -webkit-box-flex:1.0;
          box-flex:1;
          border:1px solid red;
       }
       #p2{
          -moz-box-flex:2.0;
          -webkit-box-flex:2.0;
          box-flex:2;
          border:1px solid blue;
       }
    </style>

正如图所示:

亚洲必赢官网 9

3. box-align:

box-align 表示容器里面字容器的垂直对齐格局,可选参数如下表示:
start | end | center | baseline | stretch

  1. 对齐格局 start:表示居顶对齐
    代码如下:

CSS

*{margin:0;padding:0;} .test{ display:-moz-box; display:-webkit-box;
display:box; width:300px; height:200px; -moz-box-align:start;
-webkit-box-align:start; box-align:start; } #p1{ -moz-box-flex:1.0;
-webkit-box-flex:1.0; box-flex:1; height:160px; border:1px solid red; }
#p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; height:100px;
border:1px solid blue; }<br>

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
       *{margin:0;padding:0;}
       .test{
          display:-moz-box;
          display:-webkit-box;
          display:box;
          width:300px;
          height:200px;
          -moz-box-align:start;
          -webkit-box-align:start;
          box-align:start;
       }
       #p1{
          -moz-box-flex:1.0;
          -webkit-box-flex:1.0;
          box-flex:1;
          height:160px;
          border:1px solid red;
       }
       #p2{
          -moz-box-flex:2.0;
          -webkit-box-flex:2.0;
          box-flex:2;
          height:100px;
          border:1px solid blue;
       }<br>

如上 P1 高度为160px p2 为100px; 对齐格局如下图所示:

亚洲必赢官网 10

设若改为end的话,那么就是 居低对齐了,如下:

亚洲必赢官网 11

center表示居中对齐,如下:

亚洲必赢官网 12

stretch 在box-align表示拉伸,拉伸与其父容器等高。如下代码:

亚洲必赢官网 13

在firefox下 和父容器下等高,满足条件,如下:

亚洲必赢官网 14

在chrome下不满意条件;如下:

亚洲必赢官网 15

4. box-pack

box-pack代表父容器里面子容器的档次对齐格局,可选参数如下表示:
start | end | center | justify
box-pack:start;
表示水平居左对齐,对于正规方向的框,首个子元素的左侧缘被放在左边(最终的子元素后是独具盈余的半空中)
对于相反方向的框,最后子元素的左侧缘被放在左边(第一个子元素前是兼具盈余的上空)代码如下所示:

*{margin:0;padding:0;} .test{ display:-moz-box; display:-webkit-box;
display:box; width:400px; height:120px; border:1px solid #333;
-moz-box-pack:start; -webkit-box-pack:start; box-pack:start; } #p1{
width:100px; height:108px; border:1px solid red; } #p2{ width:100px;
height:108px; border:1px solid blue; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
   *{margin:0;padding:0;}
   .test{
      display:-moz-box;
      display:-webkit-box;
      display:box;
      width:400px;
      height:120px;
      border:1px solid #333;
      -moz-box-pack:start;
      -webkit-box-pack:start;
      box-pack:start;
   }
   #p1{
      width:100px;
      height:108px;
      border:1px solid red;  
   }
   #p2{
      width:100px;
      height:108px;
      border:1px solid blue;
   }

正如图所示:

亚洲必赢官网 16

box-pack:center;
 表示水平居中对齐,均等地划分多余空间,其中一半上空被平放第三个子元素前,另一半被安置末了一个子元素后;
如下图所示:

亚洲必赢官网 17

box-pack:end;
表示水平居右对齐;对于正规方向的框,最终子元素的左侧缘被放在左边(首个子元素前是具备盈余的空中)。
对于相反方向的框,第四个子元素的右边缘被放在左边(最后子元素后是装有盈余的空间)。如下图所示:

亚洲必赢官网 18

box-pack:Justify:
在box-pack代表水平等分父容器宽度(在各样子元素之间分割多余的上空(第三个子元素前和末段一个子元素后没有剩余的半空中))
如下:

亚洲必赢官网 19

理解flex布局

俺们传统的布局格局是按照在盒子模型下的,器重于display属性的,position属性的或者是float属性的,可是在观念的布局方面并不佳布局;
比如大家想让某个元素垂直居中的话,我们广阔的会让其元素表现为表格方式,比如display:table-cell属性什么的,大家今天来读书下行使flex布局是更加有益的;
眼下的浏览器协理程度:
IE10+,chrome21+,opera12.1+,Firefox22+,safari6.1+等;
如上浏览器的支持程度,大家得以把此因素运用在运动端很便利;
flex是什么呢?Flex是Flexible
Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的八面后珑。
flex的弹性布局有如下优势:
1.独自的莫大控制与对齐。
2.独立的因素顺序。
3.指定元素之间的关系。
4.灵活的尺码与对齐情势。
一:基本概念
利用flex布局的元素,称为flex容器,它的拥有子元素自动变成容器成员,称为flex项目。如下图:
亚洲必赢官网 20
容器默许存在2根轴,水平的主轴和垂直的侧轴,主轴的伊始地方(与边框的交叉点)叫做main
start, 截止地点叫做 main end.
交叉轴的起头地方叫做 cross start,停止地方叫做cross
end。项目默许沿主轴排列。单个项目占用的主轴空间叫做main size,
占据的交叉轴空间叫做cross size。
二:容器有如下6个属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
俺们分别来看下上边6个属性有什么值,分别表示怎样看头。
1. flex-direction:该属性决定主轴的来头(即项目标排列方向)。
它可能有三个值:
row(默许值):主轴为水平方向,起源在左端。
row-reverse:主轴为水平方向,起源在右端。
column:主轴为垂直方向,源点在上沿。
column-reverse:主轴为垂直方向,源点在下沿。
咱俩来做多少个demo,来分别了解下方面几个值的含义;我这边只讲解上边第四个和首个值的意思,上面的也是平等,
就不上课了;
比如页面上有一个容器,里面有一个因素,看下这些因素的排列方向。
HTML代码:(如没有特其余申明,下边的html代码都是该协会):

XHTML

<div class=”first-face container”> <span
class=”pip”>span> <div>

1
2
3
<div class="first-face container">
    <span class="pip">span>
<div>

css代码如下:

CSS

html, body { height: 100%; } .container { width:150px; height:150px;
border:1px solid red; } .first-face { display: flex; display:
-webkit-flex; flex-direction: row; -webkit-flex-direction:row; display:
-webkit-box; -webkit-box-pack:start; } .pip { display:block; width:
24px; height: 24px; border-radius: 50%; background-color: #333; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    html, body {
        height: 100%;
    }
    .container {
        width:150px;
        height:150px;
        border:1px solid red;
    }
    .first-face {
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        -webkit-flex-direction:row;
        display: -webkit-box;  
        -webkit-box-pack:start;
    }
    .pip {
      display:block;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #333;
    }

注意:在android平台的uc浏览器和微信浏览器中利用display:
flex;会出标题。不扶助该属性,因而选拔display:
flex;的时候需求加上display: -webkit-box;
还有一些品位对齐或者垂直对齐都急需加上对应的box-pack(box-pack代表父容器里面子容器的档次对齐形式)及box-align(box-align
代表容器里面子容器的垂直对齐格局).具体的可以看如下介绍的
display:box属性那一节。
俺们得以看下截图如下:

亚洲必赢官网 21

当大家把flex-direction的值改为
row-reverse后(主轴为水平方向,起源在右端),我们截图如下所示:

亚洲必赢官网 22

2. flex-wrap特性
默认景况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,假若一条轴线排不下,可以换行。
它有如下三个值:
nowrap(默认):不换行。
wrap:换行,第一行在上边。
wrap-reverse:换行,第一行在人世。

3. flex-flow
该属性是flex-direction属性和flex-wrap属性的简写方式,默许值为row nowrap

4. justify-content属性
justify-content属性定义了体系在主轴上的对齐格局。上面如果主轴为从左到右。
值为如下:
flex-start | flex-end | center | space-between | space-around;
flex-start(默认值) 左对齐
flex-end 右对齐
center 居中
space-between: 两端对齐,项目里面的间隔都等于
space-around:每个品种两侧的区间相等。

5. align-items属性
align-items属性定义项目在交叉轴上怎么样对齐。
它可能取5个值:
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的巅峰对齐。
center:交叉轴的中点对齐。
baseline: 项目的首先行文字的基线对齐。
stretch(默许值):若是项目未安装中度或设为auto,将占满整个容器的万丈。

6. align-content属性
align-content属性定义了多根轴线的对齐方式。倘使项目唯有一根轴线,该属性不起功用。
该属性可能取6个值。
flex-start:与交叉轴的源点对齐。
flex-end:与交叉轴的终端对齐。
center:与交叉轴的中点对齐。
space-between:与接力轴两端对齐,轴线之间的区间平均分布。
space-around:每根轴线两侧的间距都格外。所以,轴线之间的区间比轴线与边框的区间大一倍。
stretch(默许值):轴线占满整个交叉轴。

三:项目的质量,以下有6个属性可以设置在品种中
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1. order属性
order属性定义项目标排列顺序。数值越小,排列越靠前,默许为0。
主干语法:
.xx {order: ;}
2. flex-grow属性
flex-grow属性定义项目标推广比例,默许为0,即只要存在剩余空间,也不加大
主旨语法:
.xx {
flex-grow: ;
}
3. flex-shrink属性
flex-shrink属性定义了项目标减弱比例,默许为1,即要是空间不足,该品种将压缩。
骨干语法:
.xx {
flex-shrink: ;
}
4. flex-basis属性
flex-basis属性定义了在分配多余空间以前,项目占据的主轴空间(main
size)。浏览器依照那几个特性,统计主轴是或不是有剩余空间。它的默认值为auto,即项目的自然大小。
主干语法:

.xx { flex-basis: | auto;}

它可以设为跟width或height属性一样的值(比如350px),则项目将占据一定空间。
5. flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默许值为0 1
auto。后多少个属性可选。

6. align-self属性
align-self属性允许单个项目有与其他种类不等同的对齐方式,可覆盖align-items属性。
默许值为auto,表示继续父元素的align-items属性,若是没有父元素,则等同stretch。

主导语法:
.xx {
align-self: auto | flex-start | flex-end | center | baseline |
stretch;
}

上边是大旨语法,感觉好模糊啊,看到那般多介绍,感觉很盲目啊,上面大家乘机来促成下demo。
大家很多人会不会打麻将呢?打麻将中有1-9丙对吧,我们来分别来完成他们的布局;
率先我们的HTML代码依然如下(假若没有特其他印证都是那般的布局):

一: 1丙

HTML代码:

XHTML

<div class=”first-face container”> <span
class=”pip”>span> <div>

1
2
3
<div class="first-face container">
    <span class="pip">span>
<div>

地方代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。假诺有多少个品类,就要添加三个span元素,以此类推。
css代码结构如下:

CSS

html, body { height: 100%; } .container { width:150px; height:150px;
border:1px solid red; } .first-face { } .pip { display:block; width:
24px; height: 24px; border-radius: 50%; background-color: #333; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    html, body {
        height: 100%;
    }
    .container {
        width:150px;
        height:150px;
        border:1px solid red;
    }
    .first-face {
 
    }
    .pip {
      display:block;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #333;
    }

1.
首先,唯有一个左上角的情事下,flex布局默许为左对齐,因而需求display:flex即可;如下代码:

CSS

.first-face { display: flex; display: -webkit-box; }

1
2
3
4
.first-face {
    display: flex;
    display: -webkit-box;
}

地点为了包容UC浏览器和IOS浏览器下,因而要求添加display:
-webkit-box;来合营,大家也驾驭,如果不加上.first-face里面的代码,也能做出作用,因为元素默许都是向左对齐的,如下图所示:

亚洲必赢官网 23

大家继续来探望对元素举办居中对齐; 要求添加 justify-content:
center;即可;可是在UC浏览器下不支持该属性,
俺们水平对齐必要加上box-pack,box-pack代表父容器里面子容器的程度对齐格局,具体的值如上面介绍的box的语法,
亟需丰硕 -webkit-box-pack:center;
因而在first-face里面的css代码变为如下代码:

CSS

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

1
2
3
4
5
6
.first-face {
    display: flex;
    display: -webkit-box;
    justify-content:center;
    -webkit-box-pack:center;
}

意义如下:

亚洲必赢官网 24

地点已经介绍过
justify-content属性定义了项目在主轴上的对齐格局(水平方向上),有四个值,这里不再介绍,具体可以看下面的主干语法。

水平右对齐代码也一律、因而代码变成如下:

CSS

.first-face { display: flex; display: -webkit-box;
justify-content:flex-end; -webkit-box-pack:end; }

1
2
3
4
5
6
.first-face {
    display: flex;
    display: -webkit-box;
    justify-content:flex-end;
    -webkit-box-pack:end;
}

正如图所示:

亚洲必赢官网 25

  1. 咱俩跟着来分别看看垂直居左对齐,垂直居中对齐,垂直居右对齐.
    一:垂直居左对齐
    俺们今日亟待运用上align-items属性了,该属性定义项目在交叉轴上哪些对齐。具体的语法如上:
    同样为了包容UC浏览器或此外不协助的浏览器,大家需要丰裕box-align
    该属性表示容器里面字容器的垂直对齐情势;具体的语法如上;
    之所以代码变成如下:

CSS

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

1
2
3
4
5
6
.first-face {
    display: flex;
    display: -webkit-box;
    align-items:center;
    -webkit-box-align:center;
}

效益如下:

亚洲必赢官网 26

二:垂直居中对齐

当今垂直已经居中对齐了,但是在档次上还未居中对齐,由此在档次上居中对齐,我们必要添加justify-content属性居中即可;
无异于为了包容UC浏览器,须求充裕 -webkit-box-pack:center;
代码变为如下:

CSS

.first-face { display: flex; display: -webkit-box; align-items:center;
-webkit-box-align:center; justify-content:center;
-webkit-box-pack:center; }

1
2
3
4
5
6
7
8
.first-face {
    display: flex;
    display: -webkit-box;
    align-items:center;
    -webkit-box-align:center;
    justify-content:center;
    -webkit-box-pack:center;
}

职能如下:

亚洲必赢官网 27

三:垂直居右对齐

规律和下边的垂直居中对齐是一个道理,只是值换了下而已;代码如下:

CSS

.first-face { display: flex; display: -webkit-box; align-items:center;
-webkit-box-align:center; justify-content:flex-end;
-webkit-box-pack:end; }

1
2
3
4
5
6
7
8
.first-face {
    display: flex;
    display: -webkit-box;
    align-items:center;
    -webkit-box-align:center;
    justify-content:flex-end;
    -webkit-box-pack:end;
}

效果如下:

亚洲必赢官网 28

  1. 大家随后来分别探访底部居左对齐,底部居中对齐,底部居右对齐.

一:底部居左对齐

实际上属性依然利用上面的,只是值换了刹那间而已;代码如下:

CSS

.first-face { display: flex; display: -webkit-box; align-items:flex-end;
-webkit-box-align:end; justify-content:flex-start;
-webkit-box-pack:start; }

1
2
3
4
5
6
7
8
.first-face {
    display: flex;
    display: -webkit-box;
    align-items:flex-end;
    -webkit-box-align:end;
    justify-content:flex-start;
    -webkit-box-pack:start;
}

成效如下:

亚洲必赢官网 29

二:底部居中对齐
代码变为如下:

CSS

.first-face { display: flex; display: -webkit-box; align-items:flex-end;
-webkit-box-align:end; justify-content:center; -webkit-box-pack:center;
}

1
2
3
4
5
6
7
8
.first-face {
    display: flex;
    display: -webkit-box;
    align-items:flex-end;
    -webkit-box-align:end;
    justify-content:center;
    -webkit-box-pack:center;
}

功效如下:

亚洲必赢官网 30

三:底部居右对齐
代码变为如下:

CSS

.first-face { display: flex; display: -webkit-box; align-items:flex-end;
-webkit-box-align:end; justify-content:flex-end; -webkit-box-pack:end; }

1
2
3
4
5
6
7
8
.first-face {
    display: flex;
    display: -webkit-box;
    align-items:flex-end;
    -webkit-box-align:end;
    justify-content:flex-end;
    -webkit-box-pack:end;
}

功效如下:

亚洲必赢官网 31

二:2丙
1. 水平上2端对齐; 需求运用的性质justify-content:
space-between;该属品质使首个元素在左边,最后一个元素在右侧。
故而代码变成如下:

CSS

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

1
2
3
4
.first-face {
    display: flex;
    justify-content: space-between;
}

唯独在UC浏览器下不见效,由此大家需求 display:
-webkit-box;和-webkit-box-pack:Justify;这两句代码;
display:
-webkit-box;我不多介绍,下边已经讲了,-webkit-box-pack:Justify;的意义是在box-pack表示水平等分父容器宽度。
所以为了包容UC浏览器,所以代码变成如下:

CSS

.first-face { display: flex; justify-content: space-between; display:
-webkit-box; -webkit-box-pack:Justify; }

1
2
3
4
5
6
.first-face {
    display: flex;
    justify-content: space-between;
    display: -webkit-box;
    -webkit-box-pack:Justify;
}

效率如下:

亚洲必赢官网 32

2. 笔直两端对齐;
笔直对齐须求利用到的flex-direction属性,该属性有一个值为column:主轴为垂直方向,源点在上沿。
代码变为如下:

CSS

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

1
2
3
4
5
.first-face {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

再增进justify-content:
space-between;表明两端对齐.然则在UC浏览器并不襄助该属性,使其不能垂直两端对齐,因而为了包容UC浏览器,要求利用-webkit-box;因而
整个代码变成如下:

CSS

.first-face { display: flex; justify-content: space-between;
-webkit-flex-direction: column; flex-direction: column; display:
-webkit-box; -webkit-box-direction: normal; -webkit-box-orient:
vertical; -webkit-box-pack:justify; }

1
2
3
4
5
6
7
8
9
10
.first-face {
    display: flex;
    justify-content: space-between;
    -webkit-flex-direction: column;
    flex-direction: column;
    display: -webkit-box;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-box-pack:justify;
}

如上行使 -webkit-box-direction: normal;
使其对齐方向为水平从左端开端,-webkit-box-orient:
vertical;使用那句代码告诉
浏览器是垂直的,-webkit-box-pack:justify;这句代码告诉浏览器垂直的两端对齐。
正如图所示:

亚洲必赢官网 33

3. 垂直居中两端对齐
代码如下:

CSS

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

1
2
3
4
5
6
.first-face {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

多加一句 align-items: center;代码;
表示交叉轴上居中对齐。同理在UC浏览器下不帮助的,因而大家为了包容UC浏览器,可以添加如下代码,由此所有代码如下:

CSS

.first-face { display: flex; justify-content: space-between;
-webkit-flex-direction: column; flex-direction: column;
align-items:center; display: -webkit-box; -webkit-box-direction: normal;
-webkit-box-orient: vertical; -webkit-box-pack:justify;
-webkit-box-align:center; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.first-face {
    display: flex;
    justify-content: space-between;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items:center;
 
    display: -webkit-box;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-box-pack:justify;
    -webkit-box-align:center;
}

再增加-webkit-box-align:center;那句代码,告诉浏览器垂直居中。
如下图所示:

亚洲必赢官网 34

4. 垂直居右两端对齐
代码如下:

CSS

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

1
2
3
4
5
6
.first-face {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

同理为了兼容UC浏览器,整个代码变成如下:

CSS

.first-face { display: flex; justify-content: space-between;
-webkit-flex-direction: column; flex-direction: column;
align-items:flex-end; display: -webkit-box; -webkit-box-direction:
normal; -webkit-box-orient: vertical; -webkit-box-pack:justify;
-webkit-box-align:end; }

1
2
3
4
5
6
7
8
9
10
11
12
.first-face {
    display: flex;
    justify-content: space-between;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items:flex-end;
    display: -webkit-box;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-box-pack:justify;
    -webkit-box-align:end;
}

和地点代码一样,只是改变了一晃垂直对齐情势而已;
正如图所示:

亚洲必赢官网 35

注意:上边由于岁月的关联,先不考虑UC浏览器的匹配

三:3丙
代码如下:
HTML代码:

CSS

<div class=”first-face container”> <span
class=”pip”>span> <span class=”pip”>span> <span
class=”pip”>span> <div>

1
2
3
4
5
<div class="first-face container">
    <span class="pip">span>
    <span class="pip">span>
    <span class="pip">span>
<div>

CSS代码如下:

CSS

.first-face { display: flex; flex-direction: column; justify-content:
space-between; } .pip:nth-child(2) { align-self: center; }
.pip:nth-child(3) { align-self: flex-end; }

1
2
3
4
5
6
7
8
9
10
11
.first-face {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.pip:nth-child(2) {
    align-self: center;
}
.pip:nth-child(3) {
    align-self: flex-end;
}

一般来说图所示:

亚洲必赢官网 36

四: 4丙
代码如下:
HTML代码:

CSS

<div class=”first-face container”> <div class=”column”>
<span class=”pip”></span> <span
class=”pip”></span> </div> <div class=”column”>
<span class=”pip”></span> <span
class=”pip”></span> </div> </div>

1
2
3
4
5
6
7
8
9
10
<div class="first-face container">
    <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
    </div>
    <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
    </div>
</div>

CSS代码如下:

CSS

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

1
2
3
4
5
6
7
8
9
.column{
    display: flex;
    justify-content: space-between;
}
.first-face {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

正如图所示:

亚洲必赢官网 37

五:5丙
HTML结构如下:

XHTML

<div class=”first-face container”> <div class=”column”>
<span class=”pip”></span> <span
class=”pip”></span> </div> <div class=”column”>
<span class=”pip”></span> </div> <div
class=”column”> <span class=”pip”></span> <span
class=”pip”></span> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="first-face container">
    <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
    </div>
    <div class="column">
        <span class="pip"></span>
    </div>
    <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
    </div>
</div>

css代码如下:

CSS

.column{ display: flex; justify-content: space-between; } .first-face {
display: flex; flex-direction: column; justify-content: space-between; }
.first-face .column:nth-of-type(2){ justify-content: center; }

1
2
3
4
5
6
7
8
9
10
11
12
.column{
    display: flex;
    justify-content: space-between;
}
.first-face {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.first-face .column:nth-of-type(2){
    justify-content: center;
}

一般来说图所示:

亚洲必赢官网 38

六:6丙
HTML结构如下:

XHTML

<div class=”first-face container”> <div class=”column”>
<span class=”pip”></span> <span
class=”pip”></span> </div> <div class=”column”>
<span class=”pip”></span> <span
class=”pip”></span> </div> <div class=”column”>
<span class=”pip”></span> <span
class=”pip”></span> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="first-face container">
    <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
    </div>
    <div class="column">
        <span class="pip"></span>
         <span class="pip"></span>
    </div>
    <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
    </div>
</div>

css代码如下:

CSS

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

1
2
3
4
5
6
7
8
9
.column{
    display: flex;
    justify-content: space-between;
}
.first-face {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

正如图所示:

亚洲必赢官网 39

7,8,9丙也是一个趣味,那里先不做了;

Flex布局包容知识点统计

一经父容器class为 box,子项目为item.
旧版语法如下:
一:定义容器的display属性。
旧语法如下写法:

CSS

.box { display: -moz-box; display: -webkit-box; display: box; }

1
2
3
4
5
.box {
    display: -moz-box;
    display: -webkit-box;
    display: box;
}

新版语法需求如下写:

CSS

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

1
2
3
4
.box{
    display: -webkit-flex;
    display: flex;
}

或者 行内

CSS

.box{ display: -webkit-inline-flex; display:inline-flex; }

1
2
3
4
.box{
    display: -webkit-inline-flex;
    display:inline-flex;
}

二:容器属性(旧版语法)

  1. box-pack 属性;(水平方向上对齐格局)
    box-pack定义子元素主轴对齐格局。

CSS

.box{ -moz-box-pack: center; -webkit-box-pack: center; box-pack: center;
}

1
2
3
4
5
.box{
    -moz-box-pack: center;
    -webkit-box-pack: center;
    box-pack: center;
}

box-pack属性总共有4个值:

.box{
box-pack: start | end | center | justify;
/*主轴对齐:左对齐(默许) | 右对齐 | 居中对齐 | 左右对齐*/
}

逐条值的意思如下:
start:
对于正常方向的框,首个子元素的左手缘被放在左边(最终的子元素后是颇具盈余的空中)
对此相反方向的框,最终子元素的右侧缘被放在右边(第一个子元素前是具备盈余的半空中)
end:
对于正规方向的框,最终子元素的左侧缘被放在左侧(第一个子元素前是兼具盈余的长空)。
对此相反方向的框,第一个子元素的左手缘被放在左边(最终子元素后是怀有盈余的上空)。
center:
均等地分开多余空间,其中一半空间被放到第三个子元素前,另一半被平放最后一个子元素后.
justify:
在每个子元素之间分割多余的上空(首个子元素前和尾声一个子元素后尚未多余的半空中)。

2.box-align 属性(垂直方向上的对齐格局)
box-align定义子元素交叉轴对齐形式。

CSS

.box{ -moz-box-align: center; /*Firefox*/ -webkit-box-align: center;
/*Safari,Opera,Chrome*/ box-align: center; }

1
2
3
4
5
.box{
    -moz-box-align: center; /*Firefox*/
    -webkit-box-align: center; /*Safari,Opera,Chrome*/
    box-align: center;
}

box-align属性总共有5个值:

CSS

.box{ box-align: start | end | center | baseline | stretch;
/*交叉轴对齐:顶部对齐(默许) | 尾部对齐 | 居中对齐 | 文本基线对齐 |
上下对齐并铺满*/ }

1
2
3
4
.box{
    box-align: start | end | center | baseline | stretch;
    /*交叉轴对齐:顶部对齐(默认) | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/
}

逐一值的意义如下:
start:
对此正规方向的框,每个子元素的上面缘沿着框的顶边放置。
对于反方向的框,每个子元素的下边缘沿着框的底层放置。
end:
对此正常方向的框,每个子元素的下面缘沿着框的底层放置。
对此反方向的框,每个子元素的上方缘沿着框的顶边放置。
center:
均等地划分多余的上空,一半放在子元素之上,另一半位居子元素之下。
baseline:
假如 box-orient 是inline-axis或horizontal,所有子元素均与其基线对齐。
stretch:
拉伸子元素以填充蕴含块

3.box-direction 属性
box-direction定义子元素的突显方向。

CSS

.box{ -moz-box-direction: reverse; /*Firefox*/ -webkit-box-direction:
reverse; /*Safari,Opera,Chrome*/ box-direction: reverse; }

1
2
3
4
5
.box{
    -moz-box-direction: reverse; /*Firefox*/
    -webkit-box-direction: reverse; /*Safari,Opera,Chrome*/
    box-direction: reverse;
}

box-direction属性总共有3个值:

CSS

.box{ box-direction: normal | reverse | inherit; /*突显方向:默许方向 |
反方向 | 继承子元素的 box-direction*/ }

1
2
3
4
.box{
    box-direction: normal | reverse | inherit;
    /*显示方向:默认方向 | 反方向 | 继承子元素的 box-direction*/
}

4.box-orient 属性

box-orient定义子元素是不是应水平或垂直排列。

CSS

.box{ -moz-box-orient: horizontal; /*Firefox*/ -webkit-box-orient:
horizontal; /*Safari,Opera,Chrome*/ box-orient: horizontal; }

1
2
3
4
5
.box{
    -moz-box-orient: horizontal; /*Firefox*/
    -webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/
    box-orient: horizontal;
}

box-orient属性总共有5个值:

CSS

.box{ box-orient: horizontal | vertical | inline-axis | block-axis |
inherit; /*排列方向:水平 | 垂直 | 行内形式排列(默许) | 块形式排列 |
继承父级的box-orient*/ }

1
2
3
4
.box{
    box-orient: horizontal | vertical | inline-axis | block-axis | inherit;
    /*排列方向:水平 | 垂直 | 行内方式排列(默认) | 块方式排列 | 继承父级的box-orient*/
}

horizontal: 在档次行中从左向右排列子元素。
vertical: 从上向下垂直排列子元素。
inline-axis: 沿着行内轴来排列子元素(映射为 horizontal)。
block-axis: 沿着块轴来排列子元素(映射为 vertical)。
inherit: 应该从父元素继承 box-orient 属性的值。

5.box-lines 属性
box-lines定义当子元素超出了容器是还是不是同意子元素换行。

CSS

.box{ -moz-box-lines: multiple; /*Firefox*/ -webkit-box-lines:
multiple; /*Safari,Opera,Chrome*/ box-lines: multiple; }

1
2
3
4
5
.box{
    -moz-box-lines: multiple; /*Firefox*/
    -webkit-box-lines: multiple; /*Safari,Opera,Chrome*/
    box-lines: multiple;
}

box-lines属性总共有2个值:

CSS

.box{ box-lines: single | multiple; /*允许换行:不允许(默许) |
允许*/ }

1
2
3
4
.box{
    box-lines: single | multiple;
    /*允许换行:不允许(默认) | 允许*/
}

single:伸缩盒对象的子元素只在一行内展现
multiple:伸缩盒对象的子元素超出父元素的空中时换行突显

6.box-flex 属性。
box-flex定义是不是允许当前子元素伸缩。

CSS

.item{ -moz-box-flex: 1.0; /*Firefox*/ -webkit-box-flex: 1.0;
/*Safari,Opera,Chrome*/ box-flex: 1.0; }

1
2
3
4
5
.item{
    -moz-box-flex: 1.0; /*Firefox*/
    -webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/
    box-flex: 1.0;
}

【亚洲必赢官网】H5移动端知识点统计,CSS3弹性伸缩布局。box-flex属性使用一个浮点值:

CSS

.item{ box-flex: ; /*伸缩:*/ }

1
2
3
4
.item{
    box-flex: ;
    /*伸缩:*/
}

7.box-ordinal-group 属性
box-ordinal-group定义子元素的显得次序,数值越小越排前。

.item{ -moz-box-ordinal-group: 1; /*Firefox*/
-webkit-box-ordinal-group: 1; /*Safari,Opera,Chrome*/
box-ordinal-group: 1; }

1
2
3
4
5
.item{
    -moz-box-ordinal-group: 1; /*Firefox*/
    -webkit-box-ordinal-group: 1; /*Safari,Opera,Chrome*/
    box-ordinal-group: 1;
}

box-direction属性使用一个整数值:

.item{ box-ordinal-group: ; /*来得次序:*/ }

1
2
3
4
.item{
    box-ordinal-group: ;
    /*显示次序:*/
}

新版语法如下:

概念容器的display属性:

.box{ display: -webkit-flex; /*webkit*/ display: flex; }
/*行内flex*/ .box{ display: -webkit-inline-flex; /*webkit*/
display:inline-flex; }

1
2
3
4
5
6
7
8
9
10
.box{
    display: -webkit-flex; /*webkit*/
    display: flex;
}
 
/*行内flex*/
.box{
    display: -webkit-inline-flex; /*webkit*/
    display:inline-flex;
}

容器样式

.box{ flex-direction: row | row-reverse | column | column-reverse;
/*主轴方向:左到右(默许) | 右到左 | 上到下 | 下到上*/ flex-wrap:
nowrap | wrap | wrap-reverse; /*换行:不换行(默许) | 换行 |
换行并率先行在凡间*/ flex-flow: ; /*主轴方向和换行简写*/
justify-content: flex-start | flex-end | center | space-between |
space-around; /*主轴对齐形式:左对齐(默许) | 右对齐 | 居中对齐 |
两端对齐 | 平均分布*/ align-items: flex-start | flex-end | center |
baseline | stretch; /*交叉轴对齐方式:顶部对齐(默许) | 尾部对齐 |
居中对齐 | 上下对齐并铺满 | 文本基线对齐*/ align-content: flex-start |
flex-end | center | space-between | space-around | stretch;
/*多主轴对齐:顶部对齐(默许) | 尾部对齐 | 居中对齐 | 上下对齐并铺满 |
上下平均分布*/ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.box{
    flex-direction: row | row-reverse | column | column-reverse;
    /*主轴方向:左到右(默认) | 右到左 | 上到下 | 下到上*/
 
    flex-wrap: nowrap | wrap | wrap-reverse;
    /*换行:不换行(默认) | 换行 | 换行并第一行在下方*/
 
    flex-flow: ;
    /*主轴方向和换行简写*/
 
    justify-content: flex-start | flex-end | center | space-between | space-around;
    /*主轴对齐方式:左对齐(默认) | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/
 
    align-items: flex-start | flex-end | center | baseline | stretch;
    /*交叉轴对齐方式:顶部对齐(默认) | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
 
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    /*多主轴对齐:顶部对齐(默认) | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/
}

flex-direction值介绍如下:
row: 默许值。灵活的门类将水平显得,正如一个行一样。
row-reverse: 与 row 相同,不过以相反的逐一。
column: 灵活的品类将垂直展现,正如一个列一样。
column-reverse: 与 column 相同,可是以相反的逐一。

flex-wrap 值介绍如下:
nowrap: flex容器为单行。该情状下flex子项可能会溢出容器。
wrap:
flex容器为多行。该景况下flex子项溢出的一对会被停放到新行,子项内部会发生断行。
wrap-reverse: 换行并率先行在人间

flex-flow值介绍如下(主轴方向和换行简写):
: 定义弹性盒子元素的排列方向
:控制flex容器是单行或者多行。

justify-content值介绍如下:
flex-start: 弹性盒子元素将向行先导地方对齐。
flex-end: 弹性盒子元素将向行终止地点对齐。
center: 弹性盒子元素将向行中间地方对齐。
space-between:
首个要素的界限与行的主起初地点的疆界对齐,同时最终一个因素的境界与行的主甘休地方的边距对齐,
而剩余的伸缩盒项目则平均分布,并确保两两以内的空白空间相当。

space-around:
伸缩盒项目则平均分布,并确保两两里边的空域空间非凡,同时率先个因素前的空中以及最终一个要素后的空间为别的空白空间的一半。

align-items值介绍如下:
flex-start:
弹性盒子元素的侧轴(纵轴)初阶地方的境界紧靠住该行的侧轴起先边界。
flex-end:
弹性盒子元素的侧轴(纵轴)开首地点的分界紧靠住该行的侧轴停止边界。
center:
弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺码小于弹性盒子元素的尺寸,则会向七个样子溢出同样的长短)。
baseline:
如弹性盒子元素的行内轴与侧轴为同样条,则该值与’flex-start’等效。其余情形下,该值将参与基线对齐。
stretch:
倘使指定侧轴大小的属性值为’auto’,则其值会使项目标边距盒的尺码尽可能接近所在行的尺寸,但与此同时会遵从’min/max-width/height’属性的范围。

align-content值介绍如下:
flex-start:
弹性盒子元素的侧轴(纵轴)早先地点的境界紧靠住该行的侧轴初阶边界。
flex-end:
弹性盒子元素的侧轴(纵轴)先河地点的界限紧靠住该行的侧轴甘休边界。
center:
弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如若该行的尺码小于弹性盒子元素的尺寸,则会向多个趋势溢出同样的尺寸)。
space-between:
第一行的侧轴起初边界紧靠住弹性盒容器的侧轴开始内容边界,最终一行的侧轴截至边界紧靠住弹性盒容器的侧轴为止内容边界,
剩余的行则按自然措施在弹性盒窗口中排列,以保险两两中间的空间极度。
space-around:
各行会按自然措施在弹性盒容器中排列,以有限支持两两时期的长空相当,同时率先行后面及最终一行前边的空中是其余空间的一半。
stretch:
各行将会展开以占用剩余的上空。若是剩余的上空是负数,该值等效于’flex-start’。在任何情状下,剩余空间被有着行平分,以恢宏它们的侧轴尺寸。

子元素属性

.item{ order: ; /*排序:数值越小,越排前,默许为0*/ flex-grow: ; /*
default 0 */
/*加大:默许0(即假若有结余空间也不放手,值为1则放大,2是1的双倍大小,以此类推)*/
flex-shrink: ; /* default 1 */
/*减少:默许1(假使空间欠缺则会压缩,值为0不减弱)*/ flex-basis: |
auto; /* default auto */
/*一直大小:默认为0,能够安装px值,也可以设置比例尺寸*/ flex: none |
[ ? || ] /*flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1
auto,*/ align-self: auto | flex-start | flex-end | center | baseline |
stretch; /*独立对齐形式:自动(默许) | 顶部对齐 | 底部对齐 | 居中对齐
| 上下对齐并铺满 | 文本基线对齐*/ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.item{
    order: ;
    /*排序:数值越小,越排前,默认为0*/
 
    flex-grow: ; /* default 0 */
    /*放大:默认0(即如果有剩余空间也不放大,值为1则放大,2是1的双倍大小,以此类推)*/
 
    flex-shrink: ; /* default 1 */
    /*缩小:默认1(如果空间不足则会缩小,值为0不缩小)*/
 
    flex-basis:  | auto; /* default auto */
    /*固定大小:默认为0,可以设置px值,也可以设置百分比大小*/
 
    flex: none | [  ? ||  ]
    /*flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto,*/
 
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    /*单独对齐方式:自动(默认) | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
}

合作写法

1. 先是是概念容器的 display 属性:

.box{ display: -webkit-box; /* 老版本语法: Safari, iOS, Android
browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法:
Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新本子语法: Chrome 21+ */ display: flex; /*
新本子语法: Opera 12.1, Firefox 22+ */ }

1
2
3
4
5
6
7
.box{
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

那边还要小心的是,假诺子元素是行内元素,在不少景色下都要选择display:block 或 display:inline-block
把行内子元素变为块元素(例如使用 box-flex
属性),那也是旧版语法和新版语法的界别之一。

2. 子元素主轴对齐方式(水平居中对齐)

.box{ -webkit-box-pack: center; -moz-justify-content: center;
-webkit-justify-content: center; justify-content: center; }

1
2
3
4
5
6
.box{
    -webkit-box-pack: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}

匹配写法新版语法的 space-around 是不可用的:如下新版语法space-around;

.box{ box-pack: start | end | center | justify;
/*主轴对齐:左对齐(默许) | 右对齐 | 居中对齐 | 左右对齐*/
justify-content: flex-start | flex-end | center | space-between |
space-around; /*主轴对齐格局:左对齐(默许) | 右对齐 | 居中对齐 |
两端对齐 | 平均分布*/ }

1
2
3
4
5
6
7
.box{
    box-pack: start | end | center | justify;
    /*主轴对齐:左对齐(默认) | 右对齐 | 居中对齐 | 左右对齐*/
 
    justify-content: flex-start | flex-end | center | space-between | space-around;
    /*主轴对齐方式:左对齐(默认) | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/
}

3. 子元素交叉轴对齐格局(垂直居中对齐)

.box{ box-align: start | end | center | baseline | stretch;
/*交叉轴对齐:顶部对齐(默许) | 底部对齐 | 居中对齐 | 文本基线对齐 |
上下对齐并铺满*/ align-items: flex-start | flex-end | center | baseline
| stretch; /*交叉轴对齐方式:顶部对齐(默许) | 底部对齐 | 居中对齐 |
上下对齐并铺满 | 文本基线对齐*/ }

1
2
3
4
5
6
7
.box{
    box-align: start | end | center | baseline | stretch;
    /*交叉轴对齐:顶部对齐(默认) | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/
 
    align-items: flex-start | flex-end | center | baseline | stretch;
    /*交叉轴对齐方式:顶部对齐(默认) | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
}

4. 子元素的浮现方向。

子元素的显得方向可透过 box-direction + box-orient + flex-direction
已毕,如下代码:
1. 左到右(水平方向)

.box{ -webkit-box-direction: normal; -webkit-box-orient: horizontal;
-moz-flex-direction: row; -webkit-flex-direction: row; flex-direction:
row; }

1
2
3
4
5
6
7
.box{
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

2. 右到左(水平方向)

.box{ -webkit-box-pack: end; -webkit-box-direction: reverse;
-webkit-box-orient: horizontal; -moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse; flex-direction: row-reverse; }

1
2
3
4
5
6
7
8
.box{
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

如上代码:box 写法的 box-direction
只是改变了子元素的排序,并从未改动对齐格局,要求新增一个 box-pack
来改变对齐形式。

3. 上到下(垂直方向上)

.box{ -webkit-box-direction: normal; -webkit-box-orient: vertical;
-moz-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; }

1
2
3
4
5
6
7
.box{
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

4. 下到上(垂直方向上)

.box{ -webkit-box-pack: end; -webkit-box-direction: reverse;
-webkit-box-orient: vertical; -moz-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse; flex-direction: column-reverse;
}

1
2
3
4
5
6
7
8
.box{
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

5. 是不是同意子元素伸缩

.item{ -webkit-box-flex: 1.0; -moz-flex-grow: 1; -webkit-flex-grow: 1;
flex-grow: 1; }

1
2
3
4
5
6
.item{
    -webkit-box-flex: 1.0;
    -moz-flex-grow: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

box语法中 box-flex 若是否0就象征该子元素允许伸缩,而flex是分开的,上边flex-grow 是允许放大(默许差距意)

.item{ -webkit-box-flex: 1.0; -moz-flex-shrink: 1; -webkit-flex-shrink:
1; flex-shrink: 1; }

1
2
3
4
5
6
.item{
    -webkit-box-flex: 1.0;
    -moz-flex-shrink: 1;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
}

flex-shrink 是允许裁减(默许允许)。box-flex
默许值为0,也就是说,在默许的情事下,在三个浏览器中的表现是不等同的:
介绍如下:

.item{ box-flex: ; /*伸缩:*/ flex-grow: ; /* default 0 */
/*拓宽:默许0(即假如有剩余空间也不放手,值为1则放大,2是1的双倍大小,以此类推)*/
flex-shrink: ; /* default 1 */
/*压缩:默许1(倘若空间欠缺则会压缩,值为0不裁减)*/ }

1
2
3
4
5
6
7
8
9
10
.item{
    box-flex: ;
    /*伸缩:*/
 
    flex-grow: ; /* default 0 */
    /*放大:默认0(即如果有剩余空间也不放大,值为1则放大,2是1的双倍大小,以此类推)*/
 
    flex-shrink: ; /* default 1 */
    /*缩小:默认1(如果空间不足则会缩小,值为0不缩小)*/
}

6. 子元素的展示次序

.item{ -webkit-box-ordinal-group: 1; -moz-order: 1; -webkit-order: 1;
order: 1; }

1
2
3
4
5
6
.item{
    -webkit-box-ordinal-group: 1;
    -moz-order: 1;
    -webkit-order: 1;
    order: 1;
}

注意:近日还有一个题材没有弄明白,旧版本中的这么些属性对应着新本子的
align-self属性,有领悟的请告诉,谢谢!

4 赞 30 收藏 2
评论

亚洲必赢官网 40

读书目录移动支付为主知识点

H5移动端知识点总计

CSS3弹性伸缩布局简介

二零零六年,W3C提出了一种全新的方案—-Flex布局(即弹性伸缩布局),它可以省事、完整、响应式地落到实处各样页面布局,包括直接令人很头痛的垂直水平居中也变得很简单地就化解了。可是那些布局格局还地处W3C的草案阶段,并且它还分为旧版本、新本子以及混合过渡版本二种区其余编码方式。其中混合过渡版本紧即使指向IE10做了同盟。近期flex布局用得比较多的照旧在移动端的布局,所以本次重大教学一下旧版本和新本子在移动端应用的逐条知识点,让我们对秘密的flex布局熟谙起来。

calc基本用法
box-sizing的知情及运用通晓
display:box的布局掌握
flex布局Flex布局包容知识点总计回到顶部运动支付主导知识点
一.
使用rem作为单位html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html { font-size: 112.5px; } }
@media(min-width: 400px) { html { font-size: 125px; } }
@media(min-width: 640px) { html { font-size: 200px; } }

阅读目录

旧版本(box)

第一看一下浏览器兼容意况:

亚洲必赢官网 41

 

PS:浏览器包容数据不自然很标准,可是相距不大。

上面将通过一个概括的实例来教学旧版本的次第属性:

html代码:

<div>
<p>爆发过的半空中依然看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很彻底啊是高科技(science and technology)傻空给暴发过的长空依然看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很绝望啊是高科技(science and technology)傻空给</p>
<p>爆发过的长空如故看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科学和技术傻空给</p>
<p>爆发过的长空依旧看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>

1
2
3
4
5
<div>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>

可以观望我们那个事例是很简单的,一个div元素内涵盖几个p元素,它们都是块元素(block)。接下来给段落加一些基础的体裁:

CSS

p{ width:150px; border:3px solid lightblue; background:lightgreen;
padding:5px; margin:5px; }

1
2
3
4
5
6
7
p{
    width:150px;
    border:3px solid lightblue;
    background:lightgreen;
    padding:5px;
    margin:5px;
}

那儿刷新网页看到的结果是这般的:

亚洲必赢官网 42

本条结果很正常吧!OK,现在我们给div元素设置为box,看看有怎么着变化:

CSS

div{ display:-webkit-box; display:box; }

1
2
3
4
div{
    display:-webkit-box;
    display:box;
}

俺们再度刷新网页,结果是这般的:

亚洲必赢官网 43

来看了啊,现在每一个p元素都成为一个box了,那就是弹性布局的神奇所在!

在上头中,大家将div元素的display设置为box,这就是旧版本的弹性布局。对于相比较旧的浏览器版本,大家需求丰裕-webkit-前缀。

旧版本的弹性布局有四个属性值:

  •  box : 将容器盒模型作为块级弹性伸缩盒彰显
  •   inline-box : 将容器盒模型作为内联级弹性伸缩盒突显

PS:我们了然块级它是挤占整行的,比如div元素;而内联级不占用整行,比如span元素。不过大家设置了全体盒子,他们都不占用,保持一致。如同我们地点的事例一样,给div元素设置了盒子,那么div元素里面的p元素就不占用了。

上边介绍旧版本弹性布局的顺序属性:

给手机安装100px的字体大小;
对于320px的手机兼容是100px,其余手机都是等比例非凡;
因此安排稿上是有点像素的话,那么转换为rem的时候,rem = 设计稿的像素/100
即可;

活动支付主导知识点

box-orient 属性

box-orient属性主要完成盒子内部因素的流淌方向。

CSS

div{ display:-webkit-box; display:box; -webkit-box-orient:vertical;
box-orient:vertical; }

1
2
3
4
5
6
div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:vertical;
    box-orient:vertical;
}

那时候的结果就是笔直排列:

亚洲必赢官网 44

 

此属性的属性值有:

  • horizontal : 伸缩项目从左到右水平排列
  •     vertical  : 伸缩项目从上到下垂直排列
  • inline-axis : 伸缩项目沿着内联轴排列呈现
  • block-axis : 伸缩项目沿着块轴排列呈现

我们不妨试一下:horizontal 和 inline-axis 都是水平排列,而vertical 和
block-axis 都是垂直排列。

二. 禁用a,button,input,optgroup,select,textarea
等标签背景变暗在活动端应用a标签做按钮的时候照旧文字连接的时候,点击按钮会冒出一个
“暗色的”背景,
譬如说如下代码:
<a href=””>button1</a><input type=”button”
value=”提交”/>在移动端点击后 会出现”暗色”的背景,
那儿大家要求在css参预如下代码即可:
a,button,input,optgroup,select,textarea{ -webkit-tap-highlight-color:
rgba(0,0,0,0);}三. meta基础知识点:
1.页面窗口自动调整到设备宽度,并禁止用户及缩放页面。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0,
minimum-scale=1.0,maximum-scale=1.0, user-scalable=0″ />
质量基本含义:
content=”width=device-width:控制 viewport 的轻重缓急,device-width
为设备的小幅initial-scale – 开首的缩放比例minimum-scale –
允许用户缩放到的微小比例maximum-scale –
允许用户缩放到的最大比例user-scalable – 用户是还是不是可以手动缩放

calc基本用法

box-direction属性

box-direction 属性重如果安装伸缩容器中的流动顺序。

CSS

div{ display:-webkit-box; display:box; -webkit-box-direction:reverse;
box-direction:reverse; }

1
2
3
4
5
6
div{
    display:-webkit-box;
    display:box;
    -webkit-box-direction:reverse;
    box-direction:reverse;
}

如此大家的排序就是反序的了,运行结果为:

亚洲必赢官网 45

此属性的属性值有:

  • normal  : 正常顺序,默许值
  • reverse : 反序

2.忽略将页面中的数字识别为电话号码<meta name=”format-detection”
content=”telephone=no” />

box-sizing的知情及运用

box-pack属性

box-pack 属性用于伸缩项目标遍布方式。

此属性的属性值有:

  • start   :  伸缩项目以开始点靠齐
  •   end   :  伸缩项目以甘休点靠齐
  • center :  伸缩项目以骨干点靠齐
  • justify  :  伸缩项目平局分布

下边大家都试一下种种属性值的成效:

1.start属性值

CSS

div{ -webkit-box-pack:start; box-pack:start; }

1
2
3
4
div{
    -webkit-box-pack:start;
    box-pack:start;
}

其一就是默许靠齐情势:

亚洲必赢官网 46

2.end属性值

CSS

div{ -webkit-box-pack: end ; box-pack: end ; }

1
2
3
4
5
6
div{
    -webkit-box-pack:
end ;
    box-pack:
end ;
}

本条就是以了却点靠齐:

亚洲必赢官网 47

3.center属性值

CSS

div{ -webkit-box-pack: center ; box-pack: center ; }

1
2
3
4
5
6
div{
    -webkit-box-pack:
center ;
    box-pack:
center ;
}

那就是居中对齐效果:

亚洲必赢官网 48

 

4.justify属性值

CoffeeScript

div{ -webkit-box-pack: justify ; box-pack: justify ; }

1
2
3
4
5
6
div{
    -webkit-box-pack:
justify ;
    box-pack:
justify ;
}

那个就是平均分布效果:

亚洲必赢官网 49

PS:垂直方向上也是同等的规律,但假诺height为auto的话,效果将出不来。所以须求给height设置一个定高(最好比默许情状高)。那时,就能来看在笔直方向上的成效了。那里自己就不再赘述了。

  1. 忽略Android平埃德蒙顿对邮箱地址的辨别<meta name=”format-detection”
    content=”email=no” />

  2. 当网站添加到主显示屏快捷启动格局,可隐藏地址栏,仅针对ios的safari<meta
    name=”apple-mobile-web-app-capable” content=”yes” />

  3. 将网站添加到主屏幕火速启动情势,仅针对ios的safari顶端状态条的样式<meta
    name=”apple-mobile-web-app-status-bar-style” content=”black” />

  4. 亟待在网站的根目录下存放favicon图标,幸免404请求(使用fiddler可以监听到),在页面上需加link如下:
    <link rel=”shortcut icon”
    href=”/favicon.ico”>因而页面上通用的沙盘如下:
    <!DOCTYPE html><html>
    <head>
    <meta charset=”utf-8″>
    <meta
    content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no”
    name=”viewport”>
    <meta content=”yes” name=”apple-mobile-web-app-capable”>
    <meta content=”black”
    name=”apple-mobile-web-app-status-bar-style”>
    <meta content=”telephone=no” name=”format-detection”>
    <meta content=”email=no” name=”format-detection”>
    <title>标题</title>
    <link rel=”shortcut icon” href=”/favicon.ico”>
    </head>
    <body>

理解display:box的布局

box-align属性

box-align 属性用来处理伸缩容器的附加空间。

此属性的属性值有:

  •      start  : 伸缩项目以顶部为条件,清理下部额外空间
  •      end    : 伸缩项目以底部为标准,清理上部额外空中
  •    center : 伸缩项目以中间为规范,平均清理内外部额外空中
  • baseline : 伸缩项目以基线为尺度,清理额外的空中
  • stretch  : 伸缩项目填充整个容器,默许值

一律的,大家将试一下每个属性值的成效:

1.start属性值

CSS

div{ display:-webkit-box; display:box; -webkit-box-align:start;
box-align:start; }

1
2
3
4
5
6
div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:start;
    box-align:start;
}

效益如下:

亚洲必赢官网 50

2.end属性值

CSS

div{ display:-webkit-box; display:box; -webkit-box-align: end ;
box-align: end ; }

1
2
3
4
5
6
7
8
div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:
end ;
    box-align:
end ;
}

成效如下:

亚洲必赢官网 51

3.center属性值

CSS

div{ display:-webkit-box; display:box; -webkit-box-align: center ;
box-align: center ; }

1
2
3
4
5
6
7
8
div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:
center ;
    box-align:
center ;
}

功用如下:

亚洲必赢官网 52

4.baseline属性值

即便box-orient是内嵌单轴或横向,所有的子元素都放置他们的基线对齐。

CSS

div{ display:-webkit-box; display:box; -webkit-box-orient:horizontal;
box-orient:horizontal; -webkit-box-align:baseline; box-align:baseline; }

1
2
3
4
5
6
7
8
div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:horizontal;
    box-orient:horizontal;
    -webkit-box-align:baseline;
    box-align:baseline;
}

效益如下:

亚洲必赢官网 53

而假如box-orient是块轴或者垂直方向的,那么富有的子元素都将居中垂直排列。

CSS

div{ display:-webkit-box; display:box; -webkit-box-orient: vertical ;
box-orient:vertical; -webkit-box-align:baseline; box-align:baseline; }

1
2
3
4
5
6
7
8
9
div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:
vertical ;
    box-orient:vertical;
    -webkit-box-align:baseline;
    box-align:baseline;
}

效用如下:

亚洲必赢官网 54

5.stretch属性值

装有子元素拉伸以填充包罗区块。

CSS

div{ display:-webkit-box; display:box; -webkit-box-align: stretch ;
box-align: stretch ; }

1
2
3
4
5
6
7
8
div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:
stretch ;
    box-align:
stretch ;
}

意义如下:

亚洲必赢官网 55

box-flex属性

box-flex
属品质够运用浮点数分配伸缩项目标比重。此属性是给容器内的品种安装的,它们会依照父容器的大幅度来分配它们所占的百分比:

CSS

p:nth-child(1){ -webkit-box-flex:1; box-flex:1; } p:nth-child(2){
-webkit-box-flex:3; box-flex:3; } p:nth-child(3){ -webkit-box-flex:1;
box-flex:1; }

1
2
3
4
5
6
7
8
9
10
11
12
p:nth-child(1){
    -webkit-box-flex:1;
    box-flex:1;
}
p:nth-child(2){
    -webkit-box-flex:3;
    box-flex:3;
}
p:nth-child(3){
    -webkit-box-flex:1;
    box-flex:1;
}

功能如下:

亚洲必赢官网 56

当然也得以稍微连串是原则性宽度的,那么任何的项目也会分配剩余的幅度,比如那里首先个p元素设置为定点宽度:

CSS

p:nth-child(2){ -webkit-box-flex:2; box-flex:2; } p:nth-child(3){
-webkit-box-flex:1; box-flex:1; }

1
2
3
4
5
6
7
8
p:nth-child(2){
    -webkit-box-flex:2;
    box-flex:2;
}
p:nth-child(3){
    -webkit-box-flex:1;
    box-flex:1;
}

成效如下:

亚洲必赢官网 57

更多利用状态,我们可以协调渐渐去品尝。

那边开始内容 </body></html>

理解flex布局

box-ordinal-group 属性

box-ordinal-group 属性可以安装伸缩项目标来得地点。

CSS

p:nth-child(1){ -webkit-box-ordinal-group:2; box-ordinal-group:2; }
p:nth-child(2){ -webkit-box-ordinal-group:3; box-ordinal-group:3; }
p:nth-child(3){ -webkit-box-ordinal-group:1; box-ordinal-group:1; }

1
2
3
4
5
6
7
8
9
10
11
12
p:nth-child(1){
    -webkit-box-ordinal-group:2;
    box-ordinal-group:2;
}
p:nth-child(2){
    -webkit-box-ordinal-group:3;
    box-ordinal-group:3;
}
p:nth-child(3){
    -webkit-box-ordinal-group:1;
    box-ordinal-group:1;
}

效果如下:

亚洲必赢官网 58

可以看到:首个p元素排在了第二,第三个p元素排在了第三,第八个p元素排在了第一。可以独立给某一个p元素设置此属性,其他体系会循规蹈矩原先的相继做改变。

OK,那么旧版本的持有属性就概括的介绍完了,越来越多结合的用法仍然根据须求协调多下手去操练一下。

此地举一个程度垂直居中的例子:

CSS

div{ display:-webkit-box; display:box; height:500px; border:1px solid
#f00; -webkit-box-pack:center; box-pack:center;
-webkit-box-align:center; box-align:center; }

1
2
3
4
5
6
7
8
9
10
div{
    display:-webkit-box;
    display:box;
    height:500px;
    border:1px solid #f00;
    -webkit-box-pack:center;
    box-pack:center;
    -webkit-box-align:center;
    box-align:center;
}

那么效果就是这般的了:

亚洲必赢官网 59

那儿我们再给p元素设置一个原则性的万丈:

CSS

p{ width:150px; height:200px; }

1
2
3
4
p{
    width:150px;
    height:200px;
}

那就是说此时的效益就是:

亚洲必赢官网 60

是否很轻松就贯彻了那种效益啊!

四:移动端如何定义字体font-familybody{font-family: “Helvetica Neue”,
Helvetica, sans-serif;}

Flex布局包容知识点统计

小结

好的,到此处旧版本的弹性布局基础知识点就都介绍了一晃。由于篇幅过长,怕我们看着疲惫,新本子的弹性布局(flex)我将身处下一篇博客介绍。希望能帮到咱们,同时尽请关注!

2 赞 6 收藏
评论

亚洲必赢官网 61

五:在android或者IOS下 拨打电话代码如下:<a
href=”tel:15602512356″>打电话给:15602512356</a>

回来顶部

六:发短信(winphone系统无效)<a href=”sms:10010″>发短信给:
10010</a>

运动支付主导知识点

七:调用手机系统自带的邮件功用1.
当浏览者点击那些链接时,浏览器会自动调用默许的客户端电子邮件程序,并在收件人框中自动填上收件人的地点上面
<p><a
href=”mailto:tugenhua@126.com”>发电子邮件</a></p>2、填写抄送地址;在IOS手机下:
在收件人地址后用?cc=开头;如下代码:<p><a
href=”mailto:tugenhua@126.com?cc=879083421@qq.com”>填写抄送地址</a></p>在android手机下,
一般来说代码:
<p><a
href=”mailto:tugenhua@126.com?879083421@qq.com”>填写抄送地址</a></p>3.
填上密件抄送地址,
一般来说代码:
在IOS手机下:紧跟着抄送地址然后,写上&bcc=,填上密件抄送地址<a
href=”mailto:tugenhua@126.com?cc=879083421@qq.com&bcc=aa@qq.com”>填上密件抄送地址</a>在安卓下;
如下代码:
<p><a
href=”mailto:tugenhua@126.com?879083421@qq.com?aa@qq.com”>填上密件抄送地址</a></p>4.
涵盖八个收件人、抄送、密件抄送人,用分号隔(;)开两个收件人的地址即可已毕。
一般来说代码:
<p><a
href=”mailto:tugenhua@126.com;879083421@qq.com;aa@qq.com”>包括八个收件人、抄送、密件抄送人,用分号隔(;)开五个收件人的地方即可兑现</a></p>5、包罗大旨,用?subject=可以填上宗旨。
正如代码:
<p><a
href=”mailto:tugenhua@126.com?subject=【诚邀函】”>包括大旨,可以填上大旨</a></p>6、包括内容,用?body=可以填上内容(需求换行的话,使用%0A给文本换行);
代码如下:
<p><a
href=”mailto:tugenhua@126.com?body=我来测试下”>包罗内容,用?body=可以填上内容</a></p>

一. 使用rem作为单位

  1. 内容包含链接,含http(s)://等的文书自动转发为链接。如下代码:<p><a
    href=”mailto:tugenhua@126.com?body=;

html { font-size: 100px; }

八:webkit表单输入框placeholder的颜色值改变:若是想要默认的水彩突显灰色,
代码如下:
input::-webkit-input-placeholder{color:red;}假诺想要用户点击变为藏蓝色,
代码如下:
input:focus::-webkit-input-placeholder{color:blue;}

@media(min-width: 320px) { html { font-size: 100px; } }

九:移动端IOS手机下清除输入框内阴影,代码如下input,textarea
{-webkit-appearance: none;}十:
在IOS中 禁止长按链接与图片弹出菜单a, img {-webkit-touch-callout:
none;}回到顶部calc基本用法calc基本语法:
.class {width: calc(expression);}
它可以扶助加,减,乘,除; 在我们做手机端的时候更加有效的一个知识点;
可取如下:

@media(min-width: 360px) { html { font-size: 112.5px; } }

  1. 支撑使用 “+”,”-“,”*” 和 “/” 四则运算。
  2. 可以勾兑使用百分比(%),px,em,rem等作为单位可进展测算。
    浏览器的包容性有如下:IE9+,FF4.0+,Chrome19+,Safari6+
    一般来说测试代码:
    <div class=”calc”>我是测试calc</div>.calc{
    margin-left:50px; padding-left:2rem; width:calc(100%-50px-2rem);
    height:10rem;}
    重回顶部box-sizing的驾驭及应用该属性是缓解盒模型在不相同的浏览器中显示不雷同的难题。
    它有五个属性值分别是:content-box: 默许值(标准盒模型);
    width和height只囊括内容的宽和高,不包蕴边框,内边距;
    比如如下div元素:<div class=”box”>box</div>css
    如下:.box {width:200px;height:200px;padding:10px;border:1px solid
    #333;margin:10px;box-sizing:content-box;}
    那就是说在浏览器下渲染的其实增幅和可观分别是:222px,222px;
    因为在正式的盒模型下,在浏览器中渲染的莫过于拉长率和中度概括内边距(padding)和边框的(border);
    如下图所示:border-box:
    width与height是包含内边距和边框的,不包含外地距,那是IE的新奇方式应用的盒模型,
    譬如照旧地方的代码:
    <div class=”box”>box</div>;
    css代码如下:
    .box {width:200px;height:200px;padding:10px;border:1px solid
    #333;margin:10px;box-sizing:border-box;}
    那就是说此时浏览器渲染的width会是178px,height也是178px;
    因为此时定义的width和height会包涵padding和border在内;
    利用那个特性对于在采取比例的情形下布局页面格外有用,比如有两列布局宽度都是50%;
    而是呢还有padding和border,那么这一个时候借使我们不利用该属性的话(当然我们也可以接纳calc方法来计量);
    这就是说总宽度会当先页面中的100%;因而这时候可以应用这些特性来使页面达到100%的布局.
    如下图所示:
    浏览器援救的品位如下:
    归来顶部精通display:box的布局display: box;
    box-flex
    是css3新加上的盒子模型属性,它可以为大家缓解按比列划分,水平均分,及垂直等高等。
    一:按百分比划分:方今box-flex 属性还尚无博得firefox, Opera,
    chrome浏览器的一心支持,但大家得以使用它们的村办属性定义firefox(-moz-),opera(-o-),chrome/safari(-webkit-)。
    box-flex属性主要让子容器针对父容器的宽度按一定的条条框框举办划分。
    代码如下:
    <div class=”test”>
    <p id=”p1″>Hello</p>
    <p id=”p2″>W3School</p>
    </div>
    <style>
    .test{
    display:-moz-box;
    display:-webkit-box;
    display:box;
    width:300px;
    }

@media(min-width: 400px) { html { font-size: 125px; } }

p1{

-moz-box-flex:1.0;
-webkit-box-flex:1.0;
box-flex:1;
border:1px solid red;
}

@media(min-width: 640px) { html { font-size: 200px; } }

p2{

-moz-box-flex:2.0;
-webkit-box-flex:2.0;
box-flex:2;
border:1px solid blue;
}
</style>
如下图所示:
注意:

  1. 非得给父容器定义 display: box,
    其子元素才得以开展分割。如上给id为p1设置box-flex设置为1,给id为p2设置box-flex为2,表明分别给其设置1等分和2等分,也就是说给id为p1元素设置宽度为
    300 * 1/3 = 100px; 给id为p2元素设置宽度为 300 * 2/3 = 200px;

  2. 一旦举行父容器划分的还要,他的子元素有的装置了步长,有的要拓展剪切的话,那么划分的幅度
    = 父容器的幅度 – 已经安装的肥瘦 。再开展对应的划分。

正如图所示:

二:box具体的性质如下:box-orient | box-direction | box-align | box-pack
| box-lines1. box-orient;box-orient
用来规定父容器里的子容器的排列方式,是程度依然垂直,
可选属性如下所示:
horizontal | vertical | inline-axis | block-axis | inherit一:horizontal
| inline-axis给box设置 horizontal 或 inline-axis 属性效果表现同样。

都足以将子元素举办水平排列.如下html代码:
<div class=”test”>
<p id=”p1″>Hello</p>
<p id=”p2″>W3School</p>
</div>

css代码如下:
<style>
.test{
display:-moz-box;
display:-webkit-box;
display:box;
width:300px;
height:200px;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
box-orient:horizontal;
}

给手机安装100px的字体大小;
对于320px的手机包容是100px,其余手机都是等比例格外;
由此陈设稿上是有点像素的话,那么转换为rem的时候,rem = 设计稿的像素/100
即可;

p1{

-moz-box-flex:1.0;
-webkit-box-flex:1.0;
box-flex:1;
border:1px solid red;
}

二.  禁用a,button,input,optgroup,select,textarea 等标签背景变暗

p2{

-moz-box-flex:2.0;
-webkit-box-flex:2.0;
box-flex:2;
border:1px solid blue;
}
</style>

一般来说图所示:
二:
vertical 可以让子元素举行垂直排列;
css代码如下:
<style>
*{margin:0;padding:0;}
.test{
display:-moz-box;
display:-webkit-box;
display:box;
width:300px;
height:200px;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
box-orient:vertical;
}

在活动端应用a标签做按钮的时候照旧文字连接的时候,点击按钮会冒出一个
“暗色的”背景,比如如下代码:

p1{

-moz-box-flex:1.0;
-webkit-box-flex:1.0;
box-flex:1;
border:1px solid red;
}

button1

p2{

-moz-box-flex:2.0;
-webkit-box-flex:2.0;
box-flex:2;
border:1px solid blue;
}
</style>

一般来说图所示:
三:
inherit。
Inherit属性让子元素继承父元素的相干属性。效果和率先种效应同样,都是程度对齐;2.
box-direction
抑或如下html代码:
<div class=”test”>
<p id=”p1″>Hello</p>
<p id=”p2″>W3School</p>
</div>box-direction 用来确定父容器里的子容器的排列顺序,
具体的属性如下代码所示:
normal | reverse |
inheritnormal是默许值,依据HTML文档里的社团的先后顺序依次体现,
假若box-direction 设置为 normal,则结构顺序仍旧id为p1元素,id为p2元素。reverse: 表示反转。
只要设置reverse反转,则结构排列顺序为 id为p2元素,id为p1元素。
正如代码:
css代码如下:
<style>
*{margin:0;padding:0;}
.test{
display:-moz-box;
display:-webkit-box;
display:box;
width:300px;
height:200px;
-moz-box-direction:reverse;
-webkit-box-direction:reverse;
box-direction:reverse;
}

在移动端点击后 会现出”暗色”的背景,那时候大家要求在css加入如下代码即可:

p1{

-moz-box-flex:1.0;
-webkit-box-flex:1.0;
box-flex:1;
border:1px solid red;
}

a,button,input,optgroup,select,textarea{

p2{

-moz-box-flex:2.0;
-webkit-box-flex:2.0;
box-flex:2;
border:1px solid blue;
}
</style>

一般来说图所示:

  1. box-align:box-align
    表示容器里面字容器的垂直对齐格局,可选参数如下表示:
    start | end | center | baseline | stretch1.
    对齐方式 start:
    意味着居顶对齐代码如下:
    <style>
    *{margin:0;padding:0;}
    .test{
    display:-moz-box;
    display:-webkit-box;
    display:box;
    width:300px;
    height:200px;
    -moz-box-align:start;
    -webkit-box-align:start;
    box-align:start;
    }

-webkit-tap-highlight-color: rgba(0,0,0,0);

p1{

-moz-box-flex:1.0;
-webkit-box-flex:1.0;
box-flex:1;
height:160px;
border:1px solid red;
}

}

p2{

-moz-box-flex:2.0;
-webkit-box-flex:2.0;
box-flex:2;
height:100px;
border:1px solid blue;
}
</style>

如上 P1 高度为160px p2 为100px;

对齐方式如下图所示:
假使改为end的话,那么就是 居低对齐了,
如下:
center表示居中对齐,如下:stretch
在box-align表示拉伸,拉伸与其父容器等高。
一般来说代码:
在firefox下 和父容器下等高,满意条件,如下:在chrome下不满意条件;

如下:

  1. box-packbox-pack表示父容器里面子容器的档次对齐方式,
    可选参数如下表示:start | end | center | justifybox-pack:start;
    表示水平居左对齐,对于健康方向的框,首个子元素的左侧缘被放在左边(最终的子元素后是所有盈余的长空)对于相反方向的框,最终子元素的左侧缘被放在左边(第三个子元素前是富有盈余的空中)

代码如下所示:
<style>
*{margin:0;padding:0;}
.test{
display:-moz-box;
display:-webkit-box;
display:box;
width:400px;
height:120px;
border:1px solid #333;
-moz-box-pack:start;
-webkit-box-pack:start;
box-pack:start;
}

三. meta基础知识点:

p1{

width:100px;
height:108px;
border:1px solid red;
}

1.页面窗口自动调整到设备宽度,并禁止用户及缩放页面。

p2{

width:100px;
height:108px;
border:1px solid blue;
}
</style>

正如图所示:
box-pack:center;表示水平居中对齐,均等地分开多余空间,其中一半空间被平放首个子元素前,另一半被安放最终一个子元素后;

一般来说图所示:
box-pack:end;表示水平居右对齐;对于正常方向的框,最终子元素的左边缘被放在右边(第二个子元素前是颇具盈余的上空)。对于相反方向的框,第三个子元素的左手缘被放在左侧(最终子元素后是所有盈余的空中)。

正如图所示:

box-pack:Justify:
在box-pack代表水平等分父容器宽度(在各类子元素之间分割多余的上空(第四个子元素前和尾声一个子元素后尚未多余的长空))

如下:
回来顶部知道flex布局我们传统的布局格局是基于在盒子模型下的,器重于display属性的,position属性的或者是float属性的,但是在价值观的布局方面并不好布局;
譬如我们想让某个元素垂直居中的话,我们普遍的会让其元素表现为表格格局,
譬如display:table-cell属性什么的,我们前些天来读书下利用flex布局是不行有利于的;近期的浏览器支持程度:IE10+,chrome21+,opera12.1+,Firefox22+,safari6.1+等;

亚洲必赢官网 ,如上浏览器的支撑程度,大家得以把此因素采取在移动端很有利;flex是哪些啊?
Flex是Flexible
Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
flex的弹性布局有如下优势:

1.单独的冲天控制与对齐。
2.单身的因素顺序。
3.点名元素之间的关联。
4.灵活的尺码与对齐格局。

一:
基本概念:
利用flex布局的元素,称为flex容器,它的具有子元素自动变成容器成员,称为flex项目。
如下图:
容器默许存在2根轴,水平的主轴和垂直的侧轴,主轴的开头地方(与边框的交叉点)叫做main
start, 截至地方叫做 main end.交叉轴的始发地点叫做 cross
start,为止地点叫做cross end。
花色默许沿主轴排列。
单个项目占用的主轴空间叫做main size,占据的穿插轴空间叫做cross size。

二:
容器有如下6个属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content我们独家来看下上边6个属性有怎么样值,分别代表如何看头。

  1. flex-direction:该属性决定主轴的可行性(即项目标排列方向)。
    它或许有多个值:row(默许值):主轴为水平方向,起源在左端。
    row-reverse:主轴为水平方向,起源在右端。
    column:主轴为垂直方向,源点在上沿。
    column-reverse:主轴为垂直方向,起源在下沿。
    大家来做多少个demo,来分别通晓下方面几个值的含义;
    我这边只讲解上边首个和第一个值的意义,上面的也是一样,就不上课了;
    比如页面上有一个器皿,里面有一个元素,看下这么些元素的排列方向。
    HTML代码:
    (如没有特意的讲明,下边的html代码都是该协会):
    <div class=”first-face container”>
    <span class=”pip”>
    </span>
    </div>
    css代码如下:
    <style>
    html, body { height: 100%; }
    .container { width:150px; height:150px; border:1px solid red; }
    .first-face { display: flex; display: -webkit-flex; flex-direction:
    row; -webkit-flex-direction:row; display: -webkit-box;
    -webkit-box-pack:start; }

.pip { display:block; width: 24px; height: 24px; border-radius: 50%;
background-color: #333; }
</style>注意:
在android平台的uc浏览器和微信浏览器中行使display: flex;
会出问题。
不协助该属性,由此利用display: flex;的时候须求添加display:
-webkit-box;
再有一部分程度对齐或者垂直对齐都要求加上对应的box-pack(box-pack代表父容器里面子容器的品位对齐方式)及box-align(box-align
表示容器里面子容器的垂直对齐方式).具体的可以看如下介绍的
display:box属性那一节。
咱俩得以看下截图如下:
当我们把flex-direction的值改为
row-reverse后(主轴为水平方向,源点在右端),大家截图如下所示:

  1. flex-wrap属性 默许情形下,项目都排在一条线(又称”轴线”)上。
    flex-wrap属性定义,即使一条轴线排不下,可以换行。
    它有如下五个值:nowrap(默认):不换行。
    wrap:换行,第一行在下面。
    wrap-reverse:换行,第一行在人世。
  2. flex-flow该属性是flex-direction属性和flex-wrap属性的简写方式,默许值为row
    nowrap
  3. justify-content属性justify-content属性定义了项目在主轴上的对齐方式。上面如果主轴为从左到右。值为如下:flex-start
    | flex-end | center | space-between |
    space-around;flex-start(默认值) 左对齐flex-end 右对齐center
    居中space-between:
    两端对齐,项目里面的间隔都等于space-around:每个项目两侧的间距相等。
  4. align-items属性align-items属性定义项目在交叉轴上什么样对齐。它恐怕取5个值:flex-start:交叉轴的起源对齐。
    flex-end:交叉轴的顶峰对齐。center:交叉轴的中点对齐。baseline:
    项目的第一行文字的基线对齐。stretch(默许值):如若项目未安装高度或设为auto,将占满整个容器的万丈。
  5. align-content属性align-content属性定义了多根轴线的对齐方式。假使项目唯有一根轴线,该属性不起成效。该属性可能取6个值。
    flex-start:与交叉轴的起源对齐。
    flex-end:与交叉轴的顶峰对齐。
    center:与交叉轴的中点对齐。
    space-between:与接力轴两端对齐,轴线之间的区间平均分布。
    space-around:每根轴线两侧的间距都格外。
    故此,轴线之间的间距比轴线与边框的间距大一倍。stretch(默许值):轴线占满整个交叉轴。

三:项目的质量,以下有6个特性可以安装在项目中,orderflex-growflex-shrinkflex-basisflexalign-self1.
order属性order属性定义项目标排列顺序。
数值越小,排列越靠前,默许为0。
着力语法:.xx {order: <integer>;}

  1. flex-grow属性flex-grow属性定义项目标松手比例,默许为0,即若是存在剩余空间,也不松手基本语法:.xx
    {flex-grow: <number>;}
  2. flex-shrink属性flex-shrink属性定义了档次的紧缩比例,默许为1,即假若空间欠缺,该项目将压缩。
    着力语法:.xx {flex-shrink: <number>;}
  3. flex-basis属性flex-basis属性定义了在分配多余空间以前,项目占据的主轴空间(main
    size)。浏览器按照那个特性,统计主轴是还是不是有剩余空间。它的默许值为auto,即项目标自然大小。基本语法:.xx
    { flex-basis: <length> | auto;
    }它可以设为跟width或height属性一样的值(比如350px),则项目将占用一定空间。
  4. flex属性flex属性是flex-grow, flex-shrink 和
    flex-basis的简写,默许值为0 1 auto。后八个属性可选。
  5. align-self属性align-self属性允许单个项目有与其他类型不等同的对齐格局,可覆盖align-items属性。默许值为auto,表示继续父元素的align-items属性,若是没有父元素,则等同stretch。
    主导语法:.xx {align-self: auto | flex-start | flex-end | center |
    baseline |
    stretch;}上边是基本语法,感觉好模糊啊,看到那般多介绍,感觉很迷茫啊,上边大家乘机来落到实处下demo。
    我们广大人会不会打麻将呢?打麻将中有1-9丙对吗,我们来分别来促成他们的布局;

第一大家的HTML代码依旧如下(假如没有专门的印证都是这样的结构):
一:
1丙HTML代码:
<div class=”first-face container”>
<span class=”pip”>
</span>
</div>
上面代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。
借使有四个类型,就要添加三个span元素,以此类推。
css代码结构如下:
<style>
html, body { height: 100%; }
.container { width:150px; height:150px; border:1px solid red; }
.first-face { }
.pip { display:block; width: 24px; height: 24px; border-radius: 50%;
background-color: #333; }
</style>

  1. 首先,唯有一个左上角的情状下,flex布局默许为左对齐,由此须求display:flex

即可;如下代码:
.first-face { display: flex; display: -webkit-box;}
地点为了包容UC浏览器和IOS浏览器下,因而必要添加display:
-webkit-box;来合作,大家也晓得,假若不加上.first-face里面的代码,也能做出效果,因为元素默许都是向左对齐的,
一般来说图所示:
俺们继承来看看对元素举行居中对齐;
需求加上 justify-content:
center;即可;然则在UC浏览器下不匡助该属性,大家水平对齐须求丰富box-pack,box-pack表示父容器里面子容器的档次对齐方式,具体的值如上面介绍的box的语法,需求丰盛-webkit-box-pack:center;
因此在first-face里面的
css代码变为如下代码:
.first-face { display: flex; display: -webkit-box;
justify-content:center; -webkit-box-pack:center;}
功能如下:
地点已经介绍过justify-content属性定义了项目在主轴上的对齐方式(水平方向上),有七个值,那里不再介绍,具体可以看上边的中坚语法。水平右对齐代码也同样、由此代码变成如下:
.first-face { display: flex; display: -webkit-box;
justify-content:flex-end; -webkit-box-pack:end;}如下图所示:

  1. 咱俩跟着来分别看看垂直居左对齐,垂直居中对齐,垂直居右对齐.一:垂直居左对齐我们现在急需采用上align-items属性了,该属性定义项目在交叉轴上怎么着对齐。
    现实的语法如上:
    一律为了包容UC浏览器或其他不帮忙的浏览器,大家须要加上box-align
    该属性表示容器里面字容器的垂直对齐格局;具体的语法如上;因而代码变成如下:
    .first-face { display: flex; display: -webkit-box;
    align-items:center; -webkit-box-align:center;}
    成效如下:
    二:垂直居中对齐现在笔直已经居中对齐了,然而在档次上还未居中对齐,由此在档次上居中对齐,我们须要丰裕justify-content属性居中即可;同样为了包容UC浏览器,必要加上
    -webkit-box-pack:center;
    代码变为如下:
    .first-face { display: flex; display: -webkit-box;
    align-items:center; -webkit-box-align:center;
    justify-content:center; -webkit-box-pack:center;}效果如下:
    三:垂直居右对齐原理和地点的垂直居中对齐是一个道理,只是值换了下而已;

代码如下:.first-face { display: flex; display: -webkit-box;
align-items:center; -webkit-box-align:center; justify-content:flex-end;
-webkit-box-pack:end;}
功效如下:
3.我们跟着来分别探访底部居左对齐,头部居中对齐,尾部居右对齐.一:底部居左对齐其实属性如故选取上面的,只是值换了一晃而已;
代码如下:
.first-face { display: flex; display: -webkit-box; align-items:flex-end;
-webkit-box-align:end; justify-content:flex-start;
-webkit-box-pack:start;}
功用如下:
二:尾部居中对齐代码变为如下:
.first-face { display: flex; display: -webkit-box; align-items:flex-end;
-webkit-box-align:end;
justify-content:center; -webkit-box-pack:center;}
效益如下:
三:底部居右对齐代码变为如下:
.first-face { display: flex; display: -webkit-box; align-items:flex-end;
-webkit-box-align:end; justify-content:flex-end;
-webkit-box-pack:end;}
效能如下:
二:2丙1. 品位上2端对齐;须求选用的性质justify-content:
space-between;该属品质使第二个因素在左边,最后一个要素在右手。
据此代码变成如下:
.first-face { display: flex; justify-content:
space-between;}然而在UC浏览器下不奏效,由此大家要求 display:
-webkit-box;和-webkit-box-pack:Justify;
那两句代码;display:
-webkit-box;我不多介绍,上边已经讲了,-webkit-box-pack:Justify;的含义是在box-pack表示水平等分父容器宽度。
故而为了包容UC浏览器,所以代码变成如下:.first-face { display: flex;
justify-content: space-between; display: -webkit-box;
-webkit-box-pack:Justify;}
功效如下:

  1. 笔直两端对齐;垂直对齐要求运用到的flex-direction属性,该属性有一个值为column:主轴为垂直方向,源点在上沿。
    代码变为如下:.first-face { display: flex; justify-content:
    space-between; flex-direction: column;}再添加justify-content:
    space-between;表达两端对齐.可是在UC浏览器并不协理该属性,使其不可以垂直两端对齐,因而为了包容UC浏览器,要求选择-webkit-box;
    据此所有代码变成如下:
    .first-face { display: flex; justify-content: space-between;
    -webkit-flex-direction: column; flex-direction: column; display:
    -webkit-box; -webkit-box-direction: normal; -webkit-box-orient:
    vertical; -webkit-box-pack:justify;}
    如上行使 -webkit-box-direction: normal;
    使其对齐方向为水平从左端起先,-webkit-box-orient:
    vertical;使用那句代码告诉浏览器是垂直的,-webkit-box-pack:justify;
    那句代码告诉浏览器垂直的双方对齐。
    如下图所示:
    3 . 垂直居中两端对齐代码如下:
    .first-face { display: flex; flex-direction: column;
    justify-content: space-between; align-items: center;}
    多加一句 align-items: center;代码;
    代表交叉轴上居中对齐。同理在UC浏览器下不帮助的,因而我们为了兼容UC浏览器,可以加上如下代码,因而总体代码如下:
    .first-face { display: flex; justify-content: space-between;
    -webkit-flex-direction: column; flex-direction: column;
    align-items:center; display: -webkit-box; -webkit-box-direction:
    normal; -webkit-box-orient: vertical; -webkit-box-pack:justify;
    -webkit-box-align:center;}
    再加上-webkit-box-align:center;那句代码,告诉浏览器垂直居中。
    一般来说图所示:
  2. 笔直居右两端对齐代码如下:
    .first-face { display: flex; flex-direction: column;
    justify-content: space-between; align-items:
    flex-end;}同理为了包容UC浏览器,
    全副代码变成如下:
    .first-face { display: flex; justify-content: space-between;
    -webkit-flex-direction: column; flex-direction: column;
    align-items:flex-end; display: -webkit-box; -webkit-box-direction:
    normal; -webkit-box-orient: vertical; -webkit-box-pack:justify;
    -webkit-box-align:end;}
    和地方代码一样,只是改变了一晃笔直对齐情势而已;如下图所示:注意:上面由于时日的关系,先不考虑UC浏览器的匹配三:
    3丙代码如下:
    HTML代码:
    <div class=”first-face container”>
    <span class=”pip”></span>
    <span class=”pip”></span>
    <span class=”pip”></span></div>

CSS代码如下:
.first-face { display: flex; flex-direction: column; justify-content:
space-between;}.pip:nth-child(2) { align-self: center;}
.pip:nth-child(3) { align-self: flex-end;}

正如图所示:
四:
4丙代码如下:
HTML代码:
<div class=”first-face container”>
<div class=”column”>
<span class=”pip”></span>
<span class=”pip”></span>
</div>
<div class=”column”>
<span class=”pip”></span>
<span class=”pip”></span>
</div></div>

CSS代码如下:
.column{ display: flex; justify-content: space-between;}
.first-face { display: flex; flex-direction: column; justify-content:
space-between;}如下图所示:
五:
5丙HTML结构如下:
<div class=”first-face container”>
<div class=”column”>
<span class=”pip”></span>
<span class=”pip”></span>
</div>
<div class=”column”>
<span class=”pip”></span>
</div>
<div class=”column”>
<span class=”pip”></span>
<span class=”pip”></span>
</div></div>
css代码如下:
.column{ display: flex; justify-content: space-between;}
.first-face { display: flex; flex-direction: column; justify-content:
space-between;}
.first-face .column:nth-of-type(2){ justify-content: center;}

如下图所示:
六:6丙HTML布局如下:
<div class=”first-face container”>
<div class=”column”>
<span class=”pip”></span>
<span class=”pip”></span>
</div> <div class=”column”>
<span class=”pip”></span>
<span class=”pip”></span>
</div> <div class=”column”>
<span class=”pip”></span>
<span class=”pip”></span>
</div></div>
css代码如下:
.column{ display: flex; justify-content: space-between;}
.first-face { display: flex; flex-direction: column; justify-content:
space-between;}

如下图所示:

7,8,9丙也是一个趣味,那里先不做了;回到顶部Flex布局包容知识点统计如若父容器class为
box,子项目为item.旧版语法如下:一:定义容器的display属性。
旧语法如下写法:
.box { display: -moz-box; display: -webkit-box; display: box;}
新版语法要求如下写:
.box{ display: -webkit-flex; display: flex;}或者 行内.box{ display:
-webkit-inline-flex; display:inline-flex;}

二:容器属性(旧版语法)

  1. box-pack 属性;(水平方向上对齐情势)box-pack定义子元素主轴对齐格局。
    .box{ -moz-box-pack: center; -webkit-box-pack: center; box-pack:
    center;}box-pack
    特性总共有4个值:
    .box{box-pack: start | end | center | justify;}
    逐一值的意义如下:
    start:对于健康方向的框,第一个子元素的左手缘被放在左侧(最终的子元素后是负有盈余的空中)对于相反方向的框,最终子元素的左边缘被放在左边(首个子元素前是兼备盈余的上空)
    end:对于健康方向的框,最终子元素的右侧缘被放在右边(第二个子元素前是所有盈余的空中)。对于相反方向的框,第三个子元素的左边缘被放在右边(最后子元素后是富有盈余的半空中)。
    center:均等地撩拨多余空间,其中一半空中被内置首个子元素前,另一半被平放最终一个子元素后
    justify:在各类子元素之间分割多余的长空(第二个子元素前和末段一个子元素后不曾多余的空中)。
    2.box-align
    属性(垂直方向上的对齐形式)box-align定义子元素交叉轴对齐情势。
    .box{ -moz-box-align: center;
    -webkit-box-align: center;
    box-align: center;}
    box-align属性总共有5个值:
    .box{ box-align: start | end | center | baseline | stretch; }
    逐一值的意义如下:
    start:对于健康方向的框,每个子元素的上方缘沿着框的顶边放置。对于反方向的框,每个子元素的上面缘沿着框的最底层放置。
    end:对于正规方向的框,每个子元素的下边缘沿着框的底部放置。对于反方向的框,每个子元素的上方缘沿着框的顶边放置。center:均等地分开多余的长空,一半位居子元素之上,另一半身处子元素之下。
    baseline:倘诺 box-orient
    是inline-axis或horizontal,所有子元素均与其基线对齐。stretch:拉伸子元素以填充包括块3.box-direction
    属性box-direction定义子元素的来得方向。
    .box{ -moz-box-direction: reverse; -webkit-box-direction: reverse;
    box-direction: reverse;}box-direction属性总共有3个值:
    .box{ box-direction: normal | reverse | inherit; }
    4.box-orient 属性box-orient定义子元素是不是应水平或垂直排列。.box{
    -moz-box-orient: horizontal; -webkit-box-orient: horizontal;
    box-orient: horizontal;}box-orient属性总共有5个值:
    .box{ box-orient: horizontal | vertical | inline-axis | block-axis |
    inherit; }horizontal: 在档次行中从左向右排列子元素。vertical:
    从上向下垂直排列子元素。inline-axis: 沿着行内轴来排列子元素(映射为
    horizontal)。
    block-axis: 沿着块轴来排列子元素(映射为 vertical)。
    inherit: 应该从父元素继承 box-orient 属性的值。5.box-lines
    属性box-lines定义当子元素超出了容器是还是不是允许子元素换行。
    .box{ -moz-box-lines: multiple; -webkit-box-lines: multiple;
    box-lines: multiple;}

box-lines属性总共有2个值:
.box{ box-lines: single | multiple;
}single:伸缩盒对象的子元素只在一行内体现multiple:伸缩盒对象的子元素超出父元素的空间时换行展现6.box-flex
属性。box-flex定义是或不是同意当前子元素伸缩。.item{ -moz-box-flex: 1.0;
-webkit-box-flex: 1.0; box-flex: 1.0;}box-flex属性使用一个浮点值:.item{
box-flex: <value>; }7.box-ordinal-group
属性box-ordinal-group定义子元素的来得次序,数值越小越排前。.item{
-moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1;
box-ordinal-group: 1;}

box-direction属性使用一个整数值:.item{ box-ordinal-group:
<integer>; }
新版语法如下:定义容器的display属性:
.box{ display: -webkit-flex; display: flex;}
.box{ display: -webkit-inline-flex; display:inline-flex;}
容器样式
.box{ flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <flex-direction> <flex-wrap>;
justify-content: flex-start | flex-end | center | space-between |
space-around; align-items: flex-start | flex-end | center | baseline |
stretch;
align-content: flex-start | flex-end | center | space-between |
space-around | stretch; }

flex-direction值介绍如下:
row: 默许值。灵活的档次将水平显得,正如一个行一样。row-reverse: 与 row
相同,不过以相反的依次。
column: 灵活的门类将垂直展现,正如一个列一样。column-reverse: 与 column
相同,不过以相反的各种。
flex-wrap 值介绍如下:nowrap: flex容器为单行。
该情形下flex子项可能会溢出容器。wrap:
flex容器为多行。该境况下flex子项溢出的一对会被放置到新行,子项内部会发出断行。
wrap-reverse:
换行并首先行在下方flex-flow值介绍如下(主轴方向和换行简写):
<flex-direction>:
定义弹性盒子元素的排列方向<flex-wrap>:控制flex容器是单行或者多行。
justify-content值介绍如下:flex-start:
弹性盒子元素将向行先河地方对齐。flex-end:
弹性盒子元素将向行终止地点对齐。
center: 弹性盒子元素将向行中间地点对齐。
space-between:
首个因素的分界与行的主起先地点的疆界对齐,同时最终一个因素的边际与行的主截至地方的边距对齐,而剩下的伸缩盒项目则平均分布,并保管两两里面的空白空间十分。space-around:
伸缩盒项目则平均分布,并保管两两时期的空白空间相当,同时率先个要素前的半空中以及最终一个元素后的空中为任何空白空间的一半。

align-items值介绍如下:flex-start:
弹性盒子元素的侧轴(纵轴)伊始地点的边界紧靠住该行的侧轴起首边界。
flex-end:
弹性盒子元素的侧轴(纵轴)开首地方的边际紧靠住该行的侧轴停止边界。center:
弹性盒子元素在该行的侧轴(纵轴)上居中放置。(借使该行的尺寸小于弹性盒子元素的尺码,则会向三个样子溢出一致的长短)。
baseline:
如弹性盒子元素的行内轴与侧轴为同样条,则该值与’flex-start’等效。别的意况下,该值将出席基线对齐。
stretch:
即使指定侧轴大小的属性值为’auto’,则其值会使项目标边距盒的尺寸尽可能接近所在行的尺寸,但同时会依据’min/max-width/height’属性的范围。
align-content值介绍如下:flex-start:
弹性盒子元素的侧轴(纵轴)开首地点的界线紧靠住该行的侧轴开始边界。
flex-end:
弹性盒子元素的侧轴(纵轴)先导地点的边际紧靠住该行的侧轴甘休边界。center:
弹性盒子元素在该行的侧轴(纵轴)上居中放置。(要是该行的尺寸小于弹性盒子元素的尺码,则会向八个趋势溢出一致的长度)。
space-between:
第一行的侧轴起首边界紧靠住弹性盒容器的侧轴先河内容边界,最终一行的侧轴截至边界紧靠住弹性盒容器的侧轴截至内容边界,剩余的行则按一定措施在弹性盒窗口中排列,以保全两两之内的空中极度。
space-around:
各行会按自然艺术在弹性盒容器中排列,以维持两两以内的上空非常,同时率先行前边及最终一行后边的半空中是任何空间的一半。
stretch:
各行将会展开以占用剩余的空中。若是剩余的空间是负数,该值等效于’flex-start’。在其他意况下,剩余空间被所有行平分,以增加它们的侧轴尺寸。子元素属性
.item{ order: <integer>;
flex-grow: <number>;
flex-shrink: <number>;
flex-basis: <length> | auto;
flex: none | [ <‘flex-grow’> <‘flex-shrink’>? ||
<‘flex-basis’> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
匹配写法

  1. 第一是概念容器的 display 属性:
    .box{ display: -webkit-box; display: -moz-box; display: -ms-flexbox;
    display: -webkit-flex; display: flex; }
    此地还要注意的是,即使子元素是行内元素,在重重情景下都要利用
    display:block 或
    display:inline-block把行内子元素变为块元素(例如利用 box-flex
    属性),那也是旧版语法和新版语法的分别之一。
  2. 子元素主轴对齐形式(水平居中对齐).box{ -webkit-box-pack: center;
    -moz-justify-content: center; -webkit-justify-content: center;
    justify-content: center;}

合作写法新版语法的 space-around
是不可用的:如下新版语法space-around;.box{ box-pack: start | end |
center | justify; justify-content: flex-start | flex-end | center |
space-between | space-around; }

  1. 子元素交叉轴对齐格局(垂直居中对齐).box{ box-align: start | end |
    center | baseline | stretch; align-items: flex-start | flex-end |
    center | baseline | stretch; }4.
    子元素的来得方向。子元素的突显方向可由此 box-direction +
    box-orient + flex-direction 完结,
    一般来说代码:

  2. 左到右(水平方向).box{ -webkit-box-direction: normal;
    -webkit-box-orient: horizontal; -moz-flex-direction: row;
    -webkit-flex-direction: row; flex-direction: row;}

  3. 右到左(水平方向)
    .box{ -webkit-box-pack: end; -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal; -moz-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse; flex-direction: row-reverse;}
    如上代码:box 写法的 box-direction
    只是改变了子元素的排序,并不曾改动对齐格局,须要新增一个 box-pack
    来改变对齐格局。

  4. 上到下(垂直方向上).box{ -webkit-box-direction: normal;
    -webkit-box-orient: vertical; -moz-flex-direction: column;
    -webkit-flex-direction: column; flex-direction: column;}

  5. 下到上(垂直方向上).box{ -webkit-box-pack: end;
    -webkit-box-direction: reverse; -webkit-box-orient: vertical;
    -moz-flex-direction: column-reverse; -webkit-flex-direction:
    column-reverse; flex-direction: column-reverse;}

  6. 是还是不是允许子元素伸缩.item{ -webkit-box-flex: 1.0; -moz-flex-grow: 1;
    -webkit-flex-grow: 1; flex-grow: 1;}box语法中 box-flex
    如若不是0就表示该子元素允许伸缩,而flex是分离的,上边 flex-grow
    是允许放大(默许不相同意).item{ -webkit-box-flex: 1.0;
    -moz-flex-shrink: 1; -webkit-flex-shrink: 1; flex-shrink:
    1;}flex-shrink 是同意减弱(默许允许)。box-flex
    默许值为0,也就是说,在默许的情况下,在八个浏览器中的表现是不均等的:
    介绍如下:.item{ box-flex: <value>; flex-grow: <number>;
    flex-shrink: <number>; }

  7. 子元素的彰显次序.item{ -webkit-box-ordinal-group: 1; -moz-order: 1;
    -webkit-order: 1; order: 1;}

特性基本含义:

content=”width=device-width:

决定 viewport 的大小,device-width 为设备的幅度

initial-scale – 开首的缩放比例

minimum-scale – 允许用户缩放到的小不点儿比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 用户是不是足以手动缩放

2.忽略将页面中的数字识别为电话号码

  1. 忽略Android平埃德蒙顿对邮箱地址的甄别

  2. 当网站添加到主屏幕快捷启动方式,可隐藏地址栏,仅针对ios的safari

  3. 将网站添加到主屏幕快捷启动格局,仅针对ios的safari顶端状态条的体裁

6.
需求在网站的根目录下存放favicon图标,防止404呼吁(使用fiddler可以监听到),在页面上需加link如下:

因而页面上通用的模版如下:

标题

此处伊始内容

四:移动端怎么样定义字体font-family

body{font-family: “Helvetica Neue”, Helvetica, sans-serif;}

五:在android或者IOS下 拨打电话代码如下:

通话给:15602512356

六:发短信(winphone系统无效)

发短信给: 10010

七:调用手机系统自带的邮件作用

1.
当浏览者点击这么些链接时,浏览器会自行调用默认的客户端电子邮件程序,并在收件人框中自动填上收件人的地址下面

发电子邮件

2、填写抄送地址;

在IOS手机下:在收件人地址后用?cc=起头;

如下代码:

填写抄送地址

在android手机下,如下代码:

填写抄送地址

  1. 填上密件抄送地址,如下代码:

在IOS手机下:紧跟着抄送地址然后,写上&bcc=,填上密件抄送地址

填上密件抄送地址

在安卓下;如下代码:

填上密件抄送地址

4.
暗含两个收件人、抄送、密件抄送人,用分号隔(;)开多少个收件人的地点即可完成。如下代码:

带有三个收件人、抄送、密件抄送人,用分号隔(;)开多少个收件人的位置即可兑现

5、包蕴大旨,用?subject=可以填上宗旨。如下代码:

包蕴宗旨,可以填上主题

6、包涵内容,用?body=可以填上内容(须要换行的话,使用%0A给文本换行);代码如下:

包罗内容,用?body=可以填上内容

  1. 内容涵盖链接,含http(s)://等的文件自动转接为链接。如下代码:

内容包罗链接,含http(s)://等的文书自动转化为链接

八:webkit表单输入框placeholder的颜色值改变:

一经想要默许的颜色突显粉色,代码如下:

input::-webkit-input-placeholder{color:red;}

若是想要用户点击变为肉色,代码如下:

input:focus::-webkit-input-placeholder{color:blue;}

九:移动端IOS手机下清除输入框内阴影,代码如下

input,textarea {

-webkit-appearance: none;

}

十:在IOS中 禁止长按链接与图片弹出菜谱

a, img {

-webkit-touch-callout: none;

}

重回顶部

calc基本用法

calc基本语法:

.class {width: calc(expression);}

它可以扶助加,减,乘,除; 在大家做手机端的时候尤其管用的一个知识点;

可取如下:

  1. 支撑使用 “+”,”-“,”*” 和 “/” 四则运算。

  2. 可以勾兑使用百分比(%),px,em,rem等作为单位可进展计算。

浏览器的包容性有如下:

IE9+,FF4.0+,Chrome19+,Safari6+

一般来说测试代码:

自家是测试calc

.calc{

margin-left:50px;

padding-left:2rem;

width:calc(100%-50px-2rem);

height:10rem;

}

回去顶部

box-sizing的明亮及使用

该属性是竭泽而渔盒模型在差距的浏览器中表现分歧的标题。它有三个属性值分别是:

content-box: 默认值(标准盒模型);
width和height只囊括内容的宽和高,不包罗边框,内边距;

譬如说如下div元素:

box

css如下:.box {width:200px;height:200px;padding:10px;border:1px solid
#333;margin:10px;box-sizing:content-box;}

这就是说在浏览器下渲染的骨子里增幅和可观分别是:222px,222px;
因为在业内的盒模型下,在浏览器中渲染的其实增幅和惊人概括

内边距(padding)和边框的(border);如下图所示:

border-box:
width与height是概括内边距和边框的,不包涵外地距,那是IE的稀奇古怪形式选拔的盒模型,比如依然地方的代码:

box

;

css代码如下:

.box {width:200px;height:200px;padding:10px;border:1px solid
#333;margin:10px;box-sizing:border-box;}

那就是说此时浏览器渲染的width会是178px,height也是178px;
因为那时候概念的width和height会包含padding和border在内;

选取那一个特性对于在行使比例的气象下布局页面分外有用,比如有两列布局宽度都是50%;可是呢还有padding和border,那么那个

时候如果大家不利用该属性的话(当然大家也得以利用calc方法来测算);
那么总宽度会当先页面中的100%;由此那时候可以动用那

个属性来使页面达到100%的布局.如下图所示:

浏览器协理的品位如下:

归来顶部

理解display:box的布局

display: box; box-flex
是css3新增进的盒子模型属性,它可以为大家缓解按比列划分,水平均分,及垂直等高级。

一:按百分比划分:

现阶段box-flex 属性还未曾取得firefox, Opera,
chrome浏览器的一心匡助,但大家可以运用它们的个体属性定义firefox(-moz-),opera(-o-),chrome/safari(-webkit-)。box-flex属性紧要让子容器针对父容器的涨幅按自然的平整进行分割。
代码如下:

Hello

W3School

.test{

display:-moz-box;

display:-webkit-box;

display:box;

width:300px;

}

#p1{

-moz-box-flex:1.0;

-webkit-box-flex:1.0;

box-flex:1;

border:1px solid red;

}

#p2{

-moz-box-flex:2.0;

-webkit-box-flex:2.0;

box-flex:2;

border:1px solid blue;

}

一般来说图所示:

注意:

  1. 总得给父容器定义 display: box,
    其子元素才得以展开私分。如上给id为p1设置box-flex设置为1,给id为p2设置box-flex为2,

证实分别给其安装1等分和2等分,也就是说给id为p1元素设置宽度为 300 * 1/3
= 100px; 给id为p2元素设置宽度为 300 * 2/3 = 200px;

2.
万一进展父容器划分的同时,他的子元素有的设置了小幅,有的要进行剪切的话,那么划分的涨幅
= 父容器的涨幅 – 已经安装的升幅 。

再拓展相应的分割。

一般来说图所示:

二:box具体的品质如下:

box-orient | box-direction | box-align | box-pack | box-lines

  1. box-orient;

box-orient
用来规定父容器里的子容器的排列格局,是程度依旧垂直,可选属性如下所示:

horizontal | vertical | inline-axis | block-axis | inherit

一:horizontal | inline-axis

给box设置 horizontal 或 inline-axis
属性效果表现一样。都得以将子元素进行水平排列.

如下html代码:

Hello

W3School

css代码如下:

.test{

display:-moz-box;

display:-webkit-box;

display:box;

width:300px;

height:200px;

-moz-box-orient:horizontal;

-webkit-box-orient:horizontal;

box-orient:horizontal;

}

#p1{

-moz-box-flex:1.0;

-webkit-box-flex:1.0;

box-flex:1;

border:1px solid red;

}

#p2{

-moz-box-flex:2.0;

-webkit-box-flex:2.0;

box-flex:2;

border:1px solid blue;

}

正如图所示:

二:vertical 可以让子元素举行垂直排列;

css代码如下:

*{margin:0;padding:0;}

.test{

display:-moz-box;

display:-webkit-box;

display:box;

width:300px;

height:200px;

-moz-box-orient:vertical;

-webkit-box-orient:vertical;

box-orient:vertical;

}

#p1{

-moz-box-flex:1.0;

-webkit-box-flex:1.0;

box-flex:1;

border:1px solid red;

}

#p2{

-moz-box-flex:2.0;

-webkit-box-flex:2.0;

box-flex:2;

border:1px solid blue;

}

正如图所示:

三:inherit。
Inherit属性让子元素继承父元素的相关属性。效果和第一种效能一样,都是水平对齐;

  1. box-direction

或者如下html代码:

Hello

W3School

box-direction
用来规定父容器里的子容器的排列顺序,具体的特性如下代码所示:

normal | reverse | inherit

normal是默许值,根据HTML文档里的结构的先后顺序依次显示,
要是box-direction 设置为 normal,则结构顺序照旧 id为p1元素,id为p2元素。

reverse: 表示反转。如果设置reverse反转,则结构排列顺序为
id为p2元素,id为p1元素。如下代码:

css代码如下:

*{margin:0;padding:0;}

.test{

display:-moz-box;

display:-webkit-box;

display:box;

width:300px;

height:200px;

-moz-box-direction:reverse;

-webkit-box-direction:reverse;

box-direction:reverse;

}

#p1{

-moz-box-flex:1.0;

-webkit-box-flex:1.0;

box-flex:1;

border:1px solid red;

}

#p2{

-moz-box-flex:2.0;

-webkit-box-flex:2.0;

box-flex:2;

border:1px solid blue;

}

如下图所示:

  1. box-align:

box-align 表示容器里面字容器的垂直对齐格局,可选参数如下表示:

start | end | center | baseline | stretch

  1. 对齐方式 start:表示居顶对齐

代码如下:

*{margin:0;padding:0;}

.test{

display:-moz-box;

display:-webkit-box;

display:box;

width:300px;

height:200px;

-moz-box-align:start;

-webkit-box-align:start;

box-align:start;

}

#p1{

-moz-box-flex:1.0;

-webkit-box-flex:1.0;

box-flex:1;

height:160px;

border:1px solid red;

}

#p2{

-moz-box-flex:2.0;

-webkit-box-flex:2.0;

box-flex:2;

height:100px;

border:1px solid blue;

}

如上 P1 中度为160px p2 为100px; 对齐格局如下图所示:

借使改为end的话,那么就是 居低对齐了,如下:

center代表居中对齐,如下:

stretch 在box-align表示拉伸,拉伸与其父容器等高。如下代码:

在firefox下 和父容器下等高,满意条件,如下:

在chrome下不满意条件;如下:

  1. box-pack

box-pack表示父容器里面子容器的品位对齐格局,可选参数如下表示:

start | end | center | justify

box-pack:start;
表示水平居左对齐,对于正规方向的框,第二个子元素的左侧缘被放在右侧(最终的子元素后是兼备盈余的空间)

对此相反方向的框,最终子元素的右侧缘被放在左侧(首个子元素前是富有盈余的半空中)代码如下所示:

*{margin:0;padding:0;}

.test{

display:-moz-box;

display:-webkit-box;

display:box;

width:400px;

height:120px;

border:1px solid #333;

-moz-box-pack:start;

-webkit-box-pack:start;

box-pack:start;

}

#p1{

width:100px;

height:108px;

border:1px solid red;

}

#p2{

width:100px;

height:108px;

border:1px solid blue;

}

正如图所示:

box-pack:center;表示水平居中对齐,均等地分开多余空间,其中一半空间被平放第二个子元素前,另一半被安置最后一个子元素后;
如下图所示:

box-pack:end;表示水平居右对齐;对于正规方向的框,最终子元素的右侧缘被放在右边(第四个子元素前是负有盈余的空间)。

对此相反方向的框,第三个子元素的左侧缘被放在右侧(最终子元素后是有所盈余的上空)。如下图所示:

box-pack:Justify:

在box-pack代表水平等分父容器宽度(在各种子元素之间分割多余的长空(第二个子元素前和尾声一个子元素后尚未多余的半空中))

如下:

回来顶部

理解flex布局

大家传统的布局方式是依照在盒子模型下的,看重于display属性的,position属性的或者是float属性的,但是在观念的布局方面并不佳布局;
比如大家想让某个元素垂直居中的话,大家广大的会让其元素表现为表格方式,比如display:table-cell属性什么的,大家现在来读书下利用flex布局是可怜有益的;

眼前的浏览器扶助程度:IE10+,chrome21+,opera12.1+,Firefox22+,safari6.1+等;

如上浏览器的支撑程度,我们可以把此因素接纳在移动端很有利;

flex是何许吧?Flex是Flexible
Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的油滑。

flex的弹性布局有如下优势:

1.单身的中度控制与对齐。

2.单独的元素顺序。

3.点名元素之间的关系。

4.灵活的尺码与对齐格局。

一:基本概念:

运用flex布局的元素,称为flex容器,它的具备子元素自动成为容器成员,称为flex项目。如下图:

容器默许存在2根轴,水平的主轴和垂直的侧轴,主轴的发端地点(与边框的交叉点)叫做main
start, 甘休地点叫做 main end.

交叉轴的启幕地点叫做 cross start,截止地方叫做cross
end。项目默认沿主轴排列。单个项目占用的主轴空间叫做main size,

侵吞的接力轴空间叫做cross size。

二:容器有如下6个属性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

咱俩独家来看下下边6个特性有哪些值,分别代表如何看头。

  1. flex-direction:该属性决定主轴的倾向(即项目标排列方向)。

它恐怕有多少个值:

row(默许值):主轴为水平方向,源点在左端。

row-reverse:主轴为水平方向,源点在右端。

column:主轴为垂直方向,起源在上沿。

column-reverse:主轴为垂直方向,源点在下沿。

咱俩来做多少个demo,来分别领悟下方面多少个值的含义;我那边只讲解下面第二个和首个值的意思,上面的也是平等,

就不上课了;
比如页面上有一个容器,里面有一个因素,看下那一个元素的排列方向。

HTML代码:(如没有专门的验证,上边的html代码都是该社团):

css代码如下:

html, body {

height: 100%;

}

.container {

width:150px;

height:150px;

border:1px solid red;

}

.first-face {

display: flex;

display: -webkit-flex;

flex-direction: row;

-webkit-flex-direction:row;

display: -webkit-box;

-webkit-box-pack:start;

}

.pip {

display:block;

width: 24px;

height: 24px;

border-radius: 50%;

background-color: #333;

}

留神:在android平台的uc浏览器和微信浏览器中动用display:
flex;会出难点。不协助该属性,因而利用display:
flex;的时候须求添加display: -webkit-box;
还有局地水准对齐或者垂直对齐都亟待添加对应的box-pack(box-pack表示父容器里面子容器的品位对齐格局)及box-align(box-align
代表容器里面子容器的垂直对齐格局).具体的可以看如下介绍的
display:box属性那一节。

俺们可以看下截图如下:

当大家把flex-direction的值改为
row-reverse后(主轴为水平方向,起源在右端),我们截图如下所示:

  1. flex-wrap属性
    默许情状下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,借使一条轴线排不下,可以换行。

它有如下五个值:

nowrap(默认):不换行。

wrap:换行,第一行在上面。

wrap-reverse:换行,第一行在江湖。

  1. flex-flow

该属性是flex-direction属性和flex-wrap属性的简写方式,默许值为row nowrap

  1. justify-content属性

justify-content属性定义了花色在主轴上的对齐形式。上边假使主轴为从左到右。

值为如下:

flex-start | flex-end | center | space-between | space-around;

flex-start(默认值) 左对齐

flex-end 右对齐

center 居中

space-between: 两端对齐,项目里面的区间都等于

space-around:每个连串两侧的距离相等。

  1. align-items属性

align-items属性定义项目在陆续轴上什么样对齐。

它可能取5个值:

flex-start:交叉轴的源点对齐。

flex-end:交叉轴的终极对齐。

center:交叉轴的中点对齐。

baseline: 项目标率先行文字的基线对齐。

stretch(默许值):借使项目未安装中度或设为auto,将占满整个容器的万丈。

  1. align-content属性

align-content属性定义了多根轴线的对齐格局。若是项目唯有一根轴线,该属性不起功能。

该属性可能取6个值。

flex-start:与交叉轴的源点对齐。

flex-end:与交叉轴的顶峰对齐。

center:与交叉轴的中点对齐。

space-between:与接力轴两端对齐,轴线之间的区间平均分布。

space-around:每根轴线两侧的区间都等于。所以,轴线之间的距离比轴线与边框的距离大一倍。

stretch(默许值):轴线占满整个交叉轴。

三:项目的习性,以下有6个特性可以设置在档次中,

order

flex-grow

flex-shrink

flex-basis

flex

align-self

  1. order属性

order属性定义项目的排列顺序。数值越小,排列越靠前,默许为0。

焦点语法:

.xx {order: ;}

  1. flex-grow属性

flex-grow属性定义项目标松手比例,默许为0,即假如存在剩余空间,也不加大

主干语法:

.xx {

flex-grow: ;

}

  1. flex-shrink属性

flex-shrink属性定义了花色的压缩比例,默认为1,即只要空间欠缺,该品种将缩短。

着力语法:

.xx {

flex-shrink: ;

}

  1. flex-basis属性

flex-basis属性定义了在分配多余空间此前,项目占用的主轴空间(main
size)。浏览器依据那一个特性,计算主轴是不是有多余空间。它的默许值为auto,即项目标自然大小。

要旨语法:

.xx { flex-basis: | auto; }

它可以设为跟width或height属性一样的值(比如350px),则项目将占据一定空间。

  1. flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默许值为0 1
auto。后多个特性可选。

  1. align-self属性

align-self属性允许单个项目有与任何品类不相同的对齐形式,可覆盖align-items属性。

默认值为auto,表示继续父元素的align-items属性,如果没有父元素,则同样stretch。

宗旨语法:

.xx {

align-self: auto | flex-start | flex-end | center | baseline | stretch;

}

上边是主导语法,感觉好模糊啊,看到如此多介绍,感觉很糊涂啊,上面我们乘机来贯彻下demo。

俺们广大人会不会打麻将呢?打麻将中有1-9丙对啊,我们来分别来落到实处他们的布局;

首先大家的HTML代码仍然如下(假使没有专门的验证都是如此的社团):

一: 1丙

HTML代码:

上边代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有四个体系,就要添加三个span元素,以此类推。css代码结构如下:

html, body {

height: 100%;

}

.container {

width:150px;

height:150px;

border:1px solid red;

}

.first-face {

}

.pip {

display:block;

width: 24px;

height: 24px;

border-radius: 50%;

background-color: #333;

}

1.
第一,唯有一个左上角的气象下,flex布局默许为左对齐,因而须要display:flex即可;如下代码:

.first-face {

display: flex;

display: -webkit-box;

}

地点为了包容UC浏览器和IOS浏览器下,由此要求添加display:
-webkit-box;来合作,我们也晓得,即使不加上.first-face里面的代码,也能做出成效,因为元素默许都是向左对齐的,如下图所示:

俺们继承来看看对元素进行居中对齐; 须求添加 justify-content:
center;即可;不过在UC浏览器下不帮忙该属性,

大家水平对齐须求添加box-pack,box-pack表示父容器里面子容器的水平对齐方式,具体的值如上边介绍的box的语法,

内需加上 -webkit-box-pack:center;
因此在first-face里面的css代码变为如下代码:

.first-face {

display: flex;

display: -webkit-box;

justify-content:center;

-webkit-box-pack:center;

}

功效如下:

地方已经介绍过justify-content属性定义了项目在主轴上的对齐格局(水平方向上),有七个值,这里不再介绍,具体可以看上边的主导语法。

水平右对齐代码也一致、因而代码变成如下:

.first-face {

display: flex;

display: -webkit-box;

justify-content:flex-end;

-webkit-box-pack:end;

}

一般来说图所示:

  1. 大家随后来分别探访垂直居左对齐,垂直居中对齐,垂直居右对齐.

一:垂直居左对齐

咱俩明日亟待利用上align-items属性了,该属性定义项目在交叉轴上如何对齐。具体的语法如上:

如出一辙为了包容UC浏览器或任何不接济的浏览器,大家须求丰盛box-align
该属性表示容器里面字容器的垂直对齐格局;具体的语法如上;

故而代码变成如下:

.first-face {

display: flex;

display: -webkit-box;

align-items:center;

-webkit-box-align:center;

}

效果如下:

二:垂直居中对齐

现行垂直已经居中对齐了,然而在档次上还未居中对齐,由此在档次上居中对齐,大家必要添加justify-content属性居中即可;

一致为了包容UC浏览器,须求添加 -webkit-box-pack:center;

代码变为如下:

.first-face {

display: flex;

display: -webkit-box;

align-items:center;

-webkit-box-align:center;

justify-content:center;

-webkit-box-pack:center;

}

功能如下:

三:垂直居右对齐

规律和下面的垂直居中对齐是一个道理,只是值换了下而已;代码如下:

.first-face {

display: flex;

display: -webkit-box;

align-items:center;

-webkit-box-align:center;

justify-content:flex-end;

-webkit-box-pack:end;

}

功效如下:

  1. 俺们随后来分别看看尾部居左对齐,底部居中对齐,尾部居右对齐.

一:底部居左对齐

其实属性仍然利用下面的,只是值换了弹指间而已;代码如下:

.first-face {

display: flex;

display: -webkit-box;

align-items:flex-end;

-webkit-box-align:end;

justify-content:flex-start;

-webkit-box-pack:start;

}

功效如下:

二:尾部居中对齐

代码变为如下:

.first-face {

display: flex;

display: -webkit-box;

align-items:flex-end;

-webkit-box-align:end;

justify-content:center;

-webkit-box-pack:center;

}

作用如下:

三:尾部居右对齐

代码变为如下:

.first-face {

display: flex;

display: -webkit-box;

align-items:flex-end;

-webkit-box-align:end;

justify-content:flex-end;

-webkit-box-pack:end;

}

功效如下:

二:2丙

  1. 水平上2端对齐;需求使用的特性justify-content:
    space-between;该属品质使第一个要素在左手,最终一个元素在左边。

故此代码变成如下:

.first-face {

display: flex;

justify-content: space-between;

}

唯独在UC浏览器下不见效,因而我们必要 display:
-webkit-box;和-webkit-box-pack:Justify;那两句代码;

display:
-webkit-box;我不多介绍,上边已经讲了,-webkit-box-pack:Justify;的意义是在box-pack代表水平等分父容器宽度。

从而为了包容UC浏览器,所以代码变成如下:

.first-face {

display: flex;

justify-content: space-between;

display: -webkit-box;

-webkit-box-pack:Justify;

}

职能如下:

  1. 垂直两端对齐;

笔直对齐必要采纳到的flex-direction属性,该属性有一个值为column:主轴为垂直方向,源点在上沿。

代码变为如下:

.first-face {

display: flex;

justify-content: space-between;

flex-direction: column;

}

再加上justify-content:
space-between;表明两端对齐.但是在UC浏览器并不支持该属性,使其不能垂直两端对齐,因而为了兼容UC浏览器,需求利用-webkit-box;因而总体代码变成如下:

.first-face {

display: flex;

justify-content: space-between;

-webkit-flex-direction: column;

flex-direction: column;

display: -webkit-box;

-webkit-box-direction: normal;

-webkit-box-orient: vertical;

-webkit-box-pack:justify;

}

如上运用 -webkit-box-direction: normal;
使其对齐方向为水平从左端开端,-webkit-box-orient:
vertical;使用这句代码告诉

浏览器是笔直的,-webkit-box-pack:justify;这句代码告诉浏览器垂直的互相对齐。

如下图所示:

3 . 垂直居中两端对齐

代码如下:

.first-face {

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: center;

}

多加一句 align-items: center;代码;
表示交叉轴上居中对齐。同理在UC浏览器下不支持的,由此我们为了包容UC浏览器,可以加上如下代码,由此总体代码如下:

.first-face {

display: flex;

justify-content: space-between;

-webkit-flex-direction: column;

flex-direction: column;

align-items:center;

display: -webkit-box;

-webkit-box-direction: normal;

-webkit-box-orient: vertical;

-webkit-box-pack:justify;

-webkit-box-align:center;

}

再添加-webkit-box-align:center;那句代码,告诉浏览器垂直居中。如下图所示:

  1. 笔直居右两端对齐

代码如下:

.first-face {

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: flex-end;

}

同理为了包容UC浏览器,整个代码变成如下:

.first-face {

display: flex;

justify-content: space-between;

-webkit-flex-direction: column;

flex-direction: column;

align-items:flex-end;

display: -webkit-box;

-webkit-box-direction: normal;

-webkit-box-orient: vertical;

-webkit-box-pack:justify;

-webkit-box-align:end;

}

和方面代码一样,只是改变了一晃笔直对齐格局而已;如下图所示:

小心:上边由于时日的涉及,先不考虑UC浏览器的相当

三:3丙

代码如下:

HTML代码:

CSS代码如下:

.first-face {

display: flex;

flex-direction: column;

justify-content: space-between;

}

.pip:nth-child(2) {

align-self: center;

}

.pip:nth-child(3) {

align-self: flex-end;

}

一般来说图所示:

四: 4丙

代码如下:

HTML代码:

CSS代码如下:

.column{

display: flex;

justify-content: space-between;

}

.first-face {

display: flex;

flex-direction: column;

justify-content: space-between;

}

正如图所示:

五:5丙

HTML结构如下:

css代码如下:

.column{

display: flex;

justify-content: space-between;

}

.first-face {

display: flex;

flex-direction: column;

justify-content: space-between;

}

.first-face .column:nth-of-type(2){

justify-content: center;

}

一般来说图所示:

六:6丙

HTML结构如下:

css代码如下:

.column{

display: flex;

justify-content: space-between;

}

.first-face {

display: flex;

flex-direction: column;

justify-content: space-between;

}

正如图所示:

7,8,9丙也是一个情趣,那里先不做了;

重返顶部

Flex布局兼容知识点总计

只要父容器class为 box,子项目为item.

旧版语法如下:

一:定义容器的display属性。

旧语法如下写法:

.box {

display: -moz-box;

display: -webkit-box;

display: box;

}

新版语法必要如下写:

.box{

display: -webkit-flex;

display: flex;

}

或者 行内

.box{

display: -webkit-inline-flex;

display:inline-flex;

}

二:容器属性(旧版语法)

  1. box-pack 属性;(水平方向上对齐方式)

box-pack定义子元素主轴对齐情势。

.box{

-moz-box-pack: center;

-webkit-box-pack: center;

box-pack: center;

}

box-pack属性总共有4个值:

.box{

box-pack: start | end | center | justify;

}

逐一值的含义如下:

start:

对于正常方向的框,第二个子元素的左手缘被放在左边(最终的子元素后是颇具盈余的半空中)

对于相反方向的框,最终子元素的左侧缘被放在右边(首个子元素前是富有盈余的半空中)

end:

对于正常方向的框,最终子元素的右侧缘被放在左边(首个子元素前是兼备盈余的空中)。

对此相反方向的框,首个子元素的左边缘被放在右边(最终子元素后是兼具盈余的空间)。

center:

均等地撩拨多余空间,其中一半空中被放到首个子元素前,另一半被内置末了一个子元素后.

justify:

在各样子元素之间分割多余的空中(第一个子元素前和结尾一个子元素后尚未剩余的空间)。

2.box-align 属性(垂直方向上的对齐形式)

box-align定义子元素交叉轴对齐格局。

.box{

-moz-box-align: center;

-webkit-box-align: center;

box-align: center;

}

box-align属性总共有5个值:

.box{

box-align: start | end | center | baseline | stretch;

}

依次值的意义如下:

start:

对此健康方向的框,每个子元素的顶端缘沿着框的顶边放置。

对于反方向的框,每个子元素的下面缘沿着框的平底放置。

end:

对此正规方向的框,每个子元素的上边缘沿着框的尾部放置。

对此反方向的框,每个子元素的上边缘沿着框的顶边放置。

center:

均等地分开多余的半空中,一半身处子元素之上,另一半位于子元素之下。

baseline:

假定 box-orient 是inline-axis或horizontal,所有子元素均与其基线对齐。

stretch:

拉伸子元素以填充包罗块

3.box-direction 属性

box-direction定义子元素的突显方向。

.box{

-moz-box-direction: reverse;

-webkit-box-direction: reverse;

box-direction: reverse;

}

box-direction属性总共有3个值:

.box{

box-direction: normal | reverse | inherit;

}

4.box-orient 属性

box-orient定义子元素是还是不是应水平或垂直排列。

.box{

-moz-box-orient: horizontal;

-webkit-box-orient: horizontal;

box-orient: horizontal;

}

box-orient属性总共有5个值:

.box{

box-orient: horizontal | vertical | inline-axis | block-axis | inherit;

}

horizontal: 在档次行中从左向右排列子元素。

vertical: 从上向下垂直排列子元素。

inline-axis: 沿着行内轴来排列子元素(映射为 horizontal)。

block-axis: 沿着块轴来排列子元素(映射为 vertical)。

inherit: 应该从父元素继承 box-orient 属性的值。

5.box-lines 属性

box-lines定义当子元素超出了容器是还是不是同意子元素换行。

.box{

-moz-box-lines: multiple;

-webkit-box-lines: multiple;

box-lines: multiple;

}

box-lines属性总共有2个值:

.box{

box-lines: single | multiple;

}

single:伸缩盒对象的子元素只在一行内突显multiple:伸缩盒对象的子元素超出父元素的空中时换行突显

6.box-flex 属性。

box-flex定义是或不是允许当前子元素伸缩。

.item{

-moz-box-flex: 1.0;

-webkit-box-flex: 1.0;

box-flex: 1.0;

}

box-flex属性使用一个浮点值:

.item{

box-flex: ;

}

7.box-ordinal-group 属性

box-ordinal-group定义子元素的来得次序,数值越小越排前。

.item{

-moz-box-ordinal-group: 1;

-webkit-box-ordinal-group: 1;

box-ordinal-group: 1;

}

box-direction属性使用一个整数值:

.item{

box-ordinal-group: ;

}

新版语法如下:

概念容器的display属性:

.box{

display: -webkit-flex;

display: flex;

}

.box{

display: -webkit-inline-flex;

display:inline-flex;

}

容器样式

.box{

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow:   ;

justify-content: flex-start | flex-end | center | space-between |
space-around;

align-items: flex-start | flex-end | center | baseline | stretch;

align-content: flex-start | flex-end | center | space-between |
space-around | stretch;

}

flex-direction值介绍如下:

row: 默许值。灵活的花色将水平显得,正如一个行一样。

row-reverse: 与 row 相同,但是以相反的依次。

column: 灵活的门类将垂直突显,正如一个列一样。

column-reverse: 与 column 相同,不过以相反的顺序。

flex-wrap 值介绍如下:

nowrap: flex容器为单行。该情况下flex子项可能会溢出容器。

wrap:
flex容器为多行。该情状下flex子项溢出的局地会被放置到新行,子项内部会发生断行。

wrap-reverse: 换行并首先行在红尘

flex-flow值介绍如下(主轴方向和换行简写):

: 定义弹性盒子元素的排列方向

:控制flex容器是单行或者多行。

justify-content值介绍如下:

flex-start: 弹性盒子元素将向行先河地方对齐。

flex-end: 弹性盒子元素将向行终止地方对齐。

center: 弹性盒子元素将向行中间地方对齐。

space-between:
第三个要素的疆界与行的主先河地点的境界对齐,同时末了一个因素的边界与行的主停止地方的边距对齐,

而余下的伸缩盒项目则平均分布,并保管两两之间的空白空间分外。

space-around:
伸缩盒项目则平均分布,并确保两两里边的空域空间相当,同时率先个要素前的空间以及末了一个元素后的上空为其余空白空间的一半。

align-items值介绍如下:

flex-start:
弹性盒子元素的侧轴(纵轴)初阶地点的边界紧靠住该行的侧轴初叶边界。

flex-end:
弹性盒子元素的侧轴(纵轴)初叶地方的疆界紧靠住该行的侧轴为止边界。

center:
弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺码,则会向多少个样子溢出一致的长度)。

baseline:
如弹性盒子元素的行内轴与侧轴为同样条,则该值与’flex-start’等效。其余情状下,该值将到场基线对齐。

stretch:
倘诺指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺码,但同时会鲁人持竿’min/max-width/height’属性的限制。

align-content值介绍如下:

flex-start:
弹性盒子元素的侧轴(纵轴)初始地点的疆界紧靠住该行的侧轴初始边界。

flex-end:
弹性盒子元素的侧轴(纵轴)起先地点的界线紧靠住该行的侧轴停止边界。

center:
弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如若该行的尺码小于弹性盒子元素的尺码,则会向三个方向溢出同样的长短)。

space-between:
第一行的侧轴初步边界紧靠住弹性盒容器的侧轴起首内容边界,最终一行的侧轴截止边界紧靠住弹性盒容器的侧轴截止内容边界,

结余的行则按自然措施在弹性盒窗口中排列,以保险两两之内的空间相当。

space-around:
各行会按自然措施在弹性盒容器中排列,以维持两两里面的上空极度,同时率先行前边及最后一行前面的长空是任何空间的一半。

stretch:
各行将会张开以占用剩余的空中。倘使剩余的空中是负数,该值等效于’flex-start’。在其余情形下,剩余空间被所有行平分,以增添它们的侧轴尺寸。

子元素属性

.item{

order: ;

flex-grow: ;

flex-shrink: ;

flex-basis: | auto;

flex: none | [ <‘flex-grow’> <‘flex-shrink’>? ||
<‘flex-basis’> ]

align-self: auto | flex-start | flex-end | center | baseline | stretch;

}

协作写法

  1. 第一是概念容器的 display 属性:

.box{

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

}

此地还要注意的是,如果子元素是行内元素,在无数情状下都要使用
display:block 或 display:inline-block把行内子元素变为块元素(例如使用
box-flex 属性),那也是旧版语法和新版语法的分别之一。

  1. 子元素主轴对齐格局(水平居中对齐)

.box{

-webkit-box-pack: center;

-moz-justify-content: center;

-webkit-justify-content: center;

justify-content: center;

}

匹配写法新版语法的 space-around 是不可用的:如下新版语法space-around;

.box{

box-pack: start | end | center | justify;

justify-content: flex-start | flex-end | center | space-between |
space-around;

}

  1. 子元素交叉轴对齐格局(垂直居中对齐)

.box{

box-align: start | end | center | baseline | stretch;

align-items: flex-start | flex-end | center | baseline | stretch;

}

  1. 子元素的突显方向。

子元素的显示方向可由此 box-direction + box-orient + flex-direction
完结,如下代码:

  1. 左到右(水平方向)

.box{

-webkit-box-direction: normal;

-webkit-box-orient: horizontal;

-moz-flex-direction: row;

-webkit-flex-direction: row;

flex-direction: row;

}

  1. 右到左(水平方向)

.box{

-webkit-box-pack: end;

-webkit-box-direction: reverse;

-webkit-box-orient: horizontal;

-moz-flex-direction: row-reverse;

-webkit-flex-direction: row-reverse;

flex-direction: row-reverse;

}

如上代码:box 写法的 box-direction
只是改变了子元素的排序,并没有变动对齐格局,需求新增一个 box-pack
来改变对齐格局。

  1. 上到下(垂直方向上)

.box{

-webkit-box-direction: normal;

-webkit-box-orient: vertical;

-moz-flex-direction: column;

-webkit-flex-direction: column;

flex-direction: column;

}

  1. 下到上(垂直方向上)

.box{

-webkit-box-pack: end;

-webkit-box-direction: reverse;

-webkit-box-orient: vertical;

-moz-flex-direction: column-reverse;

-webkit-flex-direction: column-reverse;

flex-direction: column-reverse;

}

  1. 是还是不是同意子元素伸缩

.item{

-webkit-box-flex: 1.0;

-moz-flex-grow: 1;

-webkit-flex-grow: 1;

flex-grow: 1;

}

box语法中 box-flex 如若不是0就象征该子元素允许伸缩,而flex是分开的,上边flex-grow 是同意放大(默许不容许)

.item{

-webkit-box-flex: 1.0;

-moz-flex-shrink: 1;

-webkit-flex-shrink: 1;

flex-shrink: 1;

}

flex-shrink 是同意缩短(默许允许)。box-flex
默许值为0,也就是说,在默许的情事下,在七个浏览器中的表现是不平等的:介绍如下:

.item{

box-flex: ;

flex-grow: ;

flex-shrink: ;

}

  1. 子元素的显得次序

.item{

-webkit-box-ordinal-group: 1;

-moz-order: 1;

-webkit-order: 1;

order: 1;

}

网站地图xml地图