css画一条高0.5px的直线

<!-- 使用transform: scaleY -->
/* 使用scaleY(0.5)：因为在不同分辨率中，宽高直接使用0.5px，表现不一样 */
/* https://stackblitz.com/edit/web-platform-1fjkbt?file=index.html */
.line1 {
  position: relative;
  background: black;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

清除浮动有哪些方式

1. 容器也添加浮动属性，缺点是影响布局
2. 在浮动元素后添加一个空div元素，并设置clear属性为both
3. 设置浮动元素后面的一个元素的clear属性为both
4. 设置容器的overflow属性为hidden或者auto

盒子模型使用border-box有什么影响

标准盒子模型：真正width = width+padding+border IE盒子模型： 真正width = width+margin 标准盒子模型使用border-box之后，border也包含于width里面了

flex布局和我们平时用的table布局有什么区别

1. flex布局可以指定元素布局方向
2. flex布局更语义化，代码更简洁
3. flex布局可以使用flex-grow和flex-shrink扩展或者收缩元素的宽度
4. flex布局比table布局性能差些
5. flex布局更适用于需要自适应的场景，不限制于元素个数

什么是三栏布局

左右固定，中间自适应的布局 如何实现？

1. 利用float+margin实现, 内容不能优先加载 https://stackblitz.com/edit/web-platform-5jksvi?file=index.html
2. 利用position+margin实现, 内容不能优先加载 https://stackblitz.com/edit/web-platform-c9w5sq?file=index.html
3. 双飞翼布局, 内容可以优先加载 https://stackblitz.com/edit/web-platform-myam4a?file=index.html
4. flex布局, 内容可以优先加载 https://stackblitz.com/edit/web-platform-8l5uot?file=index.html

居中布局

水平居中

1. 内联元素

.inlineBox {
    text-aglin: center;
}

2. 块级元素

<!-- 单个块级元素 -->
.blockBox {
    margin: 0 auto;
}
<!-- 多个块级元素 -->
.parentBox {
    text-aglin: center;
}
.blockBox {
    display: inline-block;
}

3. flex布局

.flexBox {
    display: flex;
    justify-conetnt: center;
}

垂直居中

1. table布局

<!-- 1. table元素 -->
.tableBox {
    veitical-aglin: middle;
}
<!-- 2. 非table元素 -->
.box {
    display: table-cell;
    vertical-aglin: middle;
}

2. 固定盒子高度

.parentBox {
    position: relative;
}
.box {
    width: 100px;
    height:100px;
    top: 50%;
    margin-top: -50px;
}

3. 未知盒子高度，利用transform

.parentBox {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

4. flex布局

.flexBox {
    display: flex;
    align-items: center;
}

5. 单行内联元素：行高和高度设置成相同的值

.inlineBox {
    height: 100px;
    line-height: 100px;
}

水平垂直居中

在线预览：https://stackblitz.com/edit/web-platform-ncwwp5?file=index.html,styles.css

1. flex布局

.flexBox {
    display: flex;
    justify-conetnt: center;
    align-items: center;
}

2. table布局

.tableBox {
    display: table-cell;
    text-aglin: center;
    vertical-aglin: middle;
}

3. 绝对定位

.parentBox {
   position: relative;
}
.box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

4. transform

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%， -50%)；
}

css使用动画有哪些api

flex 0 1 auto具体是什么意思

BFC

怎么解决边距重叠

移动端怎么解决样式适配（rem em vm vh 媒体查询）

sass 跟less