2021-08-02

最新推荐文章于 2021-08-11 21:28:21 发布

mkksw

最新推荐文章于 2021-08-11 21:28:21 发布

阅读量246

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/mkksw/article/details/119331823

版权

选择题：

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

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

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

答案（ABCD）

9.根据下面代码，.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的%值是相对于父元素的宽度

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

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

）

答案（A.C.D）

12.Flex布局中哪个是定义垂直居中？

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

答案（A）

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

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

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

.about-text { height: 100px; }

</div>
```

A、0 B、100px C、200px D、300px;
答案（B）

大题：利用html和css做出来一个茶杯

自动换行
	<!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>

关注