1. 块状布局，行内布局都有哪些元素
块元素：
块级元素会独占一行
高度，行高，外边距和内边距都可以单独设置
宽度默认是容器的100%
可以容纳内联元素和其他的块级元素
常见元素 div h1-h5 form p table
行内元素
和相邻的行内元素在一行上
高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效
默认的宽度就是它本身的宽度
行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）
常见元素 span a img label
内联元素
就是同时具备内联元素、块状元素的特点 可以设置宽高
常见元素 button input
2. 常见的页面布局方式
两栏布局（边栏定宽主栏自适应）
三栏布局（两侧栏定宽主栏自适应）
多列等高布局
三行布局（头尾定高主栏自适应）
https://juejin.cn/post/6844903574929932301
两栏布局：
总结布局的思路：
float + margin
flex布局
grid布局
table布局
绝对定位
3. BFC 概念： block formatting context块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与（在下面有解释）， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干
触发条件：
【1】根元素
【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position的值为absolute或fixed
BFC的展示规则：
【1】bfc的盒子会在竖直方向一个一个的放置
【2】bfc的盒子之间的margin会发生重叠
【3】bfc盒子的高度计算会包含浮动元素
【4】bfc盒子是个独立的元素，不会受到浮动元素的影响
BFC的应用：
【1】两栏布局
【2】清除浮动
【3】防止被浮动元素覆盖
4. flex的常用语法
flex: 1的含义
flex-shrink: 1
flex-grow: 1
flex-basis: 1
-
flex-direction：决定主轴的方向（即项目的排列方向）
- row（默认值）：主轴为水平方向，起点在左端
- row-reverse：主轴为水平方向，起点在右端
- column：主轴为垂直方向，起点在上沿
- column-reverse：主轴为垂直方向，起点在下沿
-
justify-content：定义了项目在主轴上的对齐方式
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
-
align-items：定义项目在交叉轴上如何对齐
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐
- baseline: 项目的第一行文字的基线对齐
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
-
flex-wrap：定义，如果一条轴线排不下，如何换行
- nowrap（默认）：不换行
- wrap：换行，第一行在上方
- wrap-reverse：换行，第一行在下方
-
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
- 该属性可能取6个值，除了auto，其他都与align-items属性完全一致
5. 响应式布局的方案
-
媒体查询
-
百分比%
-
vw/vh
-
rem
- media-query，根据不同屏幕宽度设置根元素font-size
- js根据设计稿和屏幕宽度设置根元素font-size
-
利用UI框架实现响应式布局（比如；elementUi的）
6. 盒模型
就是用来装页面上的元素的矩形区域。CSS盒子模型组成：外边距（margin）、边框（border）、内边距（padding）、内容（content）。CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。W3C模型中：CSS中的宽（width）=内容（content）的宽，CSS中的高（height）=内容（content）的高。IE模型中：CSS中的宽（width）= 内容（content）的宽 +（border + padding）* 2，CSS中的高（height）= 内容（content）的高 +（border + padding）* 2。
-
1代 正常流（放置盒的格式化上下文）
-
行为：依次排列，排不下了换行。
- 当遇到块级盒：排入块级格式化上下文，没有块格式化上下文，则创建一个
- 当遇到行内级盒或者文字：首先尝试排入行内级格式化上下文，如果排不下，那么创建一个行盒，先将行盒排版（行盒是块级，由一行中所有的内联元素所组成，所以到第一种情况），行盒会创建一个行内级格式化上下文。
- 遇到float：把盒的顶部跟当前行内级上下文上边缘对齐，然后根据float的方向把盒的对应边缘对到块级格式化上下文的边缘，之后重排当前行盒。
-
原理：块级格式化上下文（Block Formatting Contexts）和行内级格式化上下文（Inline Formatting Contexts）
-
BFC：块级排布，一个独立的布局环境，其中的元素布局是不受外界的影响
-
BFC布局规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
-
设置方法
- 根元素（），这里就可以理解正常流的逻辑
- float的值不是none
- position 是 absolute 或者 fixed
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow 不是 visible
-
应用
- 避免外边距折叠
- 清除浮动
- 自适应两栏布局
-
-
IFC：行内排布，盒子在水平方向的 内外边距+边框 所占用的空间都会被考虑
-
-
-
2代 flex（弹性布局）
- FFC(自适应格式上下文)
-
3代 grid
- GFC(网格布局格式化上下文)
-
3.5代 CSS Houdini
7.inline-height的继承问题
- 写具体数值，如30px， 则继承该值
- 写比例，如2/1.5,则继承该比例
- 写百分比，如200%，则继承计算出来的值
8. 12px字体大小的问题
/* Chrome支持小于12px 的文字 */
.shrink {
-webkit-transform: scale(0.8);
-o-transform: scale(1);
display: inilne-block;
}
9.margin负值问题
- margin-left和margin-top负值，元素向左和向上移动
- margin-right负值，右侧元素左移，自身不受影响
- margin-bottom负值，下方元素上移，自身不受影响
10 优雅降级和渐进增强
- 渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
- 优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
