CSS常见面试题

CSS实现宽度100%，高度为宽度一半的的盒子

• 通过vw视口单位实现
  所谓视口单位是相对于视口（viewport）的尺寸而言，100vw等于视口宽度的100%，即1vw等于视口宽度的1%。
  这个方法有个优点就是，无论图片是否加载成功，容器高度始终是计算完成的，不会造成页面的抖动，也不会造成页面重绘，从而提升性能。

 .box {
    width: 100%;
    height: 50vw;
  }
  .box img {
    width:100%;
  }

• 通过padding实现
  通过设置子元素padding属性来实现，是比较常用，也是效果比较好的一种，需要注意的是：子元素的padding属性的百分比的值是对父容器的宽度而言。

.box {
  width:100%;
}
.children {
  height:0;   /*为了避免高度比实际高的问题*/
  padding-bottom:50%;
}

实现一个三角形

• 方案一：使用border来实现三角形：

    width: 0px;
    border-top: 50px solid yellowgreen;
    border-bottom: 50px solid deeppink;
    border-left: 50px solid bisque;
    border-right: 50px solid chocolate;

实现三角形可以让其他border的颜色为transparent即可。

    width: 0px;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid transparent;
    border-right: 50px solid chocolate;

• 方案二：使用linear-gradient来实现：

    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);

    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);

未完结。。。。