css浮动 渐变

文章目录

css渐变

线性渐变:
语法: background-image:linear-gradient
线性渐变
angle: :方向或角度 表示渐变的方向
关键字
1.to top 从下往上渐变
2.to left 从右往左渐变
3.to bottom 从上往下渐变
4.to right 从左往右渐变
角度
0deg~360deg
0 = to top
90 = to right
180 = to bottom
270 = to left
颜色1,颜色2,颜色3。。。。

			 	<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.qq{
			width: 610px;
			height: 610px;
			background-image: linear-gradient(red 30%,yellow 40%,green 60%,brown 70%);	
		}
	</style>
</head>
<body>
	<div class="qq">
		
	</div>
</body>

在这里插入图片描述

径向渐变:
径向渐变:
语法: background-image:radial-gradient
径向渐变
[size at position] : 径向渐变的半径 以及 圆心的位置
size 半径 position 圆心的位置
(x,y的坐标)
百分比
关键字 top bottom left right center

			 		<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.qq{
			width: 500px;
			height: 500px;
			margin: 0 auto;
			background-image: radial-gradient(180px at 50% 50%,red 10%,yellow 30%,blue 60%);
		}
	</style>
</head>
<body>
	<div class="qq"></div>
</body>

在这里插入图片描述

浮动

1.定位
所谓定位,实际上就是定义元素框相对其正常位置,应该出现在哪儿。
简单说: 定位就是改变元素的页面上的默认的位置
2.定位的分类
1.普通流定位(元素默认的定位方式)
2.浮动定位
3.相对定位
4.绝对定位
5.固定定位
3.定位-普通流定位
文档流定位是页面元素的默认定位方式
页面中的块级元素按照从上到下的排列方式每一个元素时独占一行的
页面中的行内元素按照从左到右的排列方式,当前行装不了(溢出)会自动换行
4.浮动定位
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">
		.qq{
			width: 300px;
			height: 300px;
			border:1px solid black;			
			}
		.aa{
			width: 100px;
			height: 100px;
			background-color: red;
			float: right;
		}
		.bb{
			width: 100px;
			height: 100px;
			background-color: orange;
			clear: both;
		}
		.cc{
			width: 100px;
			height: 100px;
			background-color: yellow;
			float: right;
		}
		
	</style>
</head>
<body>
	<div class="qq">
		<div class="aa"></div>
		<div class="bb"></div>
		<div class="cc"></div>
	</div>
</body>
</html>

在这里插入图片描述

版权声明:本文为weixin_45846427原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45846427/article/details/103057010