7-31 错题整理

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

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

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

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

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

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

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

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

```html
.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

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

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

13.根据下列代码.about的高是多少? B

```html
.about { maring: 0 auto; }

.about-img { float: left; height: 200px; }

.about-text { height: 100px; }

<div class=”about”>

        <div class=”about-img”></div>

    <div class=”about-text”></div>

</div>
```

A、0          B、100px          C、200px          D、300px;

14.阅读以下代码.box的DIV宽度是多少？B

```css
body,html{

    font-size: 16px;

}

.box{

      float:left;

      width: 15rem;

      height: 200px;

      font-size: 20px;

      background-color: coral;

}

<div class="box"></div>
```

A、150px                  B、240px          C、200px          D、300px;

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

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不支持

20. 在CSS3中，以下哪个IE浏览器（Trident内核）的私有属性前缀？D

A、 –Webkit
B、–trident
C、 –ie
D、 –ms

21.      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     

 

 

 

23. 以下可以被子元素继承的属性是   AD

 A、font-size
 B、margin
 C、padding
 D、color

24. 下列说法正确的有：AB

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

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

 A、SVG做动画性能要优于CANVAS
 B、CANVAS做动画性能要优于SVG
 C、SVG产生的dom数量比CANVAS要少
 D、CANVAS产生的dom数量比SVG要少
 E、CANVAS可以使用css设置动画样式
 F、 SVG可以使用css设置动画样式

26. 下面四个变量声明语句中，哪一个变量的命名是正确的？B

      A．var for                                    B．var txt_name        

      C．var myname myval              D．var 2s

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

div ul li    span  a  img (块级元素换行  行内不换行)

2.CSS 中选择器的优先级以及 CSS 权重如何计算？

!important > id > class > 标签 > 继承的和*

3.说说你对语义化的理解？列举5个语义化的标签？

nav          header        footer       aside       article

4.对 BFC 规范(块级格式化上下文：block formatting context)的理解？

BFC指的是块级格式化上下文，一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域，和其他区域互不影响。

5.请解释一下 CSS3 的 flexbox（弹性盒布局模型）,以及适用场景？

弹性布局  移动端

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

number   string     Boolean      null     undefined  

对象类型 复杂数据类型() undefined

当一个变量被创建出来了之后 但是没有任何的赋值操作 undefined

两个人都表示空 但是 本质上不一样

简答题

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

 

 

 

 <style>
        @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;
        }
    </style>
</head>

<body>

    <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>

</body>

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

 

换行
	<!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: 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%;
	}
	.dian {
	width: 5px;
	height: 5px;
	background-color: white;
	border-radius: 50%;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	position: absolute;
	}
	@keyframes run {
	0% {
	transform: rotateZ(0deg);
	}
	100% {
	transform: rotateZ(50deg);
	}
	}
	@keyframes run1 {
	0% {
	transform: rotateZ(0deg);
	}
	100% {
	transform: rotateZ(360deg);
	}
	}
	.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%;
	}
	}
	</style>
	</head>
	<body>
	<div class="fbox">
	<div class="shi"></div>
	<!-- <div class="dian"></div> -->
	<div class="fen"></div>
	</div>
	<div class="dianchi">
	<div class="bian">
	<div class="jindu"></div>
	</div>
	<div class="qita"></div>
	</div>
	</body>
	</html>

 

换行
	<!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: rgb(32, 0, 83);
	}
	.box {
	display: flex;
	width: 100px;
	position: absolute;
	left: 50%;
	top: 200px;
	}
	.content {
	width: 50px;
	height: 50px;
	border-radius: 0 0 5px 5px;
	border: 1px solid white;
	}
	.ba {
	width: 25px;
	height: 25px;
	border-radius: 0 50% 50% 0;
	border: 1px solid white;
	}
	.dbox {
	width: 80px;
	position: absolute;
	left: 50%;
	top:175px;
	display: flex;
	justify-content: space-around;
	transform: translateX(-13px);
	align-items: flex-end;
	}
	.dbox div {
	width: 1px;
	height: 10px;
	background-color: white;
	animation: run 3s;
	}
	.dbox div:nth-child(2){
	height: 20px;
	}
	@keyframes run {
	0%{}
	100%{
	height: 0;
	}
	}
	</style>
	</head>
	<body>
	<div class="dbox">
	<div></div>
	<div></div>
	<div></div>
	</div>
	<div class="box">
	<div class="content"></div>
	<div class="ba"></div>
	</div>
	</body>
	</html>