浮动及常见样式

最新推荐文章于 2022-01-27 19:28:20 发布

加油，铁子！

最新推荐文章于 2022-01-27 19:28:20 发布

阅读量125

点赞数

分类专栏： web前端文章标签： css html5 前端

本文链接：https://blog.csdn.net/weixin_51264427/article/details/119211498

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

浮动的使用

float元素

可以让块属性元素排成一行

浮动会让行属性元素支持设置宽高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: #AAFFFF;
				/* 让行属性支持宽高 */
				/* display: inline-block; */
				/* 浮动：left、right
				 让块属性元素排成一行时候使用浮动
				 碰到父元素边缘会停下来
				 */
				/* float: left; */
				float: right;
			}
			.one{
				/* 字体大小 默认16px 最小8px */
				font-size: 20px;
				/* margin-top: 100px; */
			}
		</style>
	</head>
	<body>
		<div class="one">1</div>
		<div>2</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span{
				width: 100px;
				height: 100px;
				background-color: #AAFFFF;
				/* 浮动会让行属性元素支持设置宽高 */
				float: left;
			}
		</style>
	</head>
	<body>
		<span>hello</span>
		<span>hello</span>
	</body>
</html>

清除浮动影响

1：给父元素设置overflow: hidden;
2.在父元素最后加一个设置了clear:bth;块属性元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father{
				background-color: #00FFFF;
				/* 解决：给父元素设置overflow: hidden; */
				/* overflow: hidden; */
			}
			.father::after{
				content: '';
				display: block;
				clear: both;
			}
			.son{
				width: 200px;
				height: 200px;
				background-color: #FFFF00;
				float: left;
			}
			.three{
				width: 300px;
				height: 300px;
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<!-- 当父元素不设置高度，高度由子元素撑开的时候
		一旦子元素浮动，就会脱离父元素，父元素就会失去高度 
		会影响后面元素布局
		--><!-- 解决
			1：给父元素设置overflow: hidden; 
			2.在父元素最后加一个设置了clear:bth;块属性元素
		 -->
		<div class="father">
			<div class="son"></div>
		<!-- 	<div style="clear: both;"></div> -->
		</div>
		<div class="three"></div>
	</body>
</html>

伪元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		   /* 添加相同的内容 */
			p::before{
				/* content:添加内容 */
				content: 'QQ号：';
				color: #AAFFFF;
			}
			p::after{
				content: '@qq.com';
				color: #FFFF7F;
			}
		</style>
	</head>
	<body>
		<p>123456</p>
		<p>234567</p>
		<p>345678</p>
	</body>
</html>

设置颜色

颜色

			    /* 16进制 */
				/* background-color: #AAFFFF; */
				/* 英文单词 */
				/* background-color: darkcyan;*/
				/* rgb值 每个值都在0-255*/
				background-color: rgb(0,255,0);

透明度

opacity设置透明度

rgba设置透明色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.out{
				width: 100px;
				height: 100px;
				/* background-color: #FF0000; */
				/* 透明度 0-1(默认1) 
				透明度会继承给子元素
				*/
				/* opacity: 0.5; */
				/* 设置透明色 */
				background-color: rgba(255,0,0,0.5);
			}
			.in{
				width: 50px;
				height: 50px;
				background-color: #FFFF00;
			}
		</style>
	</head>
	<body>
		<div class="out">
			<div class="in"></div>
		</div>
	</body>
</html>

背景图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 400px;
				height: 400xp;
				background-color: #AAFFFF;
				/* 背景图片 */
				background-image: url();
				/* 背景图片大小
				一个值 横向固定 纵向自适应
				两个值 横向和纵向大小
				cover 平铺 会切掉一部分
				contain  宽度和高度等比例自适应，可能撑不满 */
				/* background-size: 400px; */
				/* background-size: 400px 400px; */
				/* background-size: cover;*/
				background-size: contain;
				/* 背景是否重复 */
				background-repeat: no-repeat;
				/* 背景图位置
				左上角是0,0点 x向右正方向 y向下正方向
				两个值 x轴方向偏移量 y轴偏移量 
				x轴 left right center
				y轴 top bottom center
				*/
				/* background-position:100px 100px; */
				background-position-x:center;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

加油，铁子！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动及常见样式

目录浮动的使用清除浮动影响伪元素设置颜色颜色透明度背景图浮动的使用float元素可以让块属性元素排成一行浮动会让行属性元素支持设置宽高<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> &l...
复制链接

扫一扫