Web前端Css的浮动与定位及笑脸实例

Tdongge

于 2022-10-23 10:03:02 发布

阅读量266

点赞数 1

文章标签：前端 css html

本文链接：https://blog.csdn.net/Tdongge/article/details/127471184

版权

学号后四位：0221

知识点

1.浮动定位的概述

               1.浮动元素脱离了普通的文档流不占据页面空间的其他没有浮动的元素会自动上前部位

              2.浮动元素会停靠在父级元素的左边或者右边，或者停靠在其他已经浮动的元素的边缘上

              3.浮动元素只会在当前行内浮动

              4.浮动元素依然位于父元素内

              5.让多个元素在一行内显示

2.语法：float： left（左浮动） right（右浮动） none（默认，无浮动的效果）

3.清除浮动：

           如果元素浮动起来之后，除了影响到自己的位置还会影响到后续的元素，在这样的情况下不想被前面浮动元素影响的话可以使用清除浮动来解决这个问题。

           语法：clear：

                  left：清除当前元素前面的元素左浮动带来的影响（只和自己相关，并不和前面的元素相关当前元素不会向前占位并且左边不允许有浮动元素。）

                  right：清除当前元素前面的元素右浮动带来的影响，当前元素不会向前占位并且右不允许有浮动元素。

                  both：清除当前元素前面的元素左浮动和右浮动带来的影响，当前元素不会向前占位并且左右不允许有浮动元素。

           浮动元素对父元素带来的影响

              由于浮动元素脱离了文档流所以导致不占据父元素页面空间

              解决问题：

                  1.直接给父级元素设置高度

                     弊端：必须要知道父级准确的高度

                  2.设置父级元素的浮动

                     弊端：对后续的元素会有影响

                  3.设置父级元素overflow hidden或auto

                     弊端：如果子级溢出的话会一起被隐藏

                  4.在父元素中追加一个空元素（子元素）并且设置他clear：both

项目名称及描述

笑脸

项目代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.face{
				width: 600px;
				height: 600px;
				background-image:radial-gradient(#cc0,orange) ;
				border-radius:50% ;
				margin:50px auto;
				position: relative;
			}
			.face:hover{
				background: blueviolet;
			}
			.eye{
				width: 150px;
				height: 150px;
				background-color: #fff;
				border-radius:50% ;
				position:absolute;
				top: 150px
			}
			.left{
				left: 100px;
			}
			.right{
				right: 100px;
			}
			.ball{
				width: 50px;
				height: 50px;
				border-radius:50% ;
				background-color:#000000 ;
				position: absolute;
				left: 50px;
				bottom: 50px;
				}
			.mouth{
				height: 200px;
				width: 300px;
				border-radius:50% ;
				border-bottom: 5px solid red;
				position: absolute;
				right:150px ;
				bottom:50px ;
			}
		</style>
	</head>
	<body>
		
		<div class="face">
			<div class="eye left" >
				<div class="ball">
					
				</div>
			</div>
			<div class="eye right" >
				<div class="ball">
					
				</div>
			</div>
			<div class="mouth">
				
			</div>
		</div>
	</body>
</html>