前端第一次测试总结_下列哪个属性用于为html元素指定css样式类?-CSDN博客

本文链接：https://blog.csdn.net/Star_Waiting/article/details/119279215

一、选择题

1.下面哪个属性可以在html元素中用来定义内联样式? D

A、href B、link C、rel D、style

内联样式：内联样式是使用style属性添加到元素的样式。<div style="color:pink">啦啦啦</div>

2.下列CSS选择器正确的是？BD

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

A：类名不能是纯数字

C：title中加链接a看似无语法错误但实际上不可实现无法引用

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

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

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

行高可用数字加单位或百分数或纯数字实现

4.下列哪些样式值可以移动元素本身位置？ A

A、margin-left B、padding-left C、left D、translateX

C：要与定位一起使用，谓之边偏移，方可生效

D：位移只是视觉上位置发生了改变，本质上依旧占据着原来的位置

二、简答题

1.哪些是块级元素那些是行内元素，各有什么特点（每个至少说出3种）

答：块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等

特点：

自己独占一行。
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器及盒子，里面可以放行内或者块级元素。

行内元素： <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

特点：

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素

2.JavaScript的基本数据类型有哪些，其中null和undefined的区别是什么？

答：数据类型【number，string，boolean，null，undefined】

//如果⼀个变量没有赋值，该变量的默认是undefined var n1;

//如果⼀个变量的值是undefined，那么该变量的数据类型就是undefined类型

null像在Java⾥⼀样，被当成⼀个对象。但是，JavaScript的数据类型分成原始类型（primitive）和合成类型（complex）两⼤类，作者觉得表示"⽆"的值最好不是对象。 JavaScript的最初版本没有包括错误处理机制，发⽣数据类型不匹配时，往往是⾃动转换类型或者默默地失败。作者觉得，如果null⾃动转为0，很不容易发现错误。因此，作者⼜设计了⼀个undefined⾥注意：这先有null后有undefined，出来undefined是为了填补之前的坑。 JavaScript的最初版本是这样区分的：null是⼀个表示"⽆"的对象（空对象指针），转为数值时为 0；undefined是⼀个表示"⽆"的原始值，转为数值时为NaN。

三、编程题

实现适配（@media + rem）

<!DOCTYPE html>

 

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

 

        body{

            background-color: #FA8072;

        }

        html{

            font-size 10px;

        }

        div{

            background-color: white;

            width: 8rem;height: 8rem;

            margin: auto;

            border-radius: 50%;

        }

        span{

            display: block;

            text-align: center;

            font-size: 3rem;

        }

        ul{

            margin: 0;

            padding: 0;

            list-style: none;

            display: flow-root;

        }

        li{

            float: left;

            padding: 2rem 0;

            width: 100%;

        }

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

            li{

                width: 50%;

            }

            div{

                height: 5rem;

                width: 5rem;

            }

            span{

                font-size: 2.4rem;

            }

        }

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

            li{

                width: 33.33%;

            }

            div{

                height: 5rem;

                width: 5rem;

            }

            span{

                font-size: 2.4rem;

            }

        }

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

            li{

                width: 16%;

            }

            div{

                height: 3rem;

                width: 3rem;

            }

            span{

                font-size: 1.6rem;

            }

        }



    </style>

</head>

<body>

    

        <ul>

            <li>

                <div></div>

                <span>我是个头像</span>

            </li>

            <li>

                <div></div>

                <span>我是个头像</span>

            </li>

            <li>

                <div></div>

                <span>我是个头像</span>

            </li>

            <li>

                <div></div>

                <span>我是个头像</span>

            </li>

            <li>

                <div></div>

                <span>我是个头像</span>

            </li>

            <li>

                <div></div>

                <span>我是个头像</span>

            </li>

        </ul>

   

</body>

</html>