CSS基础面试题（二）

块级元素，行内元素，行内块元素的区别

块级元素：自动占据一行，可以设置宽高

常见的有 div，p，h1-h6，ul，li，form，table

行内元素：占据一行的一小部分，多个行内元素水平排版，无法设置宽高

常见的有 span ，img，a

行内块级元素：跟行内元素类似，不过可以设置宽高

常见的有 button ，img ， input, select, label，textarea

伪元素和伪类的区别

伪元素：对选择元素的指定部分进行修改样式，常见的有 :before，:after，:first-line，first-letter 等等

伪类：对选择元素的特殊状态进行修改样式，常见的有 :hover，:active，:checked，:focus，:first-child 等等

如何解决 margin 重叠问题

margin 重叠发生在相邻的两个块级元素，当设置 margin 的时候，会以重叠到一起，例如下面代码

<div>
  <div className="div"></div>
  <div className="div"></div>
</div>

.div {
  margin: 20px 0;
  background-color: #83bbff;
}

下面的运行结果可以看出，两个 div 的间隔是 20px 而不是 40px

解决办法就是在不想要合并的元素创建一个 BFC，在第一个元素新建一个空元素，配置 overflow: hidden

<div>
  <div className="parent">
    <div className="div"></div>
  </div>
  <div className="div"></div>
</div>

.parent {
  overflow: hidden;
}
.div {
  margin: 20px 0;
  background-color: #83bbff;
}

CSS 实现一个 0.5px 的横线

1. 使用垂直渐变，上部分透明，下部分配置想要的颜色

background-image: linear-gradient(0deg, #f00 50%, transparent 50%);

2. 使用 transform: scale(0.5);

.half-pixel {
  position: relative;
}
.half-pixel:after {
  content: '';
  position: absolute;
  left: -50%;
  border: 0;
  width: 200%;
  height: 1px;
  background: red;
  transform: scale(0.5);
}