css面试题

css3

1. 盒子水平垂直居中的方法有那些？

(1) display: flex;

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

（2）定位

（3）display: table-cell是针对文本的，所以子盒子要加上display: inline-block;

.box {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

2. css 盒模型（通过 box-sizing属性改变元素的盒模型）

（1）标准盒模型：标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。

 标准盒模型下盒子的大小 = content + border + padding + margin

（2）IE盒模型（怪异盒模型）：怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度

  怪异盒模型下盒子的大小=width（content + border + padding） + margin

3.移动端响应式布局

（1）media

（2）rem

（3）flex

（4）vh/vw

4.CSS3实现0.5px的边框

(1) border + border-image + 线性渐变linear-gradient

  .border {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        border-bottom: 1px solid transparent;
        border-image: linear-gradient(to bottom,transparent 50%, red 50%) 0 0 100%/1px 0;
    }

(2) 定位 + 伪元素 + background + 线性渐变linear-gradient

   .border {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        position: relative;
    }
    .border::before {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-image: linear-gradient(to bottom, transparent 50%, red 50%);
    }

（3）定位 + 伪元素 + transfrom缩放（scale）

  .border {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        position: relative;
    }
    .border::after {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: red;
        transform: scaleY(0.5);
    }

5. ::before 和 :after 中双冒号和单冒号的区别？这2个伪元素的作用？

（1）在 CSS3 中 : 表示伪类， :: 表示伪元素

（2）想让插入的内容出现在其他内容前，使用::befroe。否则，使用::after