错题整理7/31

最新推荐文章于 2021-10-14 17:29:13 发布

一只努力学习web前端的小白熊

最新推荐文章于 2021-10-14 17:29:13 发布

阅读量494

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/m0_49245701/article/details/119357824

版权

希望有路过的大佬可以更正或补充

1.下列css选择器正确的是？

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

正确答案：BD

解析：A中选择器命名不能以数字开头

C <title></title>中间的都是网页的标题，插入标签不能发挥标签的作用。

2.下列哪些属于css中的代表绿色？

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

正确答案：BCD

解析：css的颜色表示方式1十六进制2rgb/rgba r:red;g:green;b:blue,并且需要三个介于0和225之间的单独值，也可用百分百，谁大就偏向谁（a表示透明度）3颜色名

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

A、line-height:2rem B、line-height:24px C、line-height:2 D、line-height:200%

正确答案：BCD

解析：A中rem的标准不知。

4.阴影box-shadow:0 0 10px red;其中10px表示？

A、投影向右10px B、投影向左10px C、投影大小10px D、投影向下10px

正确答案：C

解析：box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];

5.根据下面代码，.subbox盒子距.box盒子顶部距离多大？

html

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

.subbox { margin-top:50%;}

</div>

A、50px B、100px C、150px D、200px

正确答案：C

解析：当父元素浮动，子元素为标准流时，margin-top/left/right/bottom:50%均为父元素宽度的50%。

6. 盒子使用visibility设置hidden后还保留位置吗？

A、保留位置 B、不保留位置

正确答案：A

解析：display不会保留原来的位置

7. 页面导入样式文件时，对于使用link和@import说法错误的是？

A、 link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS

B、页面被加载的时，link和@import引用的CSS都会等到页面被加载完再加载

C、 import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题

D、link支持使用js控制DOM去改变样式，而@import不支持

正确答案：B

解析：link不是等页面加载完再加载，而是同时加载

8.使用CSS的flexbox布局，不能实现以下哪一个效果：

A、三列布局，随容器宽度等宽弹性伸缩

B、多列布局，每列的高度按内容最高的一列等高

C、三列布局，左列宽度像素数确定，中、右列随容器宽度等宽弹性伸缩

D、多个宽高不等的元素，实现无缝瀑布流布局

正确答案：D

9. 关于SVG和CANVAS，下面陈述正确的有?

A、SVG做动画性能要优于CANVAS

B、CANVAS做动画性能要优于SVG

C、SVG产生的dom数量比CANVAS要少

D、CANVAS产生的dom数量比SVG要少

E、CANVAS可以使用css设置动画样式

F、 SVG可以使用css设置动画样式

正确答案：BCE

解析：canvas 和 svg都允许在浏览器上绘制图形，但本质上是不同的。

cavas：

通过JS来绘制，只要它的位置发生改变，就得重新绘制

它是逐像素渲染，依赖屏幕的分辨率

弱的文本渲染能力

不支持事件处理

能够jpg、png图像格式保存

适合图像密集的游戏，其中的许多对象会被频繁重绘

SVG:（svg的对象是文档对象模型的一部分）

使用XML的2d语言

不依赖屏幕分辨率

支持事件处理

适合带有大型渲染区域的应用程序（如谷歌地图）

不适合游戏

复杂度越高渲染速度越慢（过度依赖DOM）

10.移动适配器

<!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>
        html {
            font-size: 10px;
        }

        ul {
            padding: 0;
            margin: 0;
            background-color: violet;
            list-style: none;
            display: flow-root; 
        }

        li {
            float: left;
            width: 100%;
           
        }

        div {
            border-radius: 50%;
            background-color: white;
            width: 8rem;
            height: 8rem;
            margin: 2rem auto;
        }

        span {
            display: block;
            text-align: center;
            line-height: 1.4em;
            font-size: 3rem;
        }

        @media screen and (min-width:768px) {
            ul {
                background-color: teal !important;
            }

            div {
                width: 5rem !important;
                height: 5rem;
            }
            li{width: 50% !important;}
            span {
                font-size: 2.4rem !important;
            }
        }
        @media screen and (min-width:992px) {
            ul {
                background-color: rgb(107, 218, 162) !important;
            }

            div {
                width: 5rem !important;
                height: 5rem;
            }
            li{width: 33.333% !important;}
            span {
                font-size: 2.4rem !important;
            }
        }
        @media screen and (min-width:1200px) {
            ul {
                background-color: rgb(187, 107, 218) !important;
            }

            div {
                width: 3rem !important;
                height: 3rem;
            }
            li{width: 16.666% !important;}
            span {
                font-size: 1.6rem !important;
            }
        }
    </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>

一只努力学习web前端的小白熊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
错题整理7/31

希望有路过的大佬可以更正或补充1.下列css选择器正确的是？A、.body .5 B、.about body C、title a D、.about .body正确答案：BD解析：A中选择器命名不能以数字开头 C <title></title>中间的都是网页的标题，插入标签不能发挥标签的作用。2.下列哪些属于css中的代表绿色？A、#green B、rgb(0,255,0) C、rgba(0,255,0,1) D...
复制链接

扫一扫