css 事件

布局：

高度已知，左边宽度300，右边300，中间宽度自适应布局

浮动、绝对定位、flex、display：table；tablecell、网格布局(gird)

瀑布流布局

Multi-columns 实现文本多列排列

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:

DOM1 没有涉及事件相关东西

DOM2 addEventListener(事件， function(){}, useCapture) IE浏览器中attachEvent

useCapture 指定事件是否在捕获或冒泡阶段执行,true - 事件句柄在捕获阶段执行

false- false- 默认。事件句柄在冒泡阶段执行

DOM3 增加事件类型 鼠标、键盘事件

事件模型

捕获：从上往下 冒泡：目标元素从下往上

事件流

1、捕获 2、目标阶段 3、冒泡

事件通过捕获到达目标元素，再从目标元素上传到对象

捕获 window -> document -> html标签

取 节点 documentElement

取body 节点document.body

Event 对象