理论笔记

1、盒模型
标准盒模型（box-sizing：content-box）
总宽度：内容（content）+ border + padding + margin
怪异盒模型（box-sizing：border-box）
宽度 = 内容宽度（content + border + padding） + margin
2、弹性盒模型
① flex-direction:
row（默认水平方向，最左端）；row-servese（水平方向，最右端）；
column（把水平方向改变为垂直方向）；column-reverse（垂直方向，最下边）

② flex-wrap:
nowrap（默认，不换行）；
wrap（换行，第一行在上边）；
wrap-reverse（换行，第一行在下边）

③ flex-flow：是flex-direction和flex-wrap的简写，
两个值（默认：row（主轴方向），默认：是否换行（nowrap））

④ justify-content：flex-start（默认，左对齐）；flex-end（右对齐）；center（居中）；space-between（两端对齐，项目之间间隔都相等）；space-around（每个项目两侧间隔都相等）

⑤ align-items：
flex-start（与交叉轴的起点对齐）；flex-end（与交叉轴的终点即末尾对齐）；center（与交叉轴的中点对齐）；baseline（项目的第一行文字的基线对齐）；stretch（如果项目未设置高度或设为auto，将占满整个容器的高度）

⑥ align-content：属性,紧跟于flex-wrap属性后,该属性用于修饰flex-wrap属性
flex-start：（与交叉轴的起点对齐）；flex-end：（与交叉轴的终点对齐）；center：（中点对齐）；space-between：（两端对齐，轴线之间平均分）；
space-around：（两侧间隔都相等）

⑦ align-self：center允许单个元素与其他元素有不一样的对齐方式；在弹性子元素上使用。覆盖容器的 align-items 属性

⑧ order属性: (自定义子元素的显示顺序)

⑨ flex-grow属性:(定义弹性盒子元素的扩展比率)

⑩ flex-shrink属性:(定义弹性盒子元素的收缩比率)

3、CSS单位
① px绝对单位,1px是一个像素点的大小
② em相对单位：相对父元素字体的大小缩放比例
③ rem相对单位，是相对根元素的字体大小的缩放比例
④ %是相对父元素的百分比
⑤ vw是相对设备屏幕宽度的百分比 比如：屏幕宽 400px 8vw=400px*8%=32px
⑥ vh是相对设备屏幕高度的百分比
⑦ vm包含vmax和vmin，vmax为相对设备最大百分比，vmin为最小百分比
⑧ pt：point，大约1/72寸，一寸=3.3333···厘米。
⑨ pc：pica，大约6pt，1/6寸。
⑩ ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以 0.5em计算，IE11以下不支持。
⑪ ch：以节点所使用字体中的“0”字符为基准，找不到时为0.5em。IE10以上支持。
①②③④⑤⑥⑦⑧⑨⑩
⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳
4、CSS选择器
① !important > 内联样式 > id选择器 > class选择器 > 属性选择器 > 伪类选择器（: hover） > 标签选择器 > 伪元素（: before） > 通配符选择器
② 可继承的属性：
font-size、font-family、color
③ 不可继承的属性：
border、padding、margin、width、height
④ CSS3新增的伪类：
p：first-of-type：选择属于其父元素的首个元素；
p：last-of-type：选择属于其父元素的最后元素；
p：only-of-type：选择属于其父元素的唯一元素；
p：only-child：选择属于其父元素的唯一子元素；
p：nth-child（1）：选择属于其父元素的第一个子元素；
enabled：disabled：表单控件d的禁用状态；
：checked：单选框h或复选框被选中；
5、BFC
BFC是块级格式化上下文，是一个独立的渲染区域

特性：
① 内部的块级元素会在垂直方向上一个接一个的放置；
② 位于同一BFC下的相邻块级子元素在垂直方向上会发生margin重叠；
③ 位于不同BFC下的相邻元素之间不会发生margin重叠；
④ BFC可以包含浮动元素；
⑤ BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；

创建：
① 根元素；
② float的值不为none
③ overflow的值为auto、scroll或hidden
④ display的值为:
table-cell：它会作为一个表格单元格显示（类似td和th）。
table-caption：此元素会作为一个表格标题显示。
inline-block：行内块元素。
⑤ position的值为fixed或absolute用途：
① 闭合浮动； ② 阻止margin重叠 ③ 自适应流体布局
6、清除浮动的方法
① 给设置浮动的元素父级加高；
② 给设置浮动的元素设置overflow：hidden；（如果需要兼容IE，再添加一个zoom：1）
③ 给需要清除浮动的元素设置clear：both；
④ 在最后一个子元素后加一个空的div，给它设置clear：both；
⑤ 伪类清除：
.clearfix：after{content：“”；clear：both；display：block}
.clearfix{zoom:1}

7、CSS3的新特性
rgba；
弹性布局flex；
媒体查询；
渐变色；
动画animation；（6个值）
animation-name：动画名称；
animation-duration：动画持续时间；
animation-timing-function：动画的过渡类型；
animation-delay：动画的延迟时间；
过渡属性：transition
property：过渡的css属性；
duration：过渡进行的时间长度；
timing-function：过渡进行的时序函数；
delay：过渡开始的时间；
2d/3d 属性转换：transform
origin：允许更改转化元素位置；
translate：移动，平移；
scale：缩放转化；
skew：倾斜转换；
rotate：旋转；

8、display有哪些值
display：none；隐藏；
display：block；显示，支持宽高，独占一行；
display：inline；内联元素，不支持宽高，不独占一行；
display：table；此元素作为块级表格来显示；
display：flex；弹性盒模型；
display：list-item；此元素作为列表显示；