- 布局

盒子模型的宽度怎么计算（offsetWidth计算）
- offsetWidth = (内容宽度+内边距+边框) ，无外边距。
- box-sizing：border-box;
margin纵向重叠问题
- 相邻元素的margin-top 和 margin-bottom会发生重叠
- 空白内容的<p></p>也会重叠
margin负值问题
- margin-top 和 margin-left 负值，元素向上、左移动
- margin-right 和 margin-bottom 负值，自身不移动，其右边和下边的元素会向左、上移动
BFC与IFC
- 什么是BFC？
  - Block Formatting Context,块级格式化上下文，即独立渲染区域，内部元素渲染不会影响外部元素
- 触发条件：
  - float 不是 none
  - position 是 absolute 或fixed
  - overflow 不是 visible
  - display 是 flex 或 inline-block
- 常见应用：清除浮动
- 什么是IFC？
  - Inline Formatting Contexts,内联(行)格式化上下文
  - 块容器盒中只有内联级盒子,每一行盒的高度由行盒内最高的inline-box决定,当display设置为inline-block的时候会产生一个IFC.
- BFC与IFC的区别
  - 在BFC中只会包含块级元素，在IFC中只会包含行内元素。
  - BFC内部的块级元素会在垂直方向，一个接一个地放置；IFC里行内元素是一个接一个从顶部水平放置。
float布局：如何实现圣杯布局和双飞翼布局；
- 目的
  - 三栏布局，中间一栏最先加载和渲染（内容最重要）
  - 两侧内容固定，中间内容随着宽度自适应
  - 一般用于PC网页
- 技术总结
  - 使用float布局
  - 两侧使用margin负值，以便和中间内容横向重叠
  - 防止中间内容被两侧覆盖，一个用padding 一个用margin
手写clearfix

.clearfix:after {
content: '';
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* 兼容IE低版本 */
}

flex布局：实现一个三点的色子
- 熟练掌握常用
  - flex-direction ：主轴方向（横向或纵向）
  - flex-wrap ：是否换行
  - justify-content ：主轴对齐方式
  - align-self ：子元素交叉轴对齐方式
  - align-items ：交叉轴对齐方式
- 实现三点色子
```
1. 父元素设置display：flex；justify-content：space-between
2. 第二个子元素：align-self：center
3. 第三个子元素：align-self：flex-end
```

- 定位

absolute和relative分别依据什么定位
- relative 依据自身定位
- absolute 依据最近一层父元素的定位元素定位定位元素：absolute，relative，fixed 直到 body
居中对齐有哪些实现方式
- 水平居中：
  - inline 元素： text-align: center
  - block 元素： margin：auto
  - absolute元素：left: 50% + margin-left 负值 (需要知道子元素的宽)
- 垂直居中
  - inline 元素：line-height 的值等于height值
  - absolute 元素：top: 50% + margin-top 负值 (需要知道子元素的高)
  - absolute 元素：transform(-50%,-50%) (不需要知道子元素的高)
  - absolute 元素：top left bottom right = 0 + margin: auto (不需要知道子元素的高)

- 图文样式

line-height的继承问题
- 写具体数值， 30px，则继承该值
- 写比例，2/1.5,则继承该比例
- 写百分比，如200%，则继承计算出来的值（父级 font-size*line-height，计算后子级继承）

- 响应式

rem 是什么
- rem是一种长度单位
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
  - px，绝对长度单位，最常用
  - em，相对长度单位，相对于父元素，不常用
  - rem，相对长度单位，相对于根元素，常用于响应式布局
响应式布局的常见方案
- 方案
  - @media-query, 根据不同屏幕的宽度设置根元素的 font-size
  - rem，基于根元素的相对单位
- 语法
```
@media only screen and (max-width: 374px 设备大小范围) {
    html {
        font-size: 具体的值
    }
}
```
vw/vh
- rem弊端
  - 具有阶梯性，就是不太连贯吧。
- 网页视口尺寸
  - window.screen.height // 屏幕高度
  - window.innerHeight // 网页视口高度
  - document.body.clientHeight // body 高度
- vw/vh
  - vh 网页视口高度的 1 / 100
  - vw 网页视口宽度的 1 / 100
  - vmax 取两者最大值；vmin 取两者最小值

伪类和伪元素

伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

区别

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。

前端面试知识点梳理——CSS

- 布局

- 定位

- 图文样式

- 响应式

伪类和伪元素

伪类和伪元素

区别