css-interview

如何解决a标点击后hover事件失效的问题?

• 调换a标签css的顺序
• 把顺序改成 link -> visited -> hover -> active
• link：未访问时的样式
• visited：访问后的样式
• hover：鼠标移入时的样式
• active：鼠标点击后的样式

实现水平垂直居中的几种方式

• Flex布局（子元素是块级元素）

    .box {
        display: flex;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
  
    .box-center{
        margin: auto;
        background-color: greenyellow;
    }

• Flex布局

    .box {
        display: flex;
        width: 100px;
        height: 100px;
        background-color: pink;
        justify-content: center;
        align-items: center;
    }
  
    .box-center{
        background-color: greenyellow;
    }
  

+ 绝对定位实现(定位元素定宽定高)
```css
    .box {
        position: relative;
        height: 100px;
        width: 100px;
        background-color: pink;
    }
.box-center{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background-color: greenyellow;
}

实现一个一直旋转的动画

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: spin 2s linear infinite;
  }
  @keyframes spin {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
  }
</style>

<div class="box"></div>

animation介绍一下

    animation: name duration timing-function delay iteration-count direction;

|值|描述|
|name|绑定到选择器的 keyframe 名称|
|duration|完成动画所花费的时间，以秒或毫秒计。|
|timing-function|动画的速度曲线。(ease|linear|ease-in|cubic-bezier(n,n,n,n))|
|delay|在动画开始之前的延迟。(2s)|
|iteration-count|动画应该播放的次数。(n | infinite) n次/无限|
|direction|是否应该轮流反向播放动画。(normal | alternate) 正常/反向|

CSS选择器以及这些选择器的优先级

• !important
• 内联样式（1000）
• ID选择器（0100）
• 类选择器/属性选择器/伪类选择器（0010）
• 元素选择器/关系选择器/伪元素选择器（0001）
• 通配符选择器（0000）

什么是BFC

盒模型

w3c盒模型

• box-sizing: content-box。元素的宽高大小为内容的大小。

IE盒模型

• box-sizing: border-box。元素的宽高大小为内容+内边距+边框大小。

如何实现左侧宽度固定，右侧宽度自适应的布局

• dom结构

  <div class="box">
  <div class="box-left"></div>
  <div class="box-right"></div>
  </div>

• 利用float + margin实现

  .box {
  height: 200px;
  }
  

.box > div {
height: 100%;
}

.box-left {
width: 200px;
float: left;
background-color: blue;
}

.box-right {
margin-left: 200px;
background-color: red;
}

+ 利用calc计算宽度
```css
.box {
 height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}

.box-right {
  width: calc(100% - 200px);
  float: right;
  background-color: red;
}

• 利用float + overflow实现

  .box {
  height: 200px;
  }
  

.box > div {
height: 100%;
}

.box-left {
width: 200px;
float: left;
background-color: blue;
}

.box-right {
overflow: hidden;
background-color: red;
}

+ 利用flex实现
```css
.box {
  height: 200px;
  display: flex;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  background-color: blue;
}

.box-right {
  flex: 1; // 设置flex-grow属性为1，默认为0
  overflow: hidden;
  background-color: red;
}

盒模型

标准盒模型

• width = content
• width不包括border和padding
• css设置：box-sizing:content-box

IE盒模型

• width = content + padding + border
• css设置：box-sizing:border-box