前端路线--HTML篇（day06）

最新推荐文章于 2024-07-12 16:27:40 发布

喝西瓜汁的兔叽Yan

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量240

点赞数

分类专栏：前端文章标签：前端 html css3

本文链接：https://blog.csdn.net/Yan9_9/article/details/122364644

版权

前端专栏收录该内容

106 篇文章 5 订阅

订阅专栏

外边距合并1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box1{
			width: 200px;
			height: 200px;
			background-color: #f00;

			margin-bottom: 150px;
			/*上下外边距会合并*/
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: #00f;

			/*margin-top: 50px;*/
		}
	</style>
</head>
<body>
	<div class="box1">
		
	</div>
	<div class="box2">
		
	</div>
</body>
</html>

外边距合并2

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box1{
			width: 400px;
			height: 400px;
			background-color: #f00;

			/*padding-top: 1px;*/
			/*border-top: 1px solid #f00;*/
			overflow: hidden;
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: #00f;

			margin-top: 100px;
			/*父子关系的情况下，上外边距会合并*/
			/*因为父子上边距没有间隔所以出现这种情况*/
			/*解决办法：添加上内边距或者上边框或者溢出隐藏、*/
		}
	</style>
</head>
<body>
	<div class="box1">
		<div class="box2">
		
		</div>
		Lorem ipsum dolor sit amet consectetur adipisicing, elit. Aperiam quam itaque temporibus, doloremque asperiores laborum iure assumenda obcaecati magni culpa provident repudiandae exercitationem rerum, ducimus cumque corrupti sunt modi eveniet?
		Lorem ipsum dolor sit amet consectetur adipisicing, elit. Aperiam quam itaque temporibus, doloremque asperiores laborum iure assumenda obcaecati magni culpa provident repudiandae exercitationem rerum, ducimus cumque corrupti sunt modi eveniet?
	</div>
	
</body>
</html>```

边框圆角

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box1{
			width: 400px;
			height: 400px;
			background-color: #f00;

			/*可以把正方形变成圆形*/
			border-radius: 50%;
		}
		img{
			border-radius: 50%;
		}
		.box2{
			width: 400px;
			height: 200px;
			background-color: #f00;

			/*如果是长方形，50%是椭圆，设置成高度的一半会变成两头圆*/
			border-radius: 100px;
		}
	</style>
</head>
<body>
	<div class="box1">
		
	</div>
	<img src="../../day05/课件/images/youzi.png" alt="">
	<div class="box2">
		
	</div>
</body>
</html>

喝西瓜汁的兔叽Yan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端路线--HTML篇（day06）

外边距合并1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 200px; he
复制链接

扫一扫