温习CSS
css样式表的三种调用方式：
1. style标签引入：把CSS样式表放到<head>文档中，如：<style>***</style>
* 缺点：不利于复用，适用于单页面的场景
2. 行间样式（标签内部引入），如：<h1 style="color:red"></h1>
* 优点：优先级高，不会被其他样式覆盖和影响
* 缺点：没有样式内容分离，不利于代码的维护，影响阅读体验
3. 外部引用css文件：<link rel=stylesheet type="text/css" href="***"/>
* 优点：实现了内容和样式的分离，代码利于维护，可以被复用
* 缺点：增加了一次请求
三者的优先级从高到低：行间样式--外部引用--style标签引入
@import：url("***"): 在css里面再添加一个css请求
css选择器的分类：
id选择器，类选择器，标签选择器，通配选择器，层级选择器（子集选择器，它只会找到下一代所有的子集，而不会找孙子集），群组选择器，伪类选择器，属性选择起（input[type="text"]），伪元素选择器（::）
他们的优先级数序由低到高：伪类--属性--通配--标签--类--id，层级，群组，important权重最高
单位：px、%、em、rem、vh和vw(视窗单位 vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px)
css属性
font: 字体
font-size
font-weight：bold
font-family："Tohoma" Arial sans-serif
line-height
text-decoration：none 去掉文字下划线
word-spacing: 控制单词间的间距（如：word-spcing: 5px）
letter-spacing：控制字符间的间距
简写方式：font：16px/1.5 'Tohoma' Arial sans-serif ;
line-height: 分为顶线，基线和底线
行高指的是文本行的基线间的距离。
基线并不是汉字的下端沿，而是英文字母"x"的下端沿
color: 颜色
可以颜色关键字、rgb(a)、16进制，（部分16进制颜色可以缩写，如#000000可缩写成#000）和hsl
aqua fuchsia lime olive red white black gray maroon orange silver yellow blue green navy purple teal
background：背景
分为background-color，background-position，background-image，background-repeat，background-attachment（：fixed，背景图固定）
缩写方式：background：#fff url("***") 0 0 no-repeat fixed(不常用);
border：边框
分为border-width，border-color和border-style，通常简写成border，如：border：1px red solid，顺序可按个人喜好而定
padding和margin
属性值可写成像素、em（rem）和百分比
缩写形式遵循TRBL法则
margin：0 auto 可使块级元素水平居中
display
分为block，inline和inline-block三种
ol和ul列表
list-style-type：none 去掉列表前的标志
水平居中方式
文本居中：text-align: center
block元素居中：margin: 0 auto
垂直居中方式：
文本： line-height： 10px（数值与元素高度一致）
block元素：display：table-cell; verticle-align：middle
属性继承：
同一选择器被不同样式定义，那么某些属性值会被继承，如：color会继承外部样式，而text-align和font-size则继承内部样式
不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。
布局
float布局
分为left、right和none三种
overflow属性分为visible，scroll，hidden，auto等
清除浮动：
* clear：left（both）
* 给父级div定义overflow：hidden
* 给父级div增加高度
position布局
分为relative、absolute和fixed几种，默认值为static
realtive：相对自身当前位置上下左右，值可以为负数，可以对块，行标签使用，不会改变标签属性
absolute：如果没有父级标签设置relative；当前标签元素是以body可视区域为起点。如果有父级设置relative，则以父级标签为起点。（脱离文档流，改变标签的属性，类似于inline-block的特性）
fixed：表示固定定位
z-index：1，表示当前标签的层级，当前标签必须使用position属性才有效果，取值为数字，不能为负数
flex布局：弹性布局
使用前需先给容器设置display：flex
属性（容器）：
1.flex-direction(伸缩方向):
row（主轴为水平方向，起点在左端）
row-reverse（主轴为水平方向，起点在右端）
column（主轴为垂直方向，起点在上沿）
column-reverse（主轴为垂直方向，起点在下沿）
2.flex-wrap:
nowrap: 不换行
wrap: 换行
wrap-reverse： 从下向上换行
3.flex-flow：前两个的缩写格式
4.justify-content(主轴对齐方式):
flex-start (左对齐)
flex-end (右对齐)
center (居中)
space-between (两端对齐，项目之间的间隔都相等)
space-around (每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍)
align-items(交叉轴对齐方式)：
flex-start: (交叉轴的起点对齐)
flex-end: (交叉轴的终点对齐)
center: (交叉轴的中点对齐)
baseline: (项目的第一行文字的基线对齐)
stretch: (如果项目未设置高度或设为auto，将占满整个容器的高度)
align-content: 定义了多根轴线的对齐方式，如果项目只有一个轴线，该属性不起作用
flex-start: 与交叉轴的起点对齐
flex-end: 与交叉轴的终点对齐
center: 与交叉轴的中点对齐
space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around: 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch: 轴线占满整个交叉轴
属性（项目）：
order: 属性定义项目的排列顺序，数值越小，排列越靠前，默认为0。
flex-grow: 属性定义项目的放大比例，默认为0，如果空间剩余，该项目讲放大。
flex-shrink: 属性定义项目的缩小比例，默认为1，如果空间不足，该项目将缩小。
flex-basis: 属性定义了再分配多余空间之前，项目占据的主轴空间，默认值为0，可设固定宽高
flex: 前三个属性的缩写，默认值为(0,1,auto),后两个属性可选
align-self: 属性允许单个项目有与其它项目不一样的对齐方式，可覆盖align-items属性，默认为auto，继承父级，如果没有父级，则等同于stretch
###BFC
简介：
FC全称”Formatting Context”, 中文为“格式化上下文”
BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”
IFC全称”Block Formatting Context”, 中文为“行级格式化上下文”
BFC的生成
满足下列CSS声明之一的元素便会生成BFC：
根元素
* float的值不为none
* overflow的值不为visible
* display的值为inline-block、table-cell、table-caption
* position的值为absolute或fixed
BFC的约束规则
生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）
内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
