css篇
请说出布局定位的区别
- Static:默认的定位方式,根据文件瀑布流排版。
- Absolute：：Absolute定位的元素相对于其最近的已定位的祖先元素进行定位。如果祖先元素没有进行定位，则相对于初始包含块body进行定位，absolute脱离文档流，不占据原来得空间，不会影响别的元素布局。
- relative：relative定位相对于元素在文档流中得原始位置进行定位，没有脱离文档流。
- fixed：相对于窗口定位，脱离文档流，fixed不会随窗口得滚动而滚动
- sticky：粘性布局，在 position:relative 与 position:fixed 定位之间切换。它的行为就像position:relative；而当页面滚动超出目标区域时，它的表现就像 position:fixed，他会固定在目标位置。（父元素不得为overflow:auto或者hidden属性，必须指定top、bottom、left、right4个值，父元素的高度不得低于sticky元素高度，sticky元素仅在父元素中生效）
- float：float定位主要用作浮动，脱离文档流。用于设置元素沿其容器的左侧或右侧浮动，允许文本和内联元素使用，会引起高度塌陷。
flex定位布局
响应式布局又叫弹性布局；主要有六大属性：
- flex-direction：内部元素的排列方式：从左到右、从右到左、从上到下、从下到上
- flex-wrap：子元素的换行方式：不换行、换行(第一行在上面、第二行在上面)
- flex-flow：子元素的排列方式和换行方式的简写
- justify-content：子元素的水平对齐方式
- align-items：子元素的垂直对齐方式
- align-content：设置多个元素组成的整块的对齐方式
- 特别说明：（flex：1 代表 扩展比例：flex-grow、收缩比例：flex-shrink、初始大小：flex-basis）
标准盒子和非标准盒子
- 标准盒子：box-sizing:content-box（默认模式），其计算高度为内容区宽高
- 非标准盒子：box-sizing:border-box，其计算高度为边框+内边距+内容区域
BFC的产生和避免
1.什么是bfc
BFC是属于普通流的，我们可以把BFC看成页面的一块渲染区，他有自己的渲染规则，简单来说就是BFC可以看做元素的属性，当元素有了BFC这个属性，这个元素可以看做隔离了的容器，容器里面的元素不会在布局上影响到外面的元素。
2.bfc产生的原因
根元素(<html>)
设置float浮动，不包含none
绝对定位元素 (元素的 position 为 absolute 或 fixed)
display 为 inline-block、table-cell、table-caption、table、table-row、table-row-groutable-header-group、table-footer-group、inline-table、flow-root、flex 或 inline-flex、grid 或 inline-grid
设置overflow，不为visible
contain 值为 layout、content 或 paint 的元素`
多列容器（column-count 或 column-width (en-US) 值不为 auto，包括column-count 为 1）
