前端错题整理1

一、选择题 

1. 下列CSS选择器正确的是？(D)

   A、.body .5 B、.about body C、title a D、.about .body

2. 下列哪些属于CSS中的哪些代表绿色？(BCD)

   A、#green B、rgb(0,255,0) C、rgba(0,255,0,1) D、green

3. 文本尺寸12px，下列哪些可以实现2倍行高？(ABCD)

   A、line-height：2rem       B、line-height：24px

   C、line-height：2             D、line-height：200%

4. 根据下面代码，.subbox盒子距.box盒子顶部距离多大？(C)

   .box{ float: left; width: 300px; height: 200px; }

   .subbox { margin-top:50%;}

   <div class=”box”>

       <div class=”subbox”></div>

   </div>
   A、50px B、100px C、150px D、200px

5. Flex布局中哪个是定义垂直居中？(A)

   A、align-items B、align-content C、justify-content D、flex-direction

6. 阅读以下代码说明.box的DIV实际大小是多少？(C)
    

   .box{

         box-sizing: content-box;

         width: 200px;

         height: 200px;

         padding: 20px;

         background-color: green;

         border: 5px dotted red;

       }

   <div class="box"></div>
   A、200px B、225px C、250px

7. 
   (C)
   A、blue / red / blue / red / blue / orange B、blue / red / blue / red / blue / blue
   C、blue / red / blue / blue / red / blue     D、red / blue / blue / blue / blue / red

8. 关于标签，下列说法错误的是（B）
   A、<video>标签中controls属性决定是否向用户显示控件
   B、<audio>与</audio>之间插入的内容是用来解释控件的
   C、<datalist>标签可以和input标签配合进行使用，来显示列表
   D、<progress>标签不填写max和value会自动滑动

9. 下列说法正确的有：(AB)
   A、visibility:hidden;所占据的空间位置仍然存在，仅为视觉上的完全透明；
   B、display:none;不为被隐藏的对象保留其物理空间；
   C、visibility:hidden;与display:none;两者没有本质上的区别；
   D、visibility:hidden;产生reflow和repaint（回流与重绘）；

10. 阅读以下代码选择出正确答案（B）

     var num1=10;
​
     var num2='20'；
​
     var num3=num1+(num2>10)；
​
     console.log(num3);

     A、1020   B、11   C、undefined   D、10true

二、编程题

1.  实现适配（@media + rem）

  @media screen and (max-width:768px) {

            body,
            html {
                font-size: 30px;
            }

            .mbox div {
                width: 2.66666667rem;
                height: 2.66666667rem;
                background-color: white;
                border-radius: 50%;
            }

            .fox {
                display: flex;
                align-items: center;
                justify-content: space-around;
                flex-wrap: wrap;
                width: 9rem;
            }

        }

        @media screen and (min-width:768px) {

            body,
            html {
                font-size: 24px;
            }

            .mbox div {
                width: 2.0833333rem;
                height: 2.0833333rem;
                background-color: white;
                border-radius: 50%;
            }

            .fox {
                display: flex;
                align-items: center;
                justify-content: space-around;
                flex-wrap: wrap;
                width: 14rem;
            }

        }

        @media screen and (min-width:922px) {

            body,
            html {
                font-size: 24px;
            }

            .mbox div {
                width: 2.0833333rem;
                height: 2.0833333rem;
                background-color: white;
                border-radius: 50%;
            }

            .fox {
                display: flex;
                align-items: center;
                justify-content: space-around;
                flex-wrap: wrap;
                width: 19rem;
            }

        }


        @media screen and (min-width:1200px) {

            body,
            html {
                font-size: 16px;
            }

            .mbox div {
                width: 1.875rem;
                height: 1.875rem;
                background-color: white;
                border-radius: 50%;
            }

            .fox {
                display: flex;
                align-items: center;
                justify-content: space-around;
                width: 100%;
            }

        }

        .mbox {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .fox {
            margin: 0 auto;
            background-color: pink;
        }

    <div class="fox">
        <div class="mbox">
            <div></div>
            <p>我是个头像</p>
        </div>

        <div class="mbox">
            <div></div>
            <p>我是个头像</p>
        </div>

        <div class="mbox">
            <div></div>
            <p>我是个头像</p>
        </div>

        <div class="mbox">
            <div></div>
            <p>我是个头像</p>
        </div>

        <div class="mbox">
            <div></div>
            <p>我是个头像</p>
        </div>
        
        <div class="mbox">
            <div></div>
            <p>我是个头像</p>
        </div>
    </div>

2.根据以下效果图，任选两种效果，实现代码

 

眼睛：

.dier{
            width: 100px;
            height: 100px;
            background-color: rgb(44, 1, 44);
            
        }
        .dier-1{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: white;
            float: left;
            margin-top: 50px;
            margin-left: 10px;
            /* transform: translateY(50px) translateX(20px); */
        }
        .dier-2{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: white;
            float: right;
           margin-top: 50px;
           margin-right: 10px;
            /* transform: translateY(70px) translateX(); */
        }
        .donghua1{
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
            position: relative;
            top: 15px;
            animation-name: run;
            animation: run 2s infinite linear;
        }
        @keyframes run {
            0%{
                margin-left: 0px;
            }
            100%{
                margin-left: 10px;
            }
        }
        .donghua2{
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
            position: relative;
            top: 15px;
            animation-name: run;
            animation: run 2s infinite linear;
        }

<div class="dier">
        <div class="dier-1">
            <div class="donghua1"></div>
        </div>
        <div class="dier-2">
            <div class="donghua2"></div>
        </div>
    </div>

钟表：

  body {
            background-color: rgb(11, 0, 73);
        }

        .fbox {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid white;
            position: relative;

        }

        .shi {
            width: 3px;
            height: 20px;
            background-color: white;
            transform-origin: 0px 20px;
            left: 50%;
            top: 3px;
            border-radius: 0 0 25% 25%;
            transform: translateX(-50%);
            position: absolute;
            animation: run 3s;
        }

        .fen {
            width: 1px;
            height: 23px;
            background-color: white;
            left: 50%;
            top: 0px;
            transform: translateX(-50%);
            position: absolute;
            transform-origin: 0px 23px;
            animation: run1 3s;
            border-radius: 0 0 25% 25%;
        }


        @keyframes run {
            0% {
                transform: rotateZ(0deg);
            }

            100% {
                transform: rotateZ(50deg);
            }
        }

        @keyframes run1 {
            0% {
                transform: rotateZ(0deg);
            }

            100% {
                transform: rotateZ(360deg);
            }
        }

<div class="fbox">
        <div class="shi"></div>
        <!-- <div class="dian"></div> -->
        <div class="fen"></div>
    </div

电池：

  .dianchi {
            display: flex;
            align-items: center;
        }

        .qita {
            background-color: white;
            width: 30px;
            height: 60px;
        }

        .bian {
            width: 130px;
            height: 120px;
            border: 1px solid white;
        }
        .jindu{
            width: 0px;
            height: 120px;
            animation: identifier 3s;
            background-color: white;
        }
        @keyframes identifier {
            0%{}
            100%{
                width: 100%;
            }
        }

    <div class="dianchi">
        <div class="bian">
            <div class="jindu"></div>
        </div>
        <div class="qita"></div>
    </div>