前端小菜鸟一枚，打算往前走走。如果有不对的地方，还望大佬们帮忙订正。有不足的地方欢迎补充，三克油！！！！
------------------------------废话不多说----------------------------------------------------
布局：左右定宽，中间自适应
浮动：middle放在最后才行，因为要占用文档流，当宽度小于左右定宽的宽度的时候，右侧会被挤到下一行，同时中间给margin两侧的内容挤过来
绝对定位的方式：跟浮动类似，也需要将两侧挤过来，这时使用基本的左中右布局就行了
关于grid布局（网格布局） display: grid; 代表当前盒子内的元素采用栅格布局 grid-template-columns 属性， grid-template-rows 属性 容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。 可用具体像素赋值，也可以用百分比 grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。 .container { grid-row-gap: 20px; grid-column-gap: 20px;} grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。 .container { grid-gap: 20px 20px;}
布局总结（高度已知，两边定宽，中间自适应）
1.每种布局方案的优缺点
浮动：应为会脱离文档流，所以布局上容易出现问题，但解决了这个问题后，兼容性还是比较好的 左侧的元素浮动，右侧元素内的内容会紧贴着浮动的元素布局，当内容的高度超出左侧浮动的高度的时候，就会绕过浮动的盒子，直接贴着最左i按布局(文本内容会这样显示，但是盒子会直接跑到浮动的盒子的下面，所以要给中间的盒子设置margin值将左右内容撑过来)
定位：这种方式比较快捷，实现起来不容易处问题，但这味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。(要给最外侧的盒子设置padding的左右值，不然中间盒子的内容会被定位的盒子隐藏，不要给最外层的盒子何止width:100%，这样再设置padding的时候会将右侧的盒子给挤出去)
Flex：这种布局就是为了解决上述布局的不足而产生的，相对比较完美（缺点ie8一下不兼容） 表格：适应性比较好。但操作繁琐，对seo不够友好，当一个单元格的高度超出的时候，其它单元格也会跟着超出
Grid：使得排版更加的规整，可维护性高，实现起来比较方便 兼容西会差一些
2.如果将高度去掉，这几种方案那些就不适用了 在高度未知的时候，只有flex和table方式是可用的，由内容撑开，其它的就不行了 浮动，定位，网格，他们之间是独立的部分，并不会随着其它的改变
3.真正到业务中去用，哪个最实用
上下高度固定，中间自适应的布局
1.用绝对定位的方式，给中间的元素设置top值，bottom值来确定他的位置，预留出顶部的高度(最外层的盒子要有高度才行)
2.使用flex的方式实现 给父盒子设置flex，并且flex-direction: column;然后上下的直接定高，中间flex:1;就行了
3 使用grid布局 父盒子使用display:grid; grid-template-rows: 200px auto 200px; grid-template-column: 100%;
4.使用表格的方式 使用table布局，一定要套一个空div，要不然整个页面都是空白的
关于css的盒子模型
1.基本概念
标准盒子模型
盒子的宽度就是内容的宽度，盒子的高度就是内容的高度（不包括border，和padding值）
ie的盒子模型
盒子的宽度是内容的宽度是内容的宽度加上padding和border，盒子的高度是内容的高度加上padding和border
2.标准盒子模型和ie盒子模型的区别 宽高值所包含的内容是有区别的
3.css如何设置这两种盒子模型
box-sizing: border-box; (ie盒模型)
box-sizing: content-box;(标准盒模型)
4.js如何设置获取盒子模型的对应的宽和高
通过dom.style.width/height(z这种方式只是可以去除在行内写的样式)
通过dom.currentStyle.width/height(这种方式可以获取，但是只有ie支持)
通过window.getComputedStyle(dom).width/height的方式来获取，这种方式的兼容性更好 通过dom.getBoundingClientRect().width/height(这个aip可以拿到当前元素在视口中绝对位置（left,right），以它的宽高)
5.实例题（根绝盒子模型解释边距重叠）
计算父元素的高度是多少
高度此时为100，如果设置了overflow:hidden；触发bfc（块级格式化上下文，此时就为110了），子元素设置margin-top的时候，会发生外边距塌陷的问题
6.bfc（边距重叠解决方案）
bfc：解决边距重叠的问题 基本概念：块级格式化上下文
BFC的原理（渲染规则）：
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。（清除浮动）
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算bfc高度的时候，浮动元素也会参与计算
创建bfc的方式：
1根元素，即HTML元素
2float的值不为none
3overflow的值不为visible
4display的值为inline-block、table-cell、table-caption
5position的值为absolute或fixed
bfc的使用场景：
1可以通过bfc解决外边距重合的问题（给下面的元素添加父元素，将父元素触发bfc，此时元素的外边距就不会再发生重叠）
2布局时的应用，当左边宽度固定，右边自适应的时候，当有边元素的高度超出左边的浮动元素的时候，此时右边盒子的内容会往左侵入，此时给右边的元素触发bfc（bfc的元素不会与浮动的元素重合）
3清除浮动时用，当父元素内的子元素浮动时，此时父元素是不会被子元素撑开的，此时将父元素触发bfc，这是子元素就可以将父盒子撑开了（父元素触发bfc时，浮动的子元素参与计算高度）
关于dom事件
Dom3是在原有的基础上增加了很多的事件类型，比如键盘事件
false：冒泡阶段， true：捕获阶段
dom的事件流
浏览器是怎么与用户做交互
比如鼠标点击是怎么传到页面上的
1捕获阶段（捕获的过程）
2目标阶段（通过捕获到目标对象到达目标阶段）
3冒泡阶段（从目标元素上传到window对像 ）
描述dom事件捕获的具体流程
获取html：document.documentElement
获取body：document.body
body下就是具体的页面结构，然后直到目标元素
冒泡的过程刚好与之相反
event对象的常见应用
关于键盘值的获取：event.keyCode、event.charCode和event.which。
Event.preventDefault():阻止事件的默认行为（比如给a标签绑定事件，此时会阻止a标签的跳转，而去执行事件）
Event.stopPropagation():阻止冒泡的行为，当不需要冒泡事件的时候 Event.stopImmediatePropagation():如果给某个元素同时绑定了a,b两个事件，为了区分优先级（执行了a，不执行b了），此时我在a的事件里加上这段代码，此时b的执行就会被阻止 Event.target当前触发事件的事件对象（被点击的那个对象）
Event.currentTarget:当前绑定事件的那个对象 比如需要你给n个元素绑定事件的时候，此时你不想循环绑定，那么你可以用事件代理或者说叫做事件委托的方式来实现，通过给外层父元素绑定事件，当时间被触发的时候，判断事件源，来空值事件所需参数的取值
dom的自定义事件或者说模拟事件
通过new event的方式定义事件，然后给dom元素绑定事件，在需要执行的地方，通过dispatchEvent(),将自己定义的事件执行
customEvent在event的基础上还可以传入参数，除了定义事件名称外，还可以传入事件可用的参数
------------------------------------------------------这次先到这，改天继续------------------------------------------
