HTML&CSS（一位小白）

HTML

一、HTML基本结构

从开始标签到结束标签及其中所有内容称为元素

文档类型声明

和父子关系而是兄弟关系，没有表兄弟这种关系 中的lang可设置语言（英语：en；中文：zh）

*1.*常用的字符编码

• UTF-8

• GBK（记事本写html）: 中文简体，适用于中国大陆、新加坡

• Big5: 中文繁体，适用于港、澳、台、海外华人

• ISO-8859-1(Latin-1)

*2.*块标签

可自动换行

*1.1.*标题标签

<h1>
h1>
·····
<h6>
h6>

*1.2.*段落标签

<p>p>

*1.3.*水平线标签

<hr> align设置排列方式

*1.4.*有序列表

<ol><li>li>ol>
      <li type="A">表示大写英文字母li>

​      type="a"表示小写英文字母

​      type="I"表示大写罗马数字

​       type="i"表示小写罗马数字

​       type="1"表示阿拉伯数字   

*1.5.*无序列表

<ul><li>li>ul>
    ​      <li type="square">实心方块li>

    ​      <li type="circle">圆圈(空心)li>

    ​      <li type="disc">实心圆li>

*1.6.*描述标签

<dl>
    <dt>一、dt>
    <dd>内容dd>
dl>

*1.7.*DIV标签

<div>div>

*3.*行标签

*3.1.*文本样式

加粗<b>b>   <strong>strong>

下划线<u>u>

删除<s>s>

倾斜<i>i>

上标<sup>sup>

*3.2.*换行标签

<br>

*3.3.*图像标签

<img src="图片名" width="200px" title="备注"  alt="   ">

alt=“ 替换不显示图片”

*3.4.*视频标签

<video src="视频名.mp4" controls（显示控键） muted（静音） autoplay（自动播放） width="500px"  loop（循环播放）>video>

注视频格式为MP4，视频高度height无法更改

*3.5.*音频标签

<audio src="xxx.mp3" controls muted>audio>

*3.6.*超链接

<a href="地址" target="(_self当前页面打开)(_blank在另外一个页面打开)">a>

*3.7.*锚点

命名  <a name="top">（可有可无内容）a>

返回锚点位置 < a href="anchor.html#top">返回到顶端a>

*4.*表格（table）

*4.1.*基础

标题（caption） 行（tr） 标题单元格（th） 普通单元格（td）

页眉thead>tr>th

正文tbody>tr>rd

页脚tfoot>tr>th

thead | tbody | tfoot可省略

*4.2.*table属性

• border=" "可改变边框粗细
• bordercolor设置边框颜色
• bgcolor设置背景颜色
• width设置表格宽度
• align设置表格水平排列方式（left | center | right）
• cellspacing设置单元格间距
• cellpadding设置单元格内边距

*4.3.*td属性

• width（宽度） height（高度） align（水平排列方式） bgcolor（背景色）
• valign设置单元格垂直排序方式（top（上） | middle（中） | bottom（下））
• colspan合并多列（在要合并的多个单元格中的第一个单元格的 colspan 属性中指定其横跨多少列 ）
• rowspan合并多行

*4.4.*特殊字符

• & nbsp;  空格
• & yen;  ¥
• & gt; >
• & lt; <
• & quot; "
• & copy; ©

*5.*表单

语法格式

<form action=" 处理表单的文件"  method="get | post" name=" " >  
form>

*5.1.*表单元素

• 多行文本框

• 下拉框 selected属性可设置默认显示

• 按钮

• 搜索自动补齐列表

*5.2.*input标签的属性

• required属性表示其内容不能为空，必填
• placeholder属性是提示文本，表单元素的提示信息
• autofocus属性表示页面加载后，自动获取焦点
• option元素的selected属性可以让option默认为选中
• input的readonly属性可以让文本框只读
• input元素的disable属性可以禁用单行文本框

*5.3.*type的输入形式

