Css面试

写在前面:这是我个人收集到的一些比较新,比较有技术点的一些Css3方向的面试题,经典和新颖的都有,用于自我学习和复习,既是在学习新知识的笔记,也是可以以后用来扩展技术栈的基础知识.

Grid布局

• 父容器声明:

  display: grid; //启用grid布局
  grid-template-columns: 100px 100px; //表示两列,每列宽100px
  grid-template-rows: 33.33% 33.33% 33.33%; //表示三行,每行高33.3%
  grid-row-gap: 10px; //表示行间距      
  grid-column-gap: 10px; //表示列间距
  
    //repeat(3,33.3%)    //用于重复值
    //1fr 2fr 3fr         //表示按比例分割父容器宽
    //minmax(100px,1fr)   //表示不小于100px,不大于1fr    
    //auto-fill           //子元素确定,父容器不固定,自动填满
  
    grid-auto-flow:colunm; //表示行,或列优先排列(子元素往右走还是往下走)
  
    //justify-items, align-items, place-items: start end;
    //justify-content, align-content, place-content
    //类似flex垂直水平居中属性
    

• 子元素声明

    //设置
    .item-1 {
        grid-row: 1 / 2; //y轴的位置,从第一条线开始,到第二条线
        grid-row: 1 / span 2; //y轴的位置,从第一条线开始,延申两条线,到第三条线.
        grid-column: 1 / 3; //x轴的位置,从第一条线开始,到第三条线
        grid-column: 1 /span 3; //x轴的位置,从第一条线开始,延申三条线,到第四条线.
        grid-area: 1/1/2/3; //简写属性
        
        //一行五列有六条分割线,一列三行有四条分割线,
        
        //gird-area:表示grid布局里面的方格
        //grid-line:表示grid布局里面的分割线
        
      
    }
    /* 等同于 */
    .item-1 {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 1;
      grid-row-end: 2;
    }

• 二维布局方式

//父元素
.box{
    display:grid;
    grid-template-areas:
    "header header header header header",
    "nav main main main main",
    "nav main main main main",
    "nav main main main main",
    ". footer footer footer .",
}
//子元素
.cell-1{
    grid-area:header;
}
.cell-2{
    grid-area:nav;
}
.cell-3{
    grid-area:main;
}
.cell-4{ 
    grid-area:footer
}

垂直水平居中方案

1. Flex布局

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

2. Grid布局

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

3. Position定位

    .box{
        display:relative;
    }
    .item{
        position: absolute;
        top:50%,
        left:50%,
        margin: auto;
        transform: translate(-50%, -50%);
        
    }

实现一个自适应的正方形

1.padding实现

.box{
    width:50%;
    height:0;
    padding:50%;
}

2.用vw或vh单位实现(兼容性)

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

3.给伪元素加margin

.box{
    width:50%;
    overflow:hidden
}
.box::berfor{
    margin-top:100%
}

Css的骨架屏

Css的filter(滤镜)

什么是BFC

BFC(块级格式化上下文)

• 如何创建:

1. float不为none,position不为static或relative,
2. display为inline-block,
3. flex,inline-flex,
4. overflow不为visible

• 特点:

1. 独立的渲染区域,与外界无关,限定了float的边界
2. 属于同一个BFC的两个相邻Box的垂直margin会发生重叠()

• 作用:

1. 用来清除浮动
2. 实现自适应布局
3. 避免垂直外边距叠加