2020 祝安,缝隙中寻找机遇:面试题第一波:css

1,067 阅读8分钟

非常感谢,前同事行长@onlyadaydreamer分享的面经。

话说,写了这么长时间的项目,很多基础都快忘没了。 不过前两天感谢产品同学提的需求,页面css 都快写吐了🤮🤮🤮🤮

我们程序员就是这样,默默无闻的当着键盘侠,明明都懂,却说不出来,就像我对你的爱。

正文开始!

让元素不可见的方法有哪些?都有什么区别?

* display: none 会改变布局
* visibility: hidden 不会改变布局
* opacity: 0 不会改变布局

flex: 1 的完整写法

flex是 flex-grow、flex-shrink、flex-basis的缩写
默认flex: 0 1 auto 
flex: 1 1 0

flex的值的完整写法是[<flex-grow> <flex-shrink> <flex-basis>],不过它的取值还有可能是单个数字或者单个百分比等,不同种类的取值所表示的意思是大有不同的。

flex值为none
当flex为none时,等同于flex: 0 0 auto;

flex值为auto
当flex为auto时,等同于flex: 1 1 auto;

flex值为一个非负数字
当flex取值为一个数字,则该数字是设置的flex-grow值,其它两个属性用初始值,如flex:1时,等同于flex: 1 1 0%

flex值为两个非负数字
当flex取值为2个数字时,相当于设置的flex-grow和flex-shrink值,flex-basis取值为初始值,如flex:1 0时,等同于flex: 1 0 0%

怎么做垂直水平居中

flex布局://
   .box{
         height:600px;  
         
         display:flex;
         justify-content:center;  //子元素水平居中
         align-items:center;      //子元素垂直居中
    }
    .box>div{
        background: green;
        width: 200px;
        height: 200px;
    }
    
position + -margin //
    div{
        width:200px;
        height: 200px;
        background:green;
        
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }
    
position+transform//
    div{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:50%;    /* 定位父级的50% */
        top:50%;
        transform: translate(-50%,-50%); /*自己的50% */
    }

table-cell 针对文字比较好://
    .box{
        display:table-cell;
        text-align:center;
        vertical-align: middle;
    }
    
