css面试题

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

DOM结构

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

方法1：float + margin 实现

.box{
  height: 200px;
}
.box div{
  height: 100%;
}
.box-left{
  float: left;
  width: 200px;
  background-color: gold;
}
.box-right{
  margin-left: 200px;
  background: red;
}

方法2：利用 calc 计算宽度

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

方法3：利用 float + overflow 实现

.box{
  height: 200px;
}
.box div{
  height: 100%;
}
.box-left{
  float: left;
  width: 200px;
  background-color: gold;
}
.box-right{
  overflow: hidden;
  background: red;
}

方法4：利用 flex 实现

.box{
  height: 200px;
  display: flex;
}
.box div{
  height: 100%;
}
.box-left{
  width: 200px;
  background-color: gold;
}
.box-right{
  flex: 1;
  background: red;
}

2、水平居中

• 若是行内元素，给其父元素设置text-align: center 即可实现行内元素水平居中
• 若是块级元素，该元素设置 margin: 0 auto 即可（元素需要定宽）
• 若是块级元素，设置父元素为 flex 布局，子元素设置 margin: 0 auto 即可（子元素不需要定宽）
• 使用flex，父元素 display: flex justify-content: center
• 使用绝对定位和 transform属性，position: absolute left: 50% width:50% height: 100% transform: translate(-50%, 0)

3、垂直居中

• 若元素是单行文本，则可以设置 line-height 等于父元素高度
• 若是块级元素，设置父元素为flex布局，子元素设置 margin: auto 0 即可（子元素不需要定宽）
• 若元素是行内块级元素，基本思想是使用 display: inline-block，vertical-align: middle 和一个伪元素让内容块处于容器中央：

.box{
  height: 100px;
}
.box::after, .child{
  display: inline-block;
  vertical-align: middle;
}
.box::after{
  content: '';
  height: 100%;
}

4、水平垂直居中

• flex布局

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

• 绝对定位实现（定位元素定宽定高）

.box{
  height: 100px;
  width: 100px;
  border: 1px solid #000;
  position: relative;
}
.child{
  width: 20px;
  height: 20px;
  position: absolute;
  background: yellow;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

5、伪类和伪元素的区别

伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释：

伪类用于当已有元素处于每个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过 :hover 来描述这个元素的状态。虽然它和普通的 css 类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过 :before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

区别：

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

CSS3规范中的要求使用双冒号（::）表示伪元素，以此来区分伪元素和伪类，比如 ::before 和 ::after 等伪元素使用双冒号， :hover 和 :active 等伪类使用单冒号。