WEB前端-弹性布局

蒲竺

已于 2022-10-27 21:32:41 修改

阅读量1.1k

点赞数 7

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

于 2022-10-27 21:11:21 首次发布

本文链接：https://blog.csdn.net/syh_SYH0321/article/details/127558889

版权

本文详细介绍了CSS3中的弹性布局，包括光标形状、透明度、背景透明等css属性补充，以及缩放和多栏、弹性布局的设置方法，特别强调了弹性布局中的方向、换行、对齐方式等关键概念。

摘要由CSDN通过智能技术生成

WEB前端-弹性布局

一、css属性补充

1.光标形状

语法：cursor:值

取值：

text:文本图标

help:问号图标

wait:等待的图标

pointer: 小手图标

move 移动

url(),临时替换的样式-----需要在url后面加auto

default 箭头

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		div{
			width:100px;
			height:50px;
			border:1px solid #000;
		}
		.box1{
			cursor:text;
		}
		.box2{
			cursor:help;
		}
		.box3{
			cursor:wait;
		}
		.box4{
			cursor:pointer;
		}
		.box5{
			cursor:move;
		}
		.box6{
			cursor:url('bitbug_favicon.ico'),auto;
		}
		.box7{
			cursor:default;
		}
	</style>
</head>
<body>
	<div class="box1">文本</div>
	<div class="box2">问号</div>
	<div class="box3">等待</div>
	<div class="box4">小手</div>
	<div class="box5">移动</div>
	<div class="box6">图片</div>
	<div class="box7">箭头</div>
</body>

应用场景：主要用于修饰鼠标放到元素上面的时候光标的样式

2.强调边框

语法：outline:值------盒子轮廓

取值：和边框一样

应用场景：主要用于设置元素周围的边框，起到强调作用（常用于去掉表单选中的蓝色边框）

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		[type="password"]{outline:none;}
	</style>
</head>
<body>
	<input type="text" />
	<input type="password" />
</body>

效果

3.透明度

语法：opacity:值

取值：0-1之间的小数

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.box{
			width:200px;
			height:100px;
			border:1px solid #000;
			position:relative;
		}
		img{
			position:absolute;
			left:0;top:0;
			opacity:0.5;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="1.png" width="200" height="100" />
		这是一张图片
	</div>
</body>

效果

4.背景透明

语法：rgba(值1，值2，值3，值4)

取值：1-3个值都是0-255的数字，表示颜色，第4个值是透明度0-1之间取值

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.box{
			width:200px;
			height:100px;
			border:1px solid #000;
			position:relative;
		}
		img{
			position:absolute;
			left:0;top:0;
		}
		.box2{
			width:200px;
			height:100px;
			background:rgba(3,3,3,.5);
			color:#fff;
			position:absolute;
			left:0;top:0;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="1.png" width="200" height="100" />
		<div class="box2">
			这是一张图片
		</div>
	</div>
</body>

效果