1. CSS3开发规范—书写顺序
1. 起步
属性名最好都用小写
使用normalize.css来增强跨浏览器表现的一致性（名字不重要）
2. 加载顺序
外部样式表：css文件外部引用
嵌入式样式表：（Embedded Style Sheets）head 里面写的样式
行内样式表：（Inline Style）标签里面的样式
优先考虑选择 外部样式表-嵌入样式表-行内样式表
3. 性能与优化
减少使用影响性能的属性比如position：absolute||float
为大块区域样式写注释，小块区域尽量写注释
位置属性（position，top，rigth，z-index，display，float等）
大小（width，height，padding，margin）
文字系列（font，line-height，letter-spacing,color,text-align等）
背景（background，border等）
其他（animation，transition等）
简单来说就是按照一定的类别顺序来写样式。兼容多个浏览器时，将标准属性写在底部。
2. CSS3开发规范—语法
- 用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
- 为选择器分组时，将单独的选择器单独放在一行。
- 为了代码的易读性，在每个声明块的左花括号前添加一个空格。
- 声明块的右花括号应当单独成行。
- 每条声明语句的 : 后应该插入一个空格。
- 为了获得更准确的错误报告，每条声明都应该独占一行。
- 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
- 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，Box-shadow）。
- 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
- 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替-0.5px）。
- 十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
- 尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
- 为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
- 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。
3. CSS3开发规范—声明顺序
相关的属性声明应当归为一组，并按照下面的顺序排列：
Positioning
Box model
Typographic
Visual
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（Box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。
4. CSS3开发规范—不要使用@import
与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：
5. CSS3开发规范—CSS的选择器
html选择器（不建议使用）
格式：标签名 { 样式 }
特点：选择器的优先级最低
例如：p{color:green;}
class选择器
格式：.class选择的名{ 样式 }
< 标签名 class=“名字” >
组合选择器
选择符1,选择符2,选择符3{样式}
*{样式} 不建议使用
常用引用代码块
多个选择器 共用一个样式(用在页面样式的初始化 也就是将可能本身带样式的标签的样式去掉)
ul,li,body,a,ol,dl,dt,dd{margin:0,padding:0;text-decoration:none;color:#000;} 外边距 内边距 为0 下划线去掉 颜色黑色
关联选择器（包含选择符）
格式：选择器1 选择器2 选择器3 选择器4{样式}
注释：给选择器1里面的选择器2里面的选择器3里面的选择器4设置样式
p a{样式} 给所有的p标签里面的a设置样式
伪类选择器
/*只有hover 是重点 下面的顺序是固定的 否则可能有的样式显示不出来*/
a:link{color:red; text-decoration:none;}/*未访问的链接的样式 红色去除下划线*/
a:visited{color:#000;}/*以访问的超链接的样式 颜色黄色*/
a:hover{color:green; font-size:20px;}/*鼠标在链接上的时候的样式*/
a:active{color:blue; text-decoration:line-through;}/*鼠标激活时候的状态 蓝色 贯穿线*/
6. CSS3开发规范—CSS3的选择器
关系选择器
ul>li 设置ul里面的直系li的样式
ul+li 设置ul的紧邻着的li的样式
ul~li 设置ul后面的所有同级兄弟li标签的样式
属性选择器
选择器[属性名^=属性值] 查找属性名以某个属性值开头的标签
选择器[属性名$=属性值] 查找属性名以某个属性值结束的标签
结构性伪类选择器
:before{content:”;} 设置在当前对象前插入内容 content必须有 相当于插入了一个span标签
:after{content:”;} 设置在当前对象后插入内容 content必须有 相当于插入了一个span标签
E:first-child{} E必须为某个元素的子元素 查找第一个子元素 这样才会生效
E:last-child{} E必须为某个元素的子元素 查找最后一个子元素
E:nth-child(n){} E必须为某个元素的子元素 查找第几个子元素
E:nth-last-child(n){} E必须为某个元素的子元素 查找倒数第几个子元素
状态伪类选择器
:fouce{} 获取焦点时的样式
7. CSS3开发规范—Class命名
class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。
避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
class 名称应当尽可能短，并且意义明确。
使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
基于最近的父 class 或基本（base） class 作为新 class 的前缀。
使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。
8. CSS3开发规范—(附)常用的变量名
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：Vote
合作伙伴：partner
注释的写法:
/* Header */
内容区
/* End Header */
id的命名:
(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：register
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标籤页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：Vote
合作伙伴：partner
友情链接：link
版权：copyright
四、注意事项:
1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写，除非一看就明白的单词。
五、CSS样式表文件命名
主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
9. CSS3开发规范—(附)常用的类属性
1. css3边框：
border-radius：属性被用于创建圆角
Box-shadow：属性被用来添加阴影(1.位置左右 2.位置上下 3.模糊程度 4.颜色)
border-image:url(“图片”)：属性用于设置图片的边框(用图片做边框)
选择器:not(:last-child) { border-方向: none}，禁止边框出现双边线。
2. css3圆角：(顺序：上右下左)
使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”
四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值：第一个值为左上角,第二个值为右上角和左下角，第三个值为右下角
一个值：四个圆角值相同
border-top-left-radius：定义了左上角的弧度
border-top-right-radius：定义了右上角的弧度
border-bottom-right-radius：定义了右下角的弧度
border-bottom-left-radius：定义了左下角的弧度
3. css3背景：
background-image：(url),属性添加背景图片
background-size：指定背景图像的大小
background-Origin：属性定位了背景图像的位置区域
background-clip：背景剪裁属性是从指定位置开始绘制，
border-Box：默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-Box：背景绘制在衬距方框内（剪切成衬距方框）。
content-Box：背景绘制在内容方框内（剪切成内容方框）。
content-Box，padding-Box，和 border-Box，区域内可以放置背景图像。
4. css3渐变：
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
用几种颜色就写几种
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients），默认情况下-从上到下
径向渐变（Radial Gradients）
Linear Gradients线性渐变- 向下/向上/向左/向右/对角方向(+to)
从哪个方向就在前面定义哪个方向，在最后的颜色上加+“to”
线性渐变 - 对角
你可以通过指定水平和垂直的起始位置来制作一个对角渐变。
定义一个角度(background: linear-gradient(角度 如从：left top到to bottom right)
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。不均匀分布用百分比如:red 10%
线性渐变 - 透明度
渐变也支持透明度（transparent），可用于创建减弱变淡的效果
我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明
repeating-linear-gradient(颜色，颜色) 用于重复渐变
Radial Gradients径向渐变
由它们的中心定义
默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse
closest-side
farthest-side
closest-corner
farthest-corner
repeating-radial-gradient(颜色，颜色) 函数用于重复径向渐变：
5. css3文本效果：
text-shadow：属性适用于文本阴影(值。1.左右，2.上下，3.模糊程度，4.颜色)
你也可以在 ::before 和 ::after 两个伪元素中添加阴影效果
Text-Overflow：属性文本溢出
text-overflow:ellipsis：(省略号)
text-overflow:clip：
white-space: Nowrap：强制不换行
word-wrap：强制换行
break-word：换行
word-break: keep-all：单词拆分换行
word-break: break-all：长文本换行
6. css3字体：
@font-face
font-family字体
font-weight:bold粗体文本
7. css3 2D 转换
可以对元素进行移动、缩放、转动、拉长或拉伸。
转换的效果是让某个元素改变形状，大小和位置。
您可以使用 2D 或 3D 转换来转换您的元素
transform ：适用于2D或3D转换的元素
transform-origin ：允许您更改转化元素位置
您将了解到以下5种2D变换方法：
语法：transform:以下的几种变换方法()
transform：translate(左右值，上下值)方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
transform：rotate(旋转的值#deg)方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
transform：scale((宽度)左右放大和缩小的值，(高度)上下放大和缩小的值))方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。
transform：skew(x轴的倾斜角度deg，y轴的倾斜角度deg)包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜
transform：matrix(1.2.3.4.5.6.)方法和2D变换方法合并成一个，有六个参数，包含旋转，缩放，移动（平移）和倾斜功能
8. CSS3 3D 转换
使用 3D 转换来对元素进行格式化。
您将了解到以下的 3D 转换方法：
rotateX())方法，围绕其在一个给定度数X轴旋转的元素。
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。
transform-style: preserve-3d ：规定被嵌套元素如何在 3D 空间中显示。
perspective ：规定 3D 元素的透视效果。
perspective-origin ：规定 3D 元素的底部位置。
backface-visibility ：定义元素在不面对屏幕时是否可见。
9. CSS3 过渡(transition)。(元素转换效果的速度的快慢)
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
2.指定效果的持续时间。
如果未指定的期限，transition将没有任何效果，因为默认值是0。
transition-property，规定应用过渡的 CSS 属性的名称。
transition-duration，定义过渡效果花费的时间。默认是 0。
transition-delay，指定多少时间后切换效果开始。
transition-timing-function ，规定过渡效果的时间曲线。默认是 “ease”。
transition-timing-function : linear，规定以相同速度开始至结束的过渡效果
transition-timing-function : ease，规定慢速开始，然后变快，然后慢速结束的过渡效果
transition-timing-function : ease-in，规定以慢速开始的过渡效果
transition-timing-function : ease-out，规定以慢速结束的过渡效果
transition-timing-function : ease-in-out，规定以慢速开始和结束的过渡效果
10. CSS3 动画
我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。
@keyframes 规则，要创建CSS3动画，你将不得不了解@keyframes规则。
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
1.规定动画的名称
2.规定动画的时长
您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0
动画效果是什么？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
改变元素的位置时要精确的定位
animation: “#”：绑定选择器。"#"(选择器)
@keyframes ：规定动画。
animation ：所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name ：规定 @keyframes 动画的名称。
animation-duration ：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function ：规定动画的速度曲线。默认是 “ease”。
animation-delay ：规定动画何时开始。默认是 0。
animation-iteration-count ：规定动画被播放的次数。默认是 1，infinite：指定动画应该播放无限次（永远）
animation-play-state：规定动画是否正在运行或暂停。默认是 “running”。
animation-direction：规定动画是否在下一周期逆向地播放。默认是 “normal”。
reverse：动画反向播放
alternate：动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse：动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
inherit：从父元素继承该属性。
infinite：无限旋转。
linear：旋转动画加它，更加流畅。
11. CSS3 多列
我们将学习以下8个 CSS3 的多列属性:
column-count ：属性指定了需要分割的列数。
column-rule-style：属性指定了列与列间的边框样式。
column-rule-width：属性指定了两列的边框厚度。
column-rule-color： 属性指定了两列的边框颜色。
column-rule：属性是 column-rule-* 所有属性的简写。
column-span：属性跨越所有列。
column-width： 属性指定了列的宽度。
column-fill：指定如何填充列。
columns 设置 column-width 和 column-count 的简写。
12. CSS3 用户界面
在 CSS3 中,增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。
Box-sizing：属性允许您以确切的方式定义适应某个区域的具体内容。
outline-offset：属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：1.轮廓不占用空间。2.轮廓可能是非矩形
appearance：允许您使一个元素的外观像一个标准的用户界面元素。
icon：为创作者提供了将元素设置为图标等价物的能力。
nav-down：指定在何处使用箭头向下导航键时进行导航
nav-index：指定一个元素的Tab的顺序
nav-left：指定在何处使用左侧的箭头导航键进行导航
nav-right：指定在何处使用右侧的箭头导航键进行导航
nav-up :指定在何处使用箭头向上导航键时进行导航
13. CSS 图片
border-radius：属性来创建圆角图片，可用百分比，椭圆。
响应式图片，响应式图片会自动适配各种尺寸的屏幕。例如：{max-width: 100% ; height: auto;}
图片滤镜，filter：属性用为元素添加可视效果 (例如：模糊与饱和度) 。
filter : grayscale(100%)，把图片变黑白色
filter : blur()，把图片变模糊
filter : contrast()，图片的对比度
filter : drop-shadow()，图片阴影
filter : hue-rotate()，改变图片的色相
filter : invert()，反相
filter : opacity()，图片的透明度
filter : saturate()，图片的饱和度
filter : sepia()，图片深褐色
filter : url()，图片地址
14. CSS 按钮
background-color：属性来设置按钮颜色:
font-size：属性来设置按钮大小:
border-radius：属性来设置圆角按钮:
border：属性设置按钮边框颜色:
我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。
提示: 我们可以使用 transition-duration 属性来设置 “hover” 效果的速度：
我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 “disabled” 属性效果)。
提示: 我们可以添加 cursor 属性并设置为 “not-allowed” 来设置一个禁用的图片：
移除外边距并添加 float:left 来设置按钮组：按钮动画
15. CSS 分页
可以使用 .active 来设置当期页样式，鼠标悬停可以使用 :hover 选择器来修改样式：
可以使用 border-radius 属性为选中的页码来添加圆角样式:
可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果:
16. CSS3 框大小
Box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。
默认情况下，元素的宽度与高度计算方式如下：
width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素实际高度
这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。
CSS3 Box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。
如果在元素上设置了 Box-sizing: border-Box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:
17. CSS3 弹性盒子(Flex Box)
（1）弹性盒子是 CSS3 的一种新的布局模式
CSS3 弹性盒（ Flexible Box 或 flexBox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
（2）CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
（3）direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变:
flex-direction 属性指定了弹性子元素在父容器中的位置
语法 : flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
（4）justify-content 属性:
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
语法：justify-content: flex-start | flex-end | center | space-between | space-around
各个值解析:
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
（5）align-items 属性：
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
语法：align-items: flex-start | flex-end | center | baseline | stretch
各个值解析:
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
（6）flex-wrap 属性：
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
语法：flex-wrap: Nowrap|wrap|wrap-reverse|initial|inherit;
各个值解析:
Nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。
（7）align-content 属性：
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items,但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
语法：align-content: flex-start | flex-end | center | space-between | space-around | stretch
各个值解析:
stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
（8）align-self
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
语法：align-self: auto | flex-start | flex-end | center | baseline | stretch
各个值解析:
auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
（9）flex
flex 属性用于指定弹性子元素如何分配空间。
语法：flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
各个值解析:
auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。
display：指定 HTML 元素盒子类型。
flex-direction：指定了弹性容器中子元素的排列方式
justify-content：设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap：设置弹性盒子的子元素超出父容器时是否换行。
align-content：修改 flex-wrap 属性的行为，类似 align-items,但不是设置子元素对齐，而是设置行对齐
flex-flow：flex-direction 和 flex-wrap 的简写
order：设置弹性盒子的子元素排列顺序。
align-self：在弹性子元素上使用。覆盖容器的 align-items 属性。
flex：设置弹性盒子的子元素如何分配空间。
18. 浏览器兼容
-ms-代表IE内核识别码
-moz-代表火狐内核识别码
-webkit-代表谷歌内核识别码
-o-代表欧朋opera内核识别码
由于浏览器内核不同，为了兼容多个浏览器而使用-webkit- 等 。
改变表单里面的字的样式可以用这个方法：input::-webkit-input-placeholder
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
