块格式化上下文(BFC)

元素包含下面的css属性就会变成bfc元素

• 浮动元素
• 绝对定位元素(position为absolute或fixed)
• 行内块元素(display: inline-block)
• 表格单元格(display: table-cell)
• 表格标题(display: table-caption)
• overflow值不为visible的块元素
• display值为flow-root的元素
• contain 值为layout、content、strict的元素
• 弹性元素(display为flex 或 inline-flex元素的直接子元素)
• 网格元素(display为grid或inline-grid元素的直接子元素)
• 多列容器
• column-span为all的元素始终会创建一个BFC

BFC元素会有下面这些特性

1. BFC元素和float元素不会叠加在一起
2. BFC元素的子元素如果是float元素，那么BFC元素会包住float元素
   • 用于处理float子元素的内容能够撑开父元素
3. 同一个BFC元素里面的相邻元素不会发生外边距叠加

关于link和@import的区别

1. @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2. 加载顺序区别
   加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3. 兼容性区别
   @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4. DOM可控性区别
   可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
5. 权重区别(该项有争议，下文将详解)
   link引入的样式权重大于@import引入的样式。

css bem规范

Bem 是块(block)、元素(element)、修饰符(modifier)的简写, 是一种css命名规范.
规范如下:

• block__element: 双下划线用来连接block与block的子元素
• block–modifier: 双连接符用来修饰元素的状态或者版本
• block-block: 单连接符用来连接两个block

其实也就是写scss更加规范

.article {
    max-width: 1200px;
    &__body {
        padding: 20px;
    }
	  &--error {
    	color: red;
      &__button {
        background: #e2e2e2;
      }
  	}
    &__button {
        padding: 5px 8px;
        &--primary {background: blue;}
        &--success {background: green;}
    }
}

盒模型

在IE浏览器和其他浏览器里盒模型的定义是不一样的
IE浏览器中盒模型的宽高是内容和padding和border区域一起算的。也就是说 box-sizing: border-box
默认其他浏览器中宽高是内容区域宽高. box-sizing: content-box

盒模型的宽高计算

dom.style.height/width => 只有内联样式设置后生效
dom.currentStyle.width/height => ie的盒模型生效
dom.getBoundingClientRect().width/height => ie or 其他浏览器
window.getComputedStyle(dom).width/height => 计算生效后的盒模型的宽高

各种元素

• 行内元素： span, img, input, button, select, textarea

• 块级元素： div, ul, li, dl, dt, h1-h6, blockquote

• 空元素（即没有内容的元素）input img br hr link meta

关于offsetX, clientHeight等属性

不太好用文字表述，直接上图简单明了