常见的一些小细节，容易忽略的地方

超链接唤起指定应用

<a href="tel:10086">打电话</a> <br>
<a href="sms:10010">发短信</a> <br>
<a href="mailto:fuming@atguigu.cn">发邮件</a>

一些特殊格式的写法

￥100￥1


H₂O

m²

单元格跨行和跨列（重要）

给 td、th 设置属性：

rowspan： 设置所跨行数
colspan： 设置所跨列数

跳转到百度，京东搜索地址

百度：http://www.baidu.com/s
京东：http://search.jd.com/search
京东搜索手机：http://search.jd.com/search?keyword=手机

HTML 字符实体

 			空格
&lt;			小于号 <
&gt;			大于号 >
&amp;           和好 &
&yen;			人民币符号
&copy;			版权符号
&times;			乘号
&divide;		除号

参考链接：更多的字符实体，请参照：https://www.w3cschool.cn/htmltags/html-symbols.html

meta 元信息

<!-- 字符集编码 -->
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<!-- 网页关键字 -->
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">

<!-- 网页描述信息 -->
<meta name="description" content="80字以内的一段话，与网站内容相关">

<!-- 设置完美视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 设置网页刷新 -->
<!-- <meta http-equiv="refresh" content="3"> -->
<!-- 定时跳转 -->
<meta http-equiv="refresh" content="10,url=http://www.atguigu.com">
<title>Document</title>

css 样式分类名称

1. 行内式
2. 内嵌式
3. 外联式

盒子模型

盒子模型的相关概念

1. 将元素比作成一个盒子
2. 页面布局就是盒子的排列和堆砌

内容（content）： 内容是元素的核心区域，元素中的文本内容和后代元素都显示在内容上。

内边距（padding）： 内容与元素边界的距离。

边框（border）： 位于元素的边界上。

外边距（margin）： 在元素边界之外，是与相邻元素的距离。

影响盒子大小的因素

**盒子的总宽度 = 内容宽度 + 左右内边距 + 左右边框+左右外边距
盒子的总高度 = 内容高度 + 上下内边距 + 上下边框+上下外边框**

参考www.w3cschool

默认总宽度 = 父元素内容宽度 - 自身的左右外边距
默认内容宽度 = 父元素内容宽度 - 自身的左右外边距 - 自身的左右内边距 - 自身的左右边框

盒子中的内容区域

设置内容区域的宽高的 CSS 属性

CSS 属性名	功能	属性值
width	宽度	长度
max-width	最大宽度	长度
min-width	最小宽度	长度
height	高度	长度
max-height	最大高度	长度
min-height	最小高度	长度

注意： 最大最小宽高一般不与固定宽高一同设置！

块级元素block

默认宽度被内容撑开，没有内容就没有高度

行内元素inline

默认宽度被内容撑开，没有内容就没有宽度
默认高度被内容撑开，没有内容也会有一个文字的高度

行内块元素 inline-block

默认宽度被内容撑开，没有内容就没有宽度
默认高度被内容撑开，没有内容就没有高度

line-height

行高的概念：

1. 上一行文字中线与下一行文字中线的距离称为行高
2. 上一行文字底线与下一行文字顶线的距离称为行距，调整行高大小，行距受到影响

第一行文字中线与元素顶部距离是行高一半，最后一行文字中线与元素底部距离是行高一半！
使用行高实现元素中的一行文字垂直居中，满足以下条件：

1. 只有一行文字
2. 设置行高与高度一致

line-height 是 font 的子属性：

/* 将行高写在font复合属性中 /
font: bold 14px/30px ‘Microsoft YaHei’;
font: bold 14px/3 ‘Microsoft YaHei’; / 此时 3 表示字体大小的倍数，相当于em */

行高可选值：
1.normal：由浏览器根据文字大小决定的一个默认值。
2.像素（px）
3.数字：参考自身font-size的倍数（很常用。通常是1.5~2倍之间）
4.百分比：参考自身font-size的百分比。
备注：由于字体设计的原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。

注意：
1.行高过小：导致文字重叠，且最小值是0，不能为负数（负数会无效，默认为normal）。
2.行高是可以继承的。

盒模型分类

标准盒模型