• type=“text” :单行文本框
• type=“password” ：密码框
• type=“radio” :单选框
• type=“checkbox”:多选
• type=“submit”：提交按钮
• type="reset"复选按钮
• type=“image”：图像按钮
• type=“hidden”:隐藏域
• type=“file”:文件域
• type=“email”：限制用户必须输入为email类型
• type=“url”：限制用户输入必须为URL类型
• type=“date”:限制用户输入必须为日期类型
• type=“time”:限制用户输入必须为时间类型
• type=“month”:限制用户输入必须为月类型
• type=“number”:限制用户输入必须为数字类型
• type=“range”:产生一个滑动条的表单
• type=“search”:产生一个搜索意义的表单
• type=“color”:生成一个颜色选择表单

*6.*FrameSet框架

<frameset rows="10%,*"(上下分开页面，上占10&)>
    
    <frame src="mailbox-top.html" name="top">frame>
    
    <frameset cols="15%,*"(左右分开页面，左占15%) frameborder="1" bordercolor="red">
        <frame src="mailbox-left.html" name="left">frame>
        <frame src="mailbox-right.html" name="right">frame>
    frameset>
frameset>

有FrameSet就不能有body

二、CSS层叠样式表

*1.*基础

 <style type="text/css">
        table {        }
        td {        }
 style>
导入外部样式
<link rel="stylesheet" type="text/css" href="test.css">

<style>
     @import url(style.css);
style>

内两样式
(style="......")

*2.*基本选择器

*2.1.*通用选择器

<style type="text/css">
        * {
            margin: 25px;        }
style>
            通配符（*）

*2.2.*标签选择器

<style type="text/css">
        p {            margin: 25px;        }
style>
            选择便签p，更改p的样式

*2.3.*属性选择器3

            使用[attribute]可以选择拥有指定名称属性的所有元素
            使用[attribute=value]可以选择拥有指定名称的属性并且取值等于指定值的所有元素
            使用[attribute~=value]可以选择拥有指定名称的属性并且取值中包含指定单词的所有元素

<style type="text/css">
        [name=username] {            border: 1px solid blue;        }        
        [title~=is] {   background-color: rgb(163, 236, 163);        }
style>
eg.<input type="text" name="username" title="this is username">

*2.4.*class选择器

<style type="text/css">
        .wrapper {            height: 50px;        }
                  更改包涵wrapper的
style>
            .className 等同于 [class~=className]
              同一个元素的 class 属性中可以书写多个单词(中间使用空格隔开)
              class 属性值中每个单词都是一个 className (俗称类名) 
<div class="first odd wrapper">div>

*2.5.*ID选择器

            根据元素的ID是否等于指定的值来选择元素
            页面开发人员有义务保证元素ID是唯一的 
<style type="text/css">
        [id=first] {            height: 50px;            margin: 15px;        }
        
        #first {            height: 50px;            margin: 15px;              }
 style>
<div id="first">div>  

*2.6.*亲子选择器

/* 亲子选择器: 两个选择器之间使用>隔开( 亲爸爸>亲儿子 ) */
.item>a {}
.item>.className{}

*2.7.*后代选择器

/* 后代选择器: 两个选择器之间使用空格隔开 ( 祖先 子孙 ) */
.figure img

