2017百度前端技术学院习题-04

最新推荐文章于 2022-08-07 22:34:52 发布

HungryPlayer

最新推荐文章于 2022-08-07 22:34:52 发布

阅读量379

点赞数

分类专栏：前端任务文章标签：百度前端学院习题定位与居中

本文链接：https://blog.csdn.net/jiejiao509/article/details/79943938

版权

前端任务专栏收录该内容

6 篇文章 0 订阅

订阅专栏

习题任务04

收获:

1.垂直水平居中的解决办法:绝对定位的方法.

2.对于浮动的理解

3.border-radius的作用及顺序

4.代码如下

04-main.css

.box{
	width: 400px;
	height: 200px;
	background-color: #ccc;
	position: absolute;
	top: 50%;
	margin-top: -100px;
	left: 50%;
	margin-left: -200px;
}
.circle01{
	width: 50px;
	height: 50px;
	background-color: #fc0;
	border-radius: 0 0 100% 0;
}
.circle02{
	position: relative;
	top: 50%;
	left: 100%;
	margin-left: -50px;
	width: 50px;
	height: 50px;
	background-color: #fc0;
	border-radius: 100% 0 0 0;
}

04.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位与居中问题</title>
	<link rel="stylesheet" href="04-main.css">
</head>
<body>
	<div class="box">
		<div class="circle01"></div>
		<div class="circle02"></div>
	</div>
</body>
</html>