绝对定位+margin:auto
    div{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

怎么画一个梯形

不说别的,现在考我这个我能打死面试官

width: 100px;// 关键
height: 0;
border-width: 100px;
border-style: solid;
border-color: red transparent transparent transparent;

css3用过哪些属性

用过transform, 比如设置盒子

left: 50%; 
transform: translateX(-50%)

来达到水平居中的效果。

对子容器设置margin-top:10%, 实际上是在父容器上加了margin-top,这个10%是取的谁的? 怎么解决?


10%是取的父容器的;可以通过给父级容器添加overflow:hidden把父级容器变成一个BFC。
延伸:那么BFC能说下吗?
BFC就是块级格式上下文
BFC元素会阻止外边距折叠,BFC元素计算高度时也会把浮动的子元素计算在内从而不会发生高度塌陷,BFC元素不会和float元素相重叠

flex有哪些属性

我只说下常用到的吧
1、flex-direction: 布局方向
    row
    row-reverse
    column
    column-reverse
2、flex-wrap:
    nowrap: 不换行
    wrap: 允许换行
    wrap-reverse: 换行,第一行在下方
3、justify-content: 主轴上的对齐方式
    flex-start
    flex-end
    center
    space-around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
    space-between 两端对齐,项目之间的间隔都相等。
4、align-items: 交叉轴上对齐方式
    flex-start
    flex-end
    center
    baseline
    stretch
5、flex-grow: 定义项目的放大比例,默认为0,如果存在剩余空间也不放大
6、flex-shrink: 定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
7、flex-basis: 定义了在分配多余空间之前,项目占据的主轴空间(main 8、size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
9、flex: flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

css3动画了解吗?写一个动画让一个盒子沿着容器的四角运动

animation的属性有
    1、name
    2、duration
    3、timing-function
    4、delay
    5、iteration-count :控制循环次数
        infinite
        number
    6、direction:动画循环播放时,每次都是从结束状态跳回到起始状态,再开始播放。animation-direction属性,可以改变这种行为。
        normal
        reverse 反向运动
        alternate 交替
        alternate-reverse 反向交替
    7、fill-mode : 动画结束以后,会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态,需要使用animation-fill-mode属性。
        one: 默认
        backwards: 让动画回到第一帧
        forwards: 让动画停留在结束状态
        both
    8、play-state 如果想让动画保持突然终止时的状态,就要使用animation-play-state属性
        running: 默认
        paused:暂停
 @keyframes move {
    0% {left: 0; top: 0}
    25% {left: calc(100% - 50px); top: 0}
    50% {left: calc(100% - 50px); top: calc(100vh - 50px)}
    75% {left: 0; top: calc(100vh - 50px)}
    100% {left: 0; top: 0}
}

.box {
   position: absolute;
   width: 50px;
   height: 50px;
   background: blue;
   animation: move 4s ease-in 0s 3 normal
}

怎么实现底部栏一直处于页面底部 (css stiky footer)

有两种实现方法

第一种比较常规,也比较麻烦, 主要就是给footer元素设置margin-top为一个负值,然后他的兄弟元素最小高度要和父元素的高度一致,兄弟元素的子元素要设置一个padding-

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            
        .css-stiky-footer {
           position: fixed;
           z-index: 100;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           overflow: auto;
       }
       .css-stiky-footer .wrapper {
          min-height: 100%; 
       }
       .css-stiky-footer .main {
            padding-bottom: 64px; 
       }

       .footer {
           position: relative;
           margin: -64px auto 0 auto; 
           height: 64px;
           background: blue;
       }
    </style>
    </head>
    <body>
        <section class="css-stiky-footer">
            <div class="wrapper">
                <div class="main">
                   
                </div>
            </div>
            <div class="footer">

            </div>
        </section>


    </body>
</html>

第二种方案就非常简单了,使用flex,采用列布局就可以了

display: flex;
flex-direction: column;
justify-content: space-between;

flex最后一行实现左对齐

可以在父容器的尾部添加i标签,当然也可以是其他的,我一般用i标签。i标签的样式不能设置高,这样默认就是0,宽度和其他项一致,i的数量取决于每行的最大列数,只要把最后一行填补成满列就行。就像下面这样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     * {
         margin: 0;
         padding: 0;
     }
      .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
        }
        .container .list{
            text-align: center;
            width: 24%;
            height: 100px;
            background-color: skyblue;
            margin-top: 15px;
        }
        /* // 不要设置高度 */
       .container i { 
            text-align: center;
            width: 24%; 
            background-color: skyblue;
            margin-top: 15px;
       }
    </style>
</head>
<body>
    <div class="container">
        <span class="list">tab</span>
        <span class="list">tab</span>
        <span class="list">tab</span>
        <span class="list">tab</span>
        <span class="list">tab</span>
        <span class="list">tab</span>
        <span class="list">tab</span>
        <!-- // i的数量取决于每行的最大列数 -->
        <i></i> 
    </div>
</body>
</html>

flex布局遇到的一些问题

比如ios8系统不支持flex
比如有时候会混淆flex和inflex的用法,flex容器宽度默认是100%, inline-flex, 容器宽度根据子元素自适应。
还有比如遇到子容器宽度之和超出父容器宽度之后空间分配不符合预期的问题。这个是根据子元素的宽和flex-shrink加权来决定的。计算的时候
先根据子元素实际占用空间算出超出部分
根据子元素实际占用空间减去margin、padding、border后得到的可用空间和flex缩小倍数加权计算超出部分的分配比例
根据缩减分配比例求出具体缩减像素,得到最终结果

position 都有哪些属性值, 默认值是什么?

static relative absolute fixed sticky, 默认值为static

延伸:
    1、position sticky属性了解吗?
    position:sticky是css定位新增属性;可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top:100px);position:sticky这时的效果相当于fixed定位,固定到适当位置,但是这个属性一般不用,因为兼容性比较差 使用:
#sticky-nav {
    position: sticky;
    top: 100px;
}

设置position:sticky同时给一个(top,bottom,right,left)之一即可 使用条件:
父元素不能overflow:hidden或者overflow:auto属性。
必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
父元素的高度不能低于sticky元素的高度
sticky元素仅在其父元素内生效

postion z-index 的层级关系了解吗?

当position不为static的时候我们就可以设置z-index来控制盒子层级, 7种层叠层级由低到高分别是 背景和边框 -> 负的z-index -> 块级盒子 -> 浮动盒子 -> 行级盒子 -> z-index: 0 -> 正的z-index