元素的总宽度应该这样计算：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度应该这样计算：

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

怪异盒模型

盒子的总宽度：width(包括padding+border)
好处：设置padding 时不用再减宽、高值

css 文本属性

属性名	作用	属性值
letter-spacing	字间距	长度
word-spacing	词间距（中文无效果）	长度
text-decoration	文本修饰线	none：无修饰线。 underline：下划线。 overline：上划线。 line-throuth：删除线
text-indent	首行缩进	长度
text-align	文本水平对齐方式	left：左对齐。 right：右对齐。 center：居中对齐
vertical-align	与同行文本如何对齐	baseline：基线对齐。 top：顶线对齐。 middle：中线对齐。 bottom：底线对齐。 sub：下标字。 super：上标字。 长度：元素底部与基线的距离
line-height	行高	长度

vertical-align

1. 设置行内元素或行内块元素与同行文本如何对齐，如 基线对齐、顶线对齐、中线对齐、底线对齐等

2. 设置上标字和下标字
3. 设置单元格中内容的纵向对齐方式，只能用于 td、th

背景样式

属性名	作用	属性值
background-color	背景颜色	颜色
background-image	设置背景图像地址	url(地址)
background-repeat	设置背景图像重复方式	repeat：重复。 repeat-x：横向重复。 repeat-y：纵向重复。 no-repeat：不重复。
background-position	设置背景图像位置	关键字。 两个长度表示的坐标。 百分比
background-attachment	背景图像固定	scroll：随元素滚动，默认值。 fixed：固定。
background	背景复合属性	多个值使用空格分隔

背景颜色

1. 元素默认背景颜色是透明,background-color的默认值是 transparent（透明）
2. 给 body 设置背景色就是给整个页面设置背景色

① 设置背景图像的位置 background-position

使用关键字设置属性值：

/* 
    x轴位置：left right center
    y轴位置：top bottom center
*/
/* 使用两个值 */
background-position: left top;
background-position: right bottom;
background-position: right center;
background-position: right top;
/* 使用一个值  另一个值默认center*/
background-position: left;   /* left center */
background-position: bottom; /* center bottom */
background-position: center; /* center center */

通过指定坐标（用长度）设置属性值：

/* 使用坐标设置背景图像位置 */
/* 设置的是图像的左上角位置 */
/* 使用两个长度（px、em） 分别是x坐标 y 坐标 */
background-position: 0 0;
background-position: 100px 20px;
background-position: 520px 320px;
background-position: -100px 100px;
/* 只设置一个长度， 被认为是x坐标 y轴位置默认取center */
background-position: 100px;
/* 长度表示的坐标和关键字混搭 */
background-position: right -50px;
background-position: 100px bottom;

使用百分比设置属性值：

/* 
    元素和图像各自创建一个坐标系
    原点在各自的左上角，x轴从左到右，y轴从上到下
    根据百分比从元素上找到坐标点，根据百分比从图像上找到坐标点，两点重合
*/
/* 两个百分比 */
background-position: 0% 0%;
background-position: 50% 50%;
background-position: 20% 10%;
background-position: 100% 100%;
/* 百分比和其他混搭 */
background-position: 100% 100px;
background-position: left 100%;
/* 值使用一个百分比 被认为x方向位置，另一个方向默认center */
background-position: 10%;

background-position 的两个子属性：

background-position-x	设置x位置
background-position-y   设置y位置

② 背景图像固定 background-attachment

如果设置 background-attachment 为 fixed， 背景图像定位的坐标原点是视口的左上角
背景图像只能显示图像与元素位置重合的位置

③ 背景复合属性 background

任何子属性的值都可以作为background的值，没有数量要去，没有顺序要求

2.3 鼠标光标样式

属性名	作用	属性值
cursor	设置鼠标光标	pointer：小手。 move：移动图标。

/* 自定义鼠标光标 */
cursor: url(../images/arrow03.png),pointer;

给列表设置图标

属性名	作用	属性值
list-style-type	设置列表项图标	none：无
list-style-position	设置列表项图标位置	outside：在li外面。 inside：在li里面。
list-style-image	自定义列表项图标	url(图片地址)
list-style	复合属性	多个值使用空格分隔

注意： 只有 ul、ol、li 这些标签设置列表样式才有效果！

