5.说说BFC
BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
BFC应用
防止margin重叠
清除内部浮动
自适应两（多）栏布局
防止字体环绕
触发BFC条件
根元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute、fixed
BFC的特性
内部的Box会在垂直方向上一个接一个的放置。
垂直方向上的距离由margin决定
bfc的区域不会与float的元素区域重叠。
计算bfc的高度时，浮动元素也参与计算
bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
6.说说定位相关的属性
position 属性的五个值：
| **值** | **描述** |
| -------- | ------------------------------------------------------------ |
| static | 默认。位置设置为 static 的元素， 它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。HTML 元素的默认值，即没有定位，遵循正常的文档流对象。从上到下,从左到右 静态定位的元素不会受到 top, bottom, left, right影响。 |
| absolute | 位置设置为 absolute 的元素，可定位于相对于第一个已定位（非静态的）的包含它的元素的指定坐标。 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html> 此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。 会将原来的块元素变成行内块元素 |
| fixed | 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动 此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。 不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。 会将原来的块元素变成行内块元素 |
| relative | 位置被设置为 relative 的元素，可将其定位于相对于其正常位置的地方， 因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。 相对定位元素的定位是相对其自身正常位置。 移动相对定位元素，但它原本所占的空间不会改变。 |
| sticky | sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。 position: sticky; 基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 |
| inherit | position 属性的值从父元素继承。 |
7.谈谈flex布局
采用 Flex 布局的元素，称为 Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex项目（flex item），简称“项目”。
1.父元素属性
| **属性名** | **属性值** | **备注**
| display | flex | 定义了一个flex容器，它的直接子元素会接受这个flex环境 |
| flex-direction | row, row-reverse, column, column-reverse | 决定主轴的方向
| flex-wrap | nowrap, wrap, wrap-reverse | 如果一条轴线排不下，如何换行
| flex-flow | [flex-direction] , [flex-wrap] | 是 flex-direction属性和 flex-wrap属性的简写形式， 默认值为 row nowrap |
| justify-content | flex-start, flex-end, center, space-between, space-around | 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式 |
| align-items | flex-start, flex-end, center, baseline, stretch | 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式 | |
2.子元素属性 | |
| 属性名 | 属性值 | 备注
| order | [int] | 默认情况下flex order会按照书写顺训呈现， 可以通过order属性改变， 数值小的在前面，还可以是负数。 |
| flex-grow | [number] | 设置或检索弹性盒的扩展比率, 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间 |
| flex-shrink | [number] | 设置或检索弹性盒的收缩比率, 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间 |
| flex-basis | [length], auto | 设置或检索弹性盒伸缩基准值
| align-self | auto,flex-start,flex-end,center,baseline,stretch | 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式， 可以覆盖父容器align-items的设置 |
670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
