css世界（面试题）

1，介绍下 BFC 及其应用

概念：BFC就是块级格式上下文，是页面盒模型（ie和w3c标准）布局中的一种css渲染方式，是一个独立的容器，这个独立容器里面的元素和外面的元素互不干扰，不会影响外面的元素。
创建BFC：

1. html的根元素
2. floa浮动
3. 绝对定位
4. overflow不为visiable
5. display为表格布局或弹性布局时

BFC应用：
1，清除浮动
2，防止同一BFC容器中相邻的元素间的外边框重叠的问题

了解BFC其原理

2,怎么让一个 div 水平垂直居中

1，

2，

3，

4,

3,分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

结构：
opacity:0 不会让元素从渲染树上消失，渲染时元素会占据空间，只是内容看不见，还是可以点击的
visibility:hidden 不会让元素从渲染树上消失，渲染时元素会占据空间，内容不可见，不可以点击
display:none 会让元素从渲染树上消失，渲染时元素不会占据空间，内容不可见，不可以点击

继承：
opacity:0和display:none 没有继承属性，子孙节点消失是元素从渲染树上消失造成的，通过修改子孙节点属性无法让其显示
visibility:hidden 继承性 子孙节点消失是因为继承了hidden，通过修改visibility:visible可以让子孙展示

性能
opacity:0 修改元素会造成重绘，性能消耗较少
visibility:hidden 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大

4,已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。

<img src=“1.jpg” style="width:480px!important;”>

1，
img{
max-width: 300px;
}
2，
img{
transform:scale(0.625);
}
3,
img{
box-sizing:border-box;
padding:90px;
}

5,如何解决移动端 Retina 屏 1px 像素问题

.min-device-pixel-ratio(@scale2, @scale3) {
  @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
    transform: @scale2;
  }
  @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
    transform: @scale3;
  }
}

.border-1px(@color: #DDD, @radius: 2PX, @style: solid) {
  &::before {
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    border: 1PX @style @color;
    border-radius: @radius;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
      width: 200%;
      height: 200%;
      border-radius: @radius * 2;
      transform: scale(.5);
    }
    @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
      width: 300%;
      height: 300%;
      border-radius: @radius * 3;
      transform: scale(.33);
    }
  }
}

.border-top-1px(@color: #DDD, @style: solid) {
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-top: 1Px @style @color;
    transform-origin: 0 0;
    .min-device-pixel-ratio(scaleY(.5), scaleY(.33));
  }
}