表格样式

属性名	作用	属性值
table-layout	设置列宽固定	auto：默认值。 fixed：固定。
border-spacing	设置单元格之间的距离	长度
border-collapse	合并单元格边框	separate：默认值。 collapse：合并
caption-side	标题位置	top：表格上面。 bottom：表格下面
empty-cells	没有内容的单元格显示还是隐藏	show：显示，默认值。 hide：隐藏

注意： 表格相关的属性只能设置到 table 标签上才生效！

选择器

④ 全局选择器

* {}

组合选择器

后代元素选择器

选择器1 选择器2 {}

子元素选择器

选择器1 > 选择器2 {}

交集选择器

选择器1选择器2 {}

.item.active {}
.active.item {}
div.item {}

并集选择器

选择器1, 选择器2 {}

伪类选择器

:link			选择未访问过的超链接
:visited		选择已访问过的超链接
:hover			鼠标悬停在元素上
:active			鼠标悬停在元素上且鼠标按键按下不抬起

多个伪类选择器一起使用，请按照 :link、:visited、:hover、:active 顺序书写 (love hate 记忆法)

子元素选择器

选择器1 > 选择器2 {}

相邻兄弟元素选择器

选择器1 + 选择器2 {}

通用兄弟元素选择器

选择器1 ~ 选择器2 {}

属性选择器

[attr]			  选择包含属性名attr的元素
[attr=“val”]  	  选择属性attr的值是val的元素
[attr^="val"]     选择属性attr的值以val开头的元素
[attr$="val"]     选择属性attr的值以val结尾的元素
[attr*="val"]     选择属性attr的值包含val的元素

属性选择器如果与其他选择器进行交集组合，通常写在其他选择器的后面

img[alt] {}
.item[title] {}

语言伪类选择器 (1个，了解)

:lang(语言)

