问题汇总

1、calc,support,media各自的含义及用法

@support

CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，**你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。**但是这里有一点需要注意的是：@support对于浏览器的版本也是有要求的，不是说所有的浏览器以及其所有的版本都是支持@support的。
1.逻辑操作符：“not” 的用法

@supports not (display: flex) {  div {    float: right;  }}

•  

注释：如果浏览器不支持display:flex属性的话，那么div的样式就是display:right
2.逻辑操作符：“and”的用法

@supports (display: flex) and ( box-shadow: 2px 2px 2px black ) {
	/*自己的样式*/
}

注释：如果浏览器支持display:flex和box-shadow的属性，就执行里面自己的样式
3.逻辑操作符：“or” 的用法

@supports (display: -webkit-flex) or (display: -moz-flex) or(display: flex) {
      /*自己的样式 */
}

注释：如果浏览器支持其中一个就可以执行里面自己的样式
4.混用的例子
“or”和“and”混用，在@supports中“or”和“and”混用时，必须使用括号（）来区分其优先级

@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) { 
	/*自己的样式 */
}
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) {
        /*自己的样式 */
}

“or”、“and” 和 “not” 混用

@supports (display: grid) and (not (transition-property: color) or (animation-name: foo)){
/*自己的样式 */
}

calc

calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算；

#accessory {
    border: 8px solid #B8C172;
    float: right;
    padding: 10px;
    width: 208px; /* Fallback for browsers that don't support the calc() function */
    width: -moz-calc(25% - 10px );
    width: -webkit-calc(25% - 10px );
    width: calc(25% - 10px );
}

media

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

2、css水平垂直居中的几种方法

一、水平居中

（1）块元素

      margin:auto;

（2）行内元素

    text-align:center;

二、垂直居中

（1）块元素

      vertical-align:middle

（2）行内元素

    line-height=height

三、水平垂直都居中

方案1：

3、行内元素和块内元素

行内元素：

①：设置宽高无效

②：对margin设置左右方向有效，而上下无效，padding设置都无效

③：不会自动换行

eg：<span>、<a>、<b>、<strong>

块内元素：

①：可以设置宽高

②：设置margin和padding都有效

③：可以自动换行

④：多个块状，默认排列从上到下

eg：<address>、<center>、<h1>~<h6>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>

行内块元素常见的有：

①：不自动换行

②：可以设置宽高

③：默认排列方式为从左到右

img  input  td  

方案一：

        .parentCss {
            position: relative;
            width: 200px;
            height: 200px;
            background: red;
        }

        .childCss {
            position: absolute;
            width: 100px;
            height: 100px;
            background: #ccc;
            left: 50px;
            top: 50px;
        }

方案二：

        .parentCss {
            /* position: relative; */
            width: 200px;
            height: 200px;
            background: red;
            display: flex;
            justify-content: center;
            align-items: center;
        }

方案三：

        .parentCss {
            width: 200px;
            height: 200px;
            background: red;
            display: flex;
            justify-content: center;
            /* align-items: center; */
        }

        .childCss {
            align-self: center;
            width: 100px;
            height: 100px;
            background: #ccc; 
        }

方案四：

 

3、em、rem、vh/vw、 px各自代表的含义

4、画0.5px的直线

5、盒模型（标准/IE两种）

6、BFC清楚浮动的几种方式及原理：https://segmentfault.com/a/1190000013647777

BFC（block formatting context）块级格式化上下文：是一个独立的渲染区域，让BFC内部和外部元素相互隔离，内外元素定位不会相互影响

块级格式化上下文是CSS可视化渲染的一部分。它是一块区域，规定了内部块盒的渲染方式，以及浮动相互之间的影响关系。

触发条件：

• 根元素
• position：absolute/fixed
• display：inline-block/table
• float元素
• overflow !==visible

规则：

• BFC内，相邻BOX垂直排序
• BFC内，相邻BOXmargin会重叠
• BFC区域和float区域不会重叠
• BFC高度=浮动子元素高度和
• 文字层不会被浮动层覆盖

7、vue生命周期

8、v-if和v-show的区别

9、什么是事件冒泡和事件捕获，区别

10、什么是跨域，如何处理跨域：http://blog.sina.com.cn/s/blog_603fcfae0102xl55.html

• 通过jsonp跨域
• document.domain + iframe跨域
• location.hash + iframe
• window.name + iframe跨域
• postMessage跨域
• 跨域资源共享（CORS）
• nginx代理跨域
• nodejs中间件代理跨域
• WebSocket协议跨域