*2.8.*兄弟选择器

        /* 普通兄弟选择器 */只能选弟不能选兄
        .abc~div { background-color: #dfdfdf; }  abc的弟弟div
        .abc~p { background-color: #ffff00 ;}
        .abc~* { text-align: center ; } abc所有的弟弟
        /* 紧邻兄弟选择器 */
        .abc+div { color: red; font-size: 30px; font-weight: bold;} 只选择1

        <div class="odd">div>
        <p class="even abc">abcp>
        <div class="odd">1div>
        <p class="even">2p>

2.9.“并联”选择器

 /*包涵wrapper和odd的*/
.wrapper.odd { background-color: black; }
<div class="wrapper odd">div>
<div class="wrapper even">div>

*2.10.*伪类

        a:link {            color: purple;        }超链接对应的网址被访问之前的状态

        a:hover {            color: black;        }表示鼠标悬浮到元素时的状态
        
        a:active {            color: green;        }表示超链接被选定时的状态（鼠标点击未放开时）
        
        a:visited {            color: gray;        }超链接对应的网址被访问之后的状态

   input:focus {            background-color: blueviolet;        }表示元素获得焦点时的状态

*2.11.*选择器列表

       div {  margin: 15px ; height: 100px ;}
        p {  margin: 15px ; height: 100px ; }
        section { margin: 15px ; height: 100px ; }
等同于用逗号（，）
       div,p,section { margin: 15px ;  height: 100px ;        }

*2.12.*优先级

*3.*元素尺寸

.first {
            width: 90%;
            min-width: 800px;
            height: 200px;
            border: 1px solid blue;
        }

对于块元素来说，通过CSS设置其宽度和高度是有效的

对于内联元素(行内元素)来说，通过CSS设置其宽度和高度是无效的

*4.*修饰

*4.1.*修饰字体

             font-size: 30px;           /* 控制文字尺寸(字高) */

            font-weight: lighter;       /* 控制文字粗细 ( lighter | normal | bold | bolder | 整百数字) */
            
            font-family: 思源宋体;       /* 控制文字字体(即文字形状)*/
            
            font-style: oblique;       /* 控制文字风格 ( italic(倾斜) | oblique（倾斜） | normal )*/
            
            line-height: 80px;         /* 控制行高 */
            
            line-height: 4em;          /* em根据自己的行高，没有就找父元素的字高来确定当前元素的行高 */
            
            line-height: 4rem;         /* rem根据根元素的字高来确定当前元素的行高 */
         
            font: italic bold 16px/1.5em 思源宋体, 微软雅黑, serif;     /* 复合属性设置字体，有顺序限制 */

*4.2.*修饰文本

background-color: #dedede | red | rgb( 0, 0, 255);/* 使用六位十六进制的数字 | 颜色单词 | rgb函数  表示颜色*/

text-align: center; /* 控制元素内文本的水平排列方式 ( left | center | right ) */

vertical-align: baseline; /* 控制元素内文本的垂直排列方式 ( top | middle | bottom | baseline ) */

text-decoration: line-through;/* 文本装饰 ( overline | line-through | underline )*/ 

text-indent:2em/*首行缩进2个字符*/            

处理图片底部留白 通过设置 img 的 垂直排列方式来让图片与周围的文本对齐

*4.3.*修饰背景

background-image: url(../day1/daoming.png);/* 设置背景图片 */

background-repeat: no-repeat;/* no-repeat(不重复)  | repreat-x(横向重复) | repreat-y(纵向重复)  */

/*contain 表示元素能够容纳整个背景图像(可能背景图像无法覆盖整个元素)*/
/*cover表示背景图像覆盖整个元素(背景图像中的部分内容可能不显示)*/
/*percentage以父元素的百分比来设置背景图像的宽度和高度*/
background-size: contain;/* contain | cover | length | percentage*/

background-attachment: fixed;/*fixed(图像相对于视口是固定的) | scroll(图像相对于元素是固定的 | local(图像相对于内容是固定的))*/

/* 设置元素背景颜色为透明 (所有元素默认都是透明背景) */
            background-color: transparent;

/*复合格式顺序background: color image position repeat attachment; */
            background: #9696fa url(bg1.jpg) top center no-repeat  fixed;

/* 设置背景的绘画区域 ( border-box | padding-box | content-box ) */
            background-clip: content-box;

*4.4.*修饰边框

4.4.1、控制边框

/* 使用复合属性设置元素四周边框的 粗细、风格、颜色 */
            border: 1px solid blue ;
/* 设置元素四周边框的粗细 */
            border-width: 10px;
/* 设置元素四周边框的风格(即边框线条的样式)*/
            border-style: double ;
/* 设置元素四周边框的颜色 */
            border-color: red ;

4.4.2、控制内外边框

外边框margin
            /* 设置元素四周外边距 */
            margin: 25px ;

            /* 按照 顺时针方向依次设置 上、右、下、左 四边外边距 */
            margin: 10px 20px 30px 40px ;

            /* 分别设置 上下 和 左右 外边距 */
            margin: 10px 50px ;

            /* 仅指定 顶部外边距、右侧外边距、底端外边距，左侧外边距与右侧外边距相同 */
            margin: 10px 50px 20px ;
 /* 对于内联元素来说，左右外边距是有效的，而上下外边距是无效的 */

内边框padding
            /* 为元素设置四边内边距 */
            padding: 25px ;

            padding-left: 10px;
            padding-right: 10px;
            padding-top: 20px;
            padding-bottom: 20px;

4.4.3、单边边框

/* 设置元素左侧边框的 粗细、风格、颜色 */
            border-left: 5px dotted green ;

            border-left-width: 5px ;
            border-left-style: dotted ;
            border-left-color: red ;

4.4.5、控制边框半径

/* 批量设置边框四个角落的水平半径和垂直半径*/
            border-radius: 20px;

/* 分别设置边框四角落的水平半径 和 边框四角落的垂直半径*/
            border-radius: 50px/30px;

/* 按照 左上角、右上角、右下角、左下角 顺序依次序设置 边框四角 的 水平半径 和 垂直半径*/
            border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;

/* 对角线上的角一样，左上右下为10px、右上左下为20px*/
border-radius: 10px 20px / 10px 20px;

/* 左上为10px，右上为50px，右下为30px，左下为50px*/
border-radius: 10px 50px 30px / 10px 50px 30px ;

/* 设置左上为10px*/
border-top-left-radius: 10px;

4.4.6、控制轮廓

/* 设置轮廓的粗细 样式 颜色*/ dotted（点线）、double（双实线）、solid（单实线）
outline: 10px dotted  rgb(0,0,255);
outline-width: 10px;
outline-style: dotted;
 outline-color: rgb(0,255,255);

4.4.7、控制阴影

/* box-shadow: 水平偏移 垂直偏移 模糊距离 阴影距离 颜色 ;*/
            box-shadow: 0px 0px 15px 1px green ;

4.4.8、元素是否可见

/* 控制元素是否可见 ( visible | hidden )*/   
            visibility:hidden;

隐藏后仍占用空间

*4.5.*浮动

/* 左浮动*/
float: left | right

/*清除左浮动*/
clear: left | right | both

当元素浮动时，就会生成BFC

浮动后块元素之间的距离解决：父元素的font-size设置为0，块元素的font-size设置为x px

*4.6.*列表样式

 /* 控制列表项目符号的类型 */
list-style-type: disc;
/* 控制列表项目符号的位置( inside | outside ) */
list-style-position: inside;
/*列表样式切换成小图片*/
/list-style-image: url(../images/fengjie.jpg); 

list-style: upper-alpha inside ;
/* 取消列表项目标记 */
list-style: none ;

       /* 在 ul 内 li 之外 左侧的空白 可能是 因为 ul 的内边距、也可能是因为ul的外边距 */
                 margin: 0 ; /* 低版本IE浏览器认为是左侧外边距 */
                 padding: 0 ; /* 现代浏览器认为是左侧内边距 */

*4.7.*表格

border-collapse:控制表格边框是否合并 ( separate | collapse )

border-spacing:控制表格边框之间的距离(单元格间距)

empty-cells: 控制是否显示 空单元格 ( show | hide )

caption-side:控制表格标题的位置 ( top | bottom )

*5.*动画

*5.1.*转换（transform）

*5.1.1.*移动

/*向左移动25个像素*/
transform: translate(-25px,0);

translate(x,y)，定义 2D 转换，沿着 X 和 Y 轴移动元素
translateX(n)，沿着 X 轴移动元素
translateY(n)，沿着 Y 轴移动元素

*5.1.2.*缩放

/*沿着X、Y轴分别缩小0.5倍*/
transform: scale(0.5,0.5);

cale(x,y)，定义 2D 缩放转换，改变元素的宽度和高度。（即扩大或者缩小）
scaleX(n)，改变元素的宽度
scaleY(n)，改变元素的高度

*5.1.3.*旋转

/*旋转45度，deg为单位*/
transform: rotate(45deg);

rotate(angle)，在参数中规定角度旋转
rotateX，沿着X轴旋转
rotateY，沿着Y轴旋转

*5.1.4.*倾斜

transform: skew(-30deg,0);

skew(x-angle*,y-angle)，沿着 X 和 Y 轴倾斜。
skewX、skewY分别沿着X和Y轴倾斜

*5.2.*过渡（transition）

.second>div{
    transition: all .5s linear .5s;
}

/*transition：复合属性，用于将四个过渡属性设置为单一属性*/
.fifth>div {
    opacity: 0;
    transition: all 500ms;
}

/*opacity透明度 0：全透  1：不透明*/
.fifth>div:hover {
    opacity: 1;
}

transition-property：规定过渡效果所针对的 CSS 属性的名称（默认：all）

transition-duration：规定过渡效果要持续多少秒或毫秒（默认：0）

transition-timing-function：规定过渡效果的速度曲线（默认：ease）

transition-delay：规定过渡效果的延迟（以秒计）。（默认：0）

ease规定慢速开始，然后变快，然后慢速结束的过渡效果

ease-in规定以慢速开始的过渡效果

ease-out规定以慢速结束的过渡效果

ease-in-out规定以慢速开始和结束的过渡效果

linear规定以相同速度开始至结束的过渡效果

*5.3.*动画（animation）

/* 引用已经定义的动画名称 */
            animation-name: move;
/* 动画持续时间 */
            animation-duration: 2s;
/* 设置延迟时间 */
            animation-delay: 500ms;
/* 设置动画循环次数 */
            animation-iteration-count: infinit;
/* 设置动画在循环中是否可以反向运动 */
            animation-direction: alternate;
/* 设置速度变化曲线 (三次贝塞尔曲线) */
            animation-timing-function: linear;
/* 设置动画状态 */pausing
            animation-play-state: running;

@keyframes play {           0%{}  100%{}    }

*6.*BFC

BFC是一个相对独立的排版区域，在BFC内部的块元素是从上到下依次排列，同时块元素所占的整行是BFC元素的整行

若未显式设置元素高度，则当该元素内部所有的子元素都浮动时，会导致该元素高度为零 [父元素塌陷问题]

解决“父元素塌陷问题”可以通过让父元素成为一个BFC来实现

块级框盒（block-level box），display 属性值为 block 、list-item 、table 的元素，会⽣成 块级框 盒 (block-level box)

内联框盒 ( inline-level box ) ，display 属性为 inline 、inline-block 、inline-table 的元素，会⽣成 内联框盒 ( inline-level box )

框盒或盒子是CSS布局的对象和基本单位，即整个页面可以看作是许多个框盒组成的

*6.1.*元素显示display

display: inline-block;/*inline(生成内联形式的框 宽高不起作用) | block(生成块形式的框 宽高起作用独占一行) | inline-block(生成内联块形式的框 宽高起作用 多个在一行显示)*/

display: list-item ; 会生成 列表(清单)形式的框

display: table ; 会生成表格形式的框

display: table-row ; 会生成表格中行形式的框

display: table-cell ; 会生成表格中单元格形式的框

display:none 不占空间

*6.2.*溢出

overflow: hidden;     /* hidden 表示溢出的内容会被隐藏 */

overflow: visible;   /* visible溢出的内容会在元素框之外显示*/

overflow: scroll;    /* scroll 表示为元素添加滚动条以便于显示溢出的内容 */ 

overflow: auto;     /* auto 表示如果有溢出边界的内容则显示滚动条，以便于能够显示溢出的内容 */

*6.3.*块格式化上下文

下列方式会创建块格式化上下文

• 根元素（ ）

• 浮动元素（元素的 float 不是 none）

• 绝对定位元素（元素的 position 为 absolute 或 fixed）

• ⾏内块元素（元素的 display 为 inline-block）

• 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值

• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）

• 匿名表格单元格元素（元素的 display 为 table、table-row、table-row-group、table-header-group、table- footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）

• overflow 计算值(Computed)不为 visible 的块元素

• display 值为 flow-root 的元素

• contain 值为 layout、content或 paint 的元素

• 弹性元素（display 为 flex 或 inline-flex元素的直接⼦元素）

• ⽹格元素（display 为 grid 或 inline-grid 元素的直接⼦元素）

• 多列容器（元素的 column-count 或 column-width (en-US) 不为auto，包括 ``column-count 为 1）

• column-span 为 all 的元素始终会创建⼀个新的BFC，即使该元素没有包裹在⼀个多列容器中（标准变更，Chrome bug）

*7.*定位(position)

*7.1.*默认文档流

/* 所有的元素默认定位方式都是 static */
            position: static;

*7.2.*绝对定位

/* 生成绝对定位的元素 */
            position: absolute;
            right: 0;
            bottom: 0;

绝对定位: 相对于浏览器窗口进行定位

采用绝对定位的元素会相对于其最近的非static定位的父元素进行定位

如果采用绝对定位的元素的所有父元素都是static定位，则该元素相对于浏览器窗口进行定位

*7.3.*相对定位

/* 生成绝对定位的元素 */
            position: relative;

/* 相对于元素正常位置(在默认文档流中的位置)向右偏移 (正数向右/负数向左) */
            left: 20px;
/* 相对于元素正常位置(在默认文档流中的位置)向下偏移 (正数向下/负数向上) */
            top: 10px;
/* 相对于元素正常位置(在默认文档流中的位置)向左偏移 (正数向左/负数向右) */
            right: 50px;
/* 相对于元素正常位置(在默认文档流中的位置)向上偏移 (正数向上/负数向下) */
            bottom: 10px;

*7.4.*粘性定位

/* 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。*/

position: sticky;

*7.5.*固定定位

 /*相对于浏览器窗口定位,即使窗口是滚动的它也不会移动*/

position: fixed;

*7.6.*堆叠

/* 可正可负，数字大的显示在前*/
z-index:100(-11);

*8.*弹性盒子

*8.1.*弹性布局

/* 当 元素的 display 取值为 flex 时该元素就是一个 伸缩容器 */
            display: flex;

弹性容器(伸缩容器或柔性容器) ( flex container )

弹性项目(柔性项目) ( flex item )

*8.2.*弹性容器

*8.2.1.*容器

display: flex

/*设置行内元素为弹性盒子*/
display: inline-flex

*8.2.2.*主轴和交叉轴

/* 此时 主轴(main axis) 是水平方向从左(main start)到右(main end) */
/* 此时 交叉轴(cross axis) 是垂直方向从上(cross start)到下(cross end) */
            flex-direction: row;

/* 此时 主轴(main axis) 是水平方向从右(main start)到左(main end) */
/* 此时 交叉轴(cross axis) 是垂直方向从上(cross start)到下(cross end) */
            flex-direction: row-reverse;

/* 此时 主轴(main axis) 是垂直方向从上(main start)到下(main end) */
/* 此时 交叉轴(cross axis) 是水平方向从左(cross start)到右(cross end) */
            flex-direction: column;

​

/* 此时 主轴(main axis) 是垂直方向从下(main start)到上(main end) */
/* 此时 交叉轴(cross axis) 是水平方向从左(cross start)到右(cross end) */
            flex-direction: column-reverse;

*8.3.*容器属性

*8.3.1.*flex-direction

 row(行)| column（列）|row-reverse 与 row 相同，但是以相反的顺序|column-reverse

*8.3.2.*flex-wrap

flex元素 单行显示还是多行显示 ( 或者说 单列显示还是多列显示 )。
flex-wrap: nowrap | wrap | wrap-reverse ;

*8.3.3.*flex-flow

 flex-flow 是 flex-direction 和 flex-wrap 的简写
flex-flow: direction wrap ;

*8.3.4.*justify-content

/*控制主轴方向上的对齐方式*/
flex-start：默认值。项目位于容器的开头

flex-end：项目位于容器的结尾

center

space-between：项目位于各行之间留有空白的容器内。

space-around：项目位于各行之前、之间、之后都留有空白的容器内

*8.3.5.*align-items

/*控制交叉轴方向上的对齐方式*/
stretch：默认值。元素被拉伸以适应容器

baseline：元素位于容器的基线上

*8.3.6.*align-content

①沿着弹性盒子布局的交叉轴在内容项之间和周围分配空间②沿着网格布局的主轴在内容项之间和周围分配空间
用法：align-content: stretch|center|flex-start|flex-end|space-between|space-around

align-content和align-items区别：

当容器内的元素只有一行时，使用align-items会使这行元素居中。但是使用align-content没有效果

align-content属性只适用于多行的flex容器，并且当交叉轴上有多余空间使flex容器内的flex线对齐。

align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。

*8.4.*项目属性

*8.4.1.*flex-basis

/*flex元素 在主轴方向上的初始大小*/

*8.4.2.*flex-grow

/*设置或检索弹性盒的扩展比率*/
        .first>.flex-item { flex-basis: 100px;}
        .first>.flex-item:nth-child(1){ flex-grow: 1; }
        .first>.flex-item:nth-child(2){ flex-grow: 3; }

*8.4.3.*flex-shrink

/*设置或检索弹性盒的收缩比率*/
        .third>.flex-item { flex-basis: 300px; }
        .third>.flex-item:nth-child(odd) { flex-shrink: 1; }

*8.4.4.*flex

/*flex: *flex-grow* *flex-shrink* *flex-basis**/
.fourth>.flex-item { flex: 1 1 100px; }/*扩展比率为1，收缩比率为1，主轴上的大小*/

*8.4.5.*align-self

/*设置被选中的弹性项目在交叉轴上的排列方式。*/
.item:nth-child(3) {
            /* 设置被选中的弹性项目在交叉轴上的排列方式 */
            align-self: flex-start;        }

*8.4.6.*order

  /*规定了弹性容器中的可伸缩项目在布局时的顺序柔性项目的 order 属性仅修改视觉顺序，不修改DOM元素顺序*/
        .flex-item:first-child { order: 2;}
        .flex-item:nth-child(2) { order: 1;}
        .flex-item:last-child { order: 0;}

来让每一个单行的容器居中而不是让整个容器居中。

*8.4.*项目属性

*8.4.1.*flex-basis

/*flex元素 在主轴方向上的初始大小*/

*8.4.2.*flex-grow

/*设置或检索弹性盒的扩展比率*/
        .first>.flex-item { flex-basis: 100px;}
        .first>.flex-item:nth-child(1){ flex-grow: 1; }
        .first>.flex-item:nth-child(2){ flex-grow: 3; }

*8.4.3.*flex-shrink

/*设置或检索弹性盒的收缩比率*/
        .third>.flex-item { flex-basis: 300px; }
        .third>.flex-item:nth-child(odd) { flex-shrink: 1; }

*8.4.4.*flex

/*flex: *flex-grow* *flex-shrink* *flex-basis**/
.fourth>.flex-item { flex: 1 1 100px; }/*扩展比率为1，收缩比率为1，主轴上的大小*/

*8.4.5.*align-self

/*设置被选中的弹性项目在交叉轴上的排列方式。*/
.item:nth-child(3) {
            /* 设置被选中的弹性项目在交叉轴上的排列方式 */
            align-self: flex-start;        }

*8.4.6.*order

  /*规定了弹性容器中的可伸缩项目在布局时的顺序柔性项目的 order 属性仅修改视觉顺序，不修改DOM元素顺序*/
        .flex-item:first-child { order: 2;}
        .flex-item:nth-child(2) { order: 1;}
        .flex-item:last-child { order: 0;}