7-31 错题整理

最新推荐文章于 2022-12-02 18:04:37 发布

－DDの破壊光線－

最新推荐文章于 2022-12-02 18:04:37 发布

阅读量951

点赞数

本文链接：https://blog.csdn.net/qq_56828514/article/details/119382151

版权

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

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

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. ![img](images/300823_1505813946375_52788E971C0BEA04E8071D25B3AC3DCC-20210729153154038.png) 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）

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>

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

－DDの破壊光線－

关注

0
点赞
踩
1

收藏

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

2. 下列CSS选择器正确的是？D A、.body .5 B、.about body C、title a D、.about .body3.下列哪些属于CSS中的哪些代表绿色？BCD A、#green B、rgb(0,255,0) C、rgba(0,255,0,1) D、green4.文本尺寸12px，下列哪些可以实现2倍行高？DA、line-height：2rem ...
复制链接

扫一扫