布局：
高度已知，左边宽度300，右边300，中间宽度自适应布局
浮动、绝对定位、flex、display：table；tablecell、网格布局(gird)
瀑布流布局
Multi-columns 实现文本多列排列
<style>
.masonry {
column-count: 4; /*设置列数*/
column-gap: 20; /*设置列间距*/
}
.item {
break-inside: avoid; /*控制文本块分解成单独的列*/
}
</style>
<div class="masonry">
<div class="item">
<img src="../img/1.jpg" alt="">
</div>
<div class="item">
<img src="../img/2.jpg" alt="">
</div>
</div>
flexbox
盒模型
width height padding margin
标注模型 width = 内容width box-sizing: content-box; (默认)
IE模型 width = 内容width + padding-left + padding-right box-sizing: border-box;
js 获取盒模型对应的宽和高
dom.style.width/height 只能去内联样式 （style在节点上设置）
dom.currentStyle.width/height 浏览器渲染后的属性（只有IE浏览器支持）
window.getComputedStyle(dom).width/height 兼容所有浏览器
dom.geyBoundingClientRect().width/height/top/left
边距重叠
父子元素边距重叠：
子元素高100px 上边距10px 父元素的高度是多少？
（默认100 加上overflow:hidden 110）
原因：overflow:hidden；创建BFC（块级格式化上下文）
兄弟元素上下边距重叠：
div1 margin-bottom: 30px; div2 margin-top: 40px; 实际距离40px
空元素边距重叠 ：
一个空元素，他有外边距，但是没有边框或内边距。在这种情况下，顶外边距与底外边距就碰到了一起，它们会发生叠加。
[图片上传失败...(image-27e468-1554365403069)]
BFC https://www.jianshu.com/p/fc721c5313df
概念：块级格式化上下文
渲染原理：
1、元素垂直方向边距重叠 解决：给一个元素用父元素包裹，父元素创建一个BFC
2、BFC区域不会与浮动元素的box重叠
3、BFC在页面上是一个独立体
4、计算BFC高度的时候，浮动元素也参与计算
创建BFC
image.png
使用场景
DOM
级别：
DOM0 相关标准 js： el.onclick = function(){} html: <div onclick="doSomething"></div>
DOM1 没有涉及事件相关东西
DOM2 addEventListener(事件， function(){}, useCapture) IE浏览器中attachEvent
useCapture 指定事件是否在捕获或冒泡阶段执行,true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行
DOM3 增加事件类型 鼠标、键盘事件
事件模型
捕获：从上往下 冒泡：目标元素从下往上
事件流
1、捕获 2、目标阶段 3、冒泡
事件通过捕获到达目标元素，再从目标元素上传到对象
捕获 window -> document -> html标签
取<html> 节点 documentElement
取body 节点document.body
Event 对象
网友评论