问答： :lang(zh-CN) 和 [lang="zh-CN"] 什么区别？
答案： :lang(zh-CN） 所选择到的元素中可以自己不设置 lang 属性，会继承祖先元素的语言设置
	  [lang="zh-CN"] 所选择到元素，必须元素自身设置了 lang 属性。

UI元素伪类选择器（3个）

:enabled		可用的表单控件
:disabled		不可用的表单控件
:checked		被选中的表单控件（单选框、复选框、下拉选项）

结构伪类选择器（12个）

:frist-child			在兄弟元素中排名第一
:last-child				在兄弟元素汇总的排名最后
:nth-child(n)			在兄弟元素中排名第n个
:nth-last-child(n)		在兄弟元素中排名倒数第n个
:only-child				没有兄弟元素

:first-of-type			在同标签名的兄弟元素中排名第一
:last-of-type			在同标签名的兄弟元素中排名最后
:nth-of-type(n)			在同标签名的兄弟元素中排名第n个
:nth-last-of-type(n)	在同标签名的兄弟元素中排名倒数第n个
:only-of-type			没有同标签名的兄弟元素

:root					根元素
:empty					没有文本内容也没有后代元素

:nth-child(odd)        奇数行
:nth-child(even)       偶数行
:nth-of-type(2n-1)	   奇数行
:nth-of-type(2n)	   偶数行
:nth-of-type(3n)	   排号是3的倍数

否定伪类选择器（1个）

:not(选择器) 			 选择不满足括号中选择器的元素

伪元素选择器（6个）

::first-letter / :first-letter	选择元素中的第一个文字
::first-line / :first-line		选择元素中的第一行文字
::before / :before				给元素动态添加子元素，放在第一个位置
::after / :after				给元素动态添加子元素，放在最后一个位置
::placeholder					选择输入框、文本域中placeholder中的文字
::selction						选择被鼠标选中的文字

::before和::after 选择器后面的声明块中必须设置 content 属性！

选择器的优先级（权重）

1. ID选择器 > 类选择器、伪类选择器、属性选择器 > 标签名选择器、伪元素选择器 > 全局选择器
2. !important > 行内式 > 任何选择器
   注意：!important 可以无限提高某个属性的权重

https://flukeout.github.io/

单个选择器之间的权重

ID选择器 > 类选择器、伪类选择器 > 标签名选择器 > 全局选择器

组合选择器优先级比较规则

1. 两个组合选择器，先比较ID的数量，数量多者权重高，比较结束
2. ID数量无法分胜负，比较类、伪类的数量，数量多者权重高，比较结束
3. 类、伪类的数量无法分胜负，比较标签名的数量，数量多者权重高， 比较结束
4. 两个选择器权重一致，后面覆盖前面

**组合： ** 并集选择器的组合，各自计算各自的权重，不会放在一起计算。

margin塌陷

css 的基本问题

margin 合并

css 的基本问题

内容溢出

CSS 属性名	功能	属性值
overflow	设置溢出内容的显示方式	visible：显示，默认值。 hidden：隐藏。 scroll：滚动条。 auto：自动。
overflow-x	x轴方向溢出内容的显示方式	同上
overflow-y	y轴方向溢出内容的显示方式	同上

auto 和 scroll 的区别：

1. scroll 不论内容是否会溢出，都有滚动条
2. auto 只有内容溢出才会显示滚动条

隐藏元素

1. 设置 visibility:hidden;   元素隐藏但是占据位置
2. 设置 display:none;  元素彻底隐藏，不占据位置

浮动

元素浮动之后的特点

元素浮动之后，称为浮动元素，具有如下特点：

1. 浮动元素脱离文档流
2. 多个浮动的元素会水平排列，一行放不下自动换行
3. 不论元素原来的显示模式是什么，设置成浮动之后，就是浮动元素，具有自己的显示特点：
   ① 水平排列，自动换行，不存在外边距的塌陷和合并，设置左右外边距auto不会居中（与块级区别）
   ② 设置宽高、内外边距都没有问题（与行内区别）
   ③ 不会被父元素作为文本去处理（与行内块和行内区别）

文档流： 文档流里的元素会按照顺序从上到小，从左到右排列。

浮动元素产生的影响

① 对后面兄弟元素的影响

影响：

后面兄弟元素会占据浮动元素原来的位置，可能造成位置的重叠，浮动元素显示在上

解决：

方案一： 给紧邻这浮动元素的后面的兄弟元素设置 clear:both
方案二： 兄弟元素要浮动都浮动，浮动元素不要跟不浮动的元素做兄弟

② 对父元素的影响

影响：

子元素浮动之后，不能撑起父元素高度，造成高度塌陷

解决：

方案一： 父元素设置固定高度
方案二： 父元素设置浮动
方案三： 父元素设置 overflow, 值只要不是 visible 都可以
方案四： 给父元素添加个子元素，放在所有浮动元素的后面，该元素要求是块级元素，设置 clear:both
方案五： 原理同方案四相同，使用伪元素给父元素添加子元素，设置 clear:both (推挤)

父元素::after {
    content: "";
    display: block;
    clear:both;
}

行内元素或行内块元素在布局中的特点

父元素设置的文本属性可以作用于行内元素和行内块元素

① 让行内块元素在父元素中水平居中

给父元素设置 text-align:center

② 让行内块元素在父元素中纵向居中

1. 给父元素设置行高
2. 给行内块元素设置 vertical-align:middle

行内元素或行内块元素之间的空白问题

① 元素之间的空白（左右）

产生原因：

代码中，元素之间的换行

解决方案：

方案一： 代码中，元素之间不写换行（不推荐）
方案二： 父元素设置字体大小为0； 如果行内块元素中还有文字单独设置字体大小。

② 底部的空白（图片的幽灵空白）

产生原因：

行内块元素与文字基线对齐，底部的空白就是基线与底线的距离

解放方案：

方案一： 父元素设置字体大小 0
方案二： 给行内块元素设置 vertical-align:bottom (推荐)
方案三： 经典解决方案，针对图片，将图片设置成块级元素

③ 文字内容个数不同的行内块元素水平排列无法对齐

产生原因：

1. 如果行内块元素中没有文字，该元素的底部与基线对齐
2. 如果行内块元素中有一行文字，文字与外面的基线对齐，进而影响行内块元素的位置
3. 如果行内块元素中有多行文字，最后一行文字与外面的基线对齐，进而影响行内块元素的位置

解决方案：

给行内块元素设置 vertical-align, 值不是 baseline 都可以解决问题

定位

设置定位元素（绝对和固定）在包含块中水平垂直都居中

方案一：

position: absolute/fixed;
left: 50%;
top:50%;
margin-left: -自身总宽度/2;
margin-top:-自身总高度/2;

方案二：

position: absolute/fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

css3 新增长度单位

rem			根元素字体大小的倍数
vw          将视口宽度分成100份，设置占多少份			
vh			将视口高度分成100份，设置占多少份			
vmax		将视口宽高中较大的一个分成100份，设置占多少份		
vmin		将视口宽高中较小的一个分成100份，设置占多少份

外轮廓

CSS 属性名	含义	值
outline-style	外轮廓风格	同border-style
outline-width	外轮廓宽度	长度
outline-color	外轮廓颜色	颜色
outline	复合属性	多个值使用空格分隔
outline-offset	与边框的距离 不是 outline 的子属性	长度，可以是负值
外轮廓与边框的区别：

外轮廓不是盒子的一部分，不影响元素的尺寸和位置！

CSS3 新增文本属性

CSS 属性名	含义	值
text-align-last	最后一行文本水平对齐方式	start：靠文字起始方向对齐，默认自。 end：靠文字结束方向对齐。 left：靠左对齐。 right：靠右对齐。 center：居中对齐。 justify：两端对齐。
text-decoration-line	文本修饰线的类型	none：无。 underline：下划线。 overline：上划线。 line-throuth：删除线。
text-decoration-style	文本修饰线风格	solid：实线。 dashed：虚线。 dotted：点线。 double：双实线。 wavy：波浪线。
text-decoration-color	文本修饰线颜色	颜色
text-decoration	文本修饰线复合属性	多个值使用空格分隔
word-wrap / overflow-wrap	是否允许单词内部断行	normal：不允许。 break-wrod：允许。
white-space	文本显示格式	normal：默认值。 pre：原格式显示。 pre-wrap：pre基础上+自动换行。 pre-line：normal基础上+识别换行符。 nowrap：强制显示成一行
text-overflow	溢出文本显示省略号	clip：默认值。 ellipsis：显示省略号。
text-shadow	文本阴影	阴影偏移、模糊值、颜色

单行长文本显示省略号：

1. 强制将文字显示在一行中
2. 设置溢出部分隐藏
3. 设置溢出文本显示成省略号

 /* 将文本强制显示到一行 */
white-space: nowrap;
/* 溢出部分隐藏 */
overflow: hidden;
/* 显示省略号 */
text-overflow: ellipsis;

text-shadow 文本阴影的设置规则：

可以设置阴影偏移位置、阴影模糊值和阴影颜色

/* 阴影偏移 */
text-shadow: 3px 3px; 
/* 阴影偏移 颜色 */
text-shadow: 4px 4px #999;
text-shadow: #900 4px 4px;
/* 阴影模糊值 */
text-shadow: 3px 3px 5px;
text-shadow: 3px 3px 15px rgba(0,0,0,.5);

/* 多阴影 */
text-shadow: 1px 1px #bbb, 
            2px 2px #aaa, 
            3px 3px #999,
            4px 4px #888,
            5px 5px #777,
            6px 6px #666;

CSS3 渐变

渐变是一个值，要作为一个图片被使用，可以使用渐变作为值的属性有 background-image、list-style-image 等。

线性渐变

linear-gradient(渐变方向，颜色列表)

1. 渐变方向
   ① 使用关键字，如 to bottom、to left、to top bottom、to right top ...
   ② 使用角度，取值 0 ~ 360，角度单位是deg

2. 颜色列表
   每个颜色之间使用逗号分隔
   每个颜色可以指定颜色位置，如果不指定位置，多个颜色位置平均分布

径向渐变（了解）

radial-gradient(半径 at 圆心位置，颜色列表)

重复渐变

repeating-linear-gradient()    重复线性渐变
repeating-radial-gradient()	   重复径向渐变

使用渐变，可以制作文本格

Filter 滤镜

filter: 滤镜函数(参数);

滤镜函数	描述
blur()	设置模糊，值是长度，值越大越模糊，百分比无效。
brightness()	设置亮度，值是数字或者百分比，0全黑，1无效果，可以比1大，默认1。
saturate()	设置饱和度，值是数字或者百分比，0完全不包含，1无效果，可以比1大，默认1。
contrast()	设置对比度，值是0~1之间的数字或者百分比，0全灰，1无效果，可以比1大，默认1。
grayscale()	设置灰度，使用0~1之间的数字或百分比，值越大灰度越高，0无效果，1灰度最高，默认0
sepia()	设置深褐色度，使用0~1之间的数字或百分比，值越大深褐色度越高，0无效果，1灰度最高，默认0
hue-rotate()	设置色相旋转，值是0~360deg之间的角度
invert()	设置反转，使用0~1之间的数字或百分比，0无效果，1彻底反转，默认0
opacity()	设置不透明度，使用0~1之间的数字或百分比，0完全不透明，1彻底透明，默认0
drop-shadow()	设置阴影，需要设置偏移位置、模糊值、颜色
url()	使用svg设置滤镜

blur()				模糊
grayscale()			灰度

字体

字体格式的转换工具：

• https://www.fontsquirrel.com/tools/webfont-generator FontSquirrel在线工具
• https://www.fontke.com/tool/fontface/ 字客网

字体定制工具：

• https://www.iconfont.cn/webfont?spm=a313x.7781068.0.d81ec59f2#!/webfont/index 阿里Web字体
• http://www.youziku.com/ 字体库网站
• https://www.ziti163.com/webfont/create.aspx 字体网

字体图标

阿里图标

地址： http://www.iconfont.cn/

font-awesome

地址：http://fontawesome.dashgame.com/

字体图标制作工具 icoMoon

地址： http://icomoon.io/app/#/select

多列布局

设置给包裹元素的 CSS 属性（共 8 个属性）

CSS 属性名	含义	值
column-count	列数	数字
column-width	列宽	长度
columns	同时设置列数和列宽	空格分隔两个值
column-gap	列间距	长度
column-rule-style	列分隔线风格	同 border-style
column-rule-color	列分隔线颜色	颜色
column-rule-width	列分隔线宽度	长度
column-rule	列分隔线复合属性	空格分隔两个值

column-count 和 column-width：

哪个属性分出来的列数少，就按照哪一个。

设置给子元素的 CSS 属性（共 4 个属性）

CSS 属性名	含义	值
column-span	跨列	none：不跨列，默认值。 all：跨所有列
-webkit-column-break-before（了解）	设置元素前面是否断列	auto：自动，默认值。 always：必须断列。 avoid：必须不断列。
-webkit-column-break-after（了解）	设置元素后面是否断列	auto：自动，默认值。 always：必须断列。 avoid：必须不断列。
-webkit-column-break-inside（了解）	设置元素内部是否断列	auto：自动，默认值。 avoid：必须不断列。

伸缩盒布局 Flex

伸缩容器和伸缩项目

概念定义

伸缩容器： 元素设置 display:flex或者display:inline-flex，该元素就称为伸缩容器。

伸缩项目： 伸缩容器的子元素称为伸缩项目。

伸缩项目的特点

1. 伸缩项目沿主轴排列（主轴默认横向），不会脱离文档流
2. 不论元素原来的显示模式是什么，变为伸缩项目之后，具有自己的显示特点：
   ① 不存在外边距的塌陷和合并，默认宽高被内容撑开
   ② 宽高内外边距都可以设置，不会被父元素当成文本

设置主轴方向和换行方式

主轴： 伸缩项目沿着主轴排列，主轴的默认方向是从左到右。

侧轴： 与主轴垂直的是侧轴。

设置主轴方向

给伸缩容器设置CSS属性 flex-direction 可以修改主轴方向，该属性的值如下：

row				水平从左到右
row-reverse		水平从右到左
column			竖直从上到下
column-reverse	竖直从下到上

设置换行方式

给伸缩容器设置CSS属性flex-wrap 可以修改换行方式，该属性值如下：

nowrap			不换行
wrap			自动换行
wrap-reverse	换行并翻转

同时设置主轴方向和换行方式

flex-flow 可以同时设置主轴方向和换行方式，是 flex-direction 和 flex-wrap 的复合属性。

设置伸缩项目在主轴上的对齐方式

给伸缩容器设置CSS属justify-content，可以调整伸缩项目在主轴上的对齐方式，该属性的值如下：

flex-start				主轴起点对齐，默认值
flex-end				主轴终点对齐
center					居中对齐
space-between			两端对齐，两端无间距
space-around			两端间距是中间间距一半
space-evenly			两端间距与中间间距相等

设置伸缩项目在侧轴上的对齐方式

一条主轴线（伸缩项目在主轴上不换行）

给伸缩容器设置CSS属性 align-items， 该属性的值如下：

stretch		伸缩项目在侧轴方向拉伸（前提：不设置侧轴方向对应的长度）
flex-start	侧轴起点
flex-end	侧轴终点
center		居中
baseline	基线

多条主轴线 （伸缩项目在主轴上发生换行）

给伸缩容器设置CSS属性 align-content， 该属性的值如下：

stretch					伸缩项目在侧轴方向拉伸,默认
flex-start				侧轴起点对齐，默认值
flex-end				侧轴终点对齐
center					居中对齐
space-between			两端对齐，两端无间距
space-around			两端间距是中间间距一半
space-evenly			两端间距与中间间距相等

伸缩项目的伸缩性

伸缩项目在主轴上的长度 flex-basis

如果设置了 flex-basis，伸缩项目在主轴上的长度就按照 flex-basis， 与主轴方向对应的 width 或者 heihgt 将不生效。

flex-basis 的默认值是 auto，表示 flex-basis 不起作用，主轴方向的长度仍然按照 width 或者 height 的设置。

扩展比率 flex-grow

伸缩项目扩展的前提：

1. 伸缩容器在主轴方向有富余的空间
2. 伸缩项目的扩展比率flex-grow不能是0

伸缩项目扩展的规则：

			  原来的主轴长度  扩展比率    瓜分比重
.item01         100            1        1/10     100+400*1/10即100+40
.item02         200            6        6/10     100+400*6/10即200+240
.item03         300            3        3/10     100+400*3/10即300+120

富余空间： 400
分母： 1+6+3=10

收缩比率 flex-shrink

伸缩项目收缩的前提：

1. 伸缩容器在主轴上的长度不够，小于所有伸缩项目的主轴长度和
2. 不能换行
3. 伸缩项目的收缩比率不能是0，默认值是 1

伸缩项目收缩的规则：

			原来的主轴长度    收缩比率    瓜分比重
.item01         100            5        500/1700     100-100*5/17
.item02         200            3        600/1700     200-100*6/17
.item03         300            2        600/1700     300-100*6/17

亏空长度： 100
分母：    100*5 + 200*3 + 300*2 = 1700 

flex 复合属性

flex: grow shrink basis

flex: 1 1 0;
flex: 0 0 auto;
flex: 0 1 auto;

• 如果缩写为 flex: 1 , 则其计算值为 1 1 0%
• 如果缩写 flex: auto , 则其计算值为 1 1 auto
• 如果flex: none , 则其计算值为0 0 auto
• 如果 flex: 0 auto 或者 flex: initial , 则其计算值为0 1 auto，即 flex 初始值

伸缩项目排序

给伸缩项目设置 order 属性，属性值是数字，值越大排序越靠后，可以是负值。

单独设置伸缩项目在侧轴上的对齐方式

给伸缩项目设置 align-self ，该属性的值：

auto： 	   按照伸缩容器 align-items 的设置,默认值
stretch		伸缩项目在侧轴方向拉伸
flex-start	侧轴起点
flex-end	侧轴终点
center		居中
baseline	基线

伸缩盒相关 CSS 属性总结

设置给伸缩容器的属性

CSS 属性名	含义	值
display	设置伸缩容器	flex inline-flex
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 space-evenly
align-items	侧轴上的对齐方式	stretch flex-start flex-end center baseline
align-content	侧轴上的对齐方式（发生换行）	stretch flex-start flex-end center space-between space-around space-evenly

设置给伸缩项目的属性

CSS 属性名	含义	值
flex-basis	伸缩项目的主轴长度	auto，长度
flex-grow	扩展比率	数字，默认值0
flex-shrink	收缩比率	数字，默认值1
flex	复合属性
order	排序	数字
align-self	单独设置侧轴对齐