这篇文章将分为三部分css和html为一部分，js、jQuery为一部分，vue与性能优化为一部分，今天会先整理css与html1，弹性盒布局父级设置display：flex将对象作为弹性伸缩盒显示采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。
其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。
容器默认生成两根主轴，水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。
设置在容器上的属性有6种分别为flex-direction：决定主轴的方向（即项目的排列方向）flex-wrap：定义换行情况flex-flow：flex-direction和flex-wrap的简写，默认row nowrapjustify-content：定义项目在主轴上的对齐方式。
align-item：定义在交叉轴上的对齐方式align-content：定义多根轴线的对齐方式详细属性值请参阅文档2，html5新标签与新功能新标签：header,footer,article,aside,nav,section,time,progress,ruby,mark....新功能：vidio，audio，canvas，拖放，离线应用，web存储（sessionStorage，localStorage，sessionStorage 方法针对一个session 进行数据存储。
当用户关闭浏览器窗口后，数据会被删除，localStorage 对象存储的数据没有时间限制。
第二天、第二周或下一年之后，数据依然可用），历史状态管理，地理位置，新增input类型（color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week），新增表单元素，WebSocket3、css3的新特性属性选择器：[attribute],[attribute=value],[attribute~=value]...伪类选择器：:first-letter ，:first-line，:first-child....伪元素选择器：:before，:afterborder：border-image，border-radius,box-shadow背景：background-size,background-origin,background-clip，background-image渐变：线性渐变（Linear Gradients）径向渐变（Radial Gradients）background: linear-gradient(direction, color-stop1, color-stop2, ...);background: radial-gradient(center, shape size, start-color, ..., last-color);字体：@font-face转换和变形：transform过度：transition动画：animation，@keyframes媒体查询：@media all and4，兼容问题：各浏览器的margin和padding，图片默认的间距，ios和安卓对fixed的解析，特殊样式的兼容（-moz-：firefox，-webkit-：Chrome，-o-：opera，-ms-：ie）渐进增强和优雅降级渐进增强观点认为应该关注于内容本身。
内容是我们建立网站的诱因，有的网站展示它，有的则收集它，有的寻求、有的操作，还有的网站甚至包含以上的种种，但相同点是他们全都涉及到内容，这使得“渐进增强”成为一种更为合理的设计范例。
这也是它立即被Yahoo!所采纳并用以构建其“分级式浏览器支持（Graded Browser Support)“策略的原因所在。
优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。
而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如IE、Mozilla等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨（poor,but passable)”的浏览体验。
你可以做一些小的调整来适应某个特定的浏览器。
但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
5、css选择器的优先级important(1000)>行内（1000）>id(100)>class(10)>标签（1）>*(0)6、清除浮动总结有两种方法方法一：使用clear属性如添加空白div或使用伪元素，添加clear：both方法二：形成BFC：如：overflow：hidden，display：inline，position：absolute,float:left7，引入css的方法link，@importat，他们的不同之处在于important用在css中并且引入的css在页面加载完之后加载，link用在html中并且引入的css 和页面同时加载，8、盒子模型包含元素内容（content），内边距（padding），边框（border），外边距（margin），分为标准盒子模型和怪异盒子模型，标准盒子模型：盒子的总宽度=margin+content。
怪异盒子模型：盒子的总宽度=margin+contant+padding+borderCSS3中新增的属性：box-sizing模拟了标准盒子模型和IE盒子模型box-sizing:content-box | bordrer-box | padding-box | inherit。
默认值：content-box:标准盒子模型(border和padding不计算入width之内)border-box:IE盒子模型(border和padding计算入width之内，其实就是怪异模式了~)padding-box:padding计算入width内ie8+浏览器支持content-box和border-box；ff则支持全部三个值,只有ff支持padding-boxIE浏览器在getComputedStyle得到width/height是按照标准模式计算的，而不论box-sizing的取值在HTML页面声明 <!DOCTYPE html>即可按照标准模型显示页面内容9，display:none和visibility:hidden两者的区别空间占据：display:none隐藏后不占据额外空间，它会产生回流和重绘，而visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。
子元素继承：display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示事件绑定：display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；visibility:hidden 元素上绑定的事件也无法触发；opacity: 0元素上面绑定的事件是可以触发的。
过渡动画：transition对于display肯定是无效的，大家应该都知道；transition对于visibility也是无效的；transition对于opacity是有效，大家也是知道的:).10，position所有属性：position: relative;相对定位：1> 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性）2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置）3> 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）4>提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。
）（两个都为定位元素，后面的会覆盖前面的定位）position: absolute;绝对定位：1> 使元素完全脱离文档流（在文档流中不再占位）2> 使内联元素在设置宽高的时候支持宽高（改变内联元素的特性）3> 使区块元素在未设置宽度时由内容撑开宽度（改变区块元素的特性）4> 相对于最近一个有定位的父元素偏移（若其父元素没有定位则逐层上找，直到document——页面文档对象）5> 相对定位一般配合绝对定位使用（将父元素设置相对定位，使其相对于父元素偏移）6> 提升层级（同相对定位）position: fixed;固定定位： fixed生成固定定位的元素，相对于浏览器窗口进行定位。
position:static：默认值：默认布局。
元素出现在正常的流中（忽略top, bottom, left, right 或者z-index 声明）。
position: sticky 粘性定位：粘性定位，该定位基于用户滚动的位置。
它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed;，它会固定在目标位置。
注意: Internet Explorer, Edge 15 及更早IE 版本不支持sticky 定位。
Safari 需要使用-webkit- prefix 。
position: inherit：规定应该从父元素继承position 属性的值。
posiyion: initial ：设置该属性为默认值，详情查看CSS initial 关键字initial 关键字用于设置CSS 属性为它的默认值。
initial 关键字可用于任何HTML 元素上的任何CSS 属性。
11、position:absolute和float属性的异同？两者的共同点：对行内元素设置float或absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
两者的不同点：float仍会占位置，position会覆盖文档流中的其他元素。
12、如何保持浮层水平垂直居中1，弹性盒.parent{justify-content:center;align-items:center;display:flex;}2，利用定位和margin.parent{height:400px;position: relative;background: red;}.children{width: 200px;height: 200px;margin: -100px 0 0 -100px;background: black;position: absolute;top: 50%;left:50%;}3，利用定位和变形.children{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);background: black;}4，display:table-cell.parent{width: 400px;height: 100px;background: black;display: table-cell;vertical-align: middle;text-align: center;}.child{backgroung: red;display: inline-block}13，样式的层级关系，选择器优先级，样式冲突，以及抽离样式模块怎么写样式的层级关系：一个是权重，另一个就是共用样式和私用样式了，比如说两个ul，它们的子元素除了背景色之外都一样，那可以直接用li {}来定义相同的公用样式，用.ul_1 li {} ，.ul_2 li {} 来定义不相同的样式。