前端特效总结

最新推荐文章于 2023-04-27 19:21:25 发布

程序猿卡卡罗特_

最新推荐文章于 2023-04-27 19:21:25 发布

阅读量2k

点赞数 9

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

本文链接：https://blog.csdn.net/hi_bigguy/article/details/84679799

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、前端的一些小的效果

a. ”透明的方块“

在这里插入图片描述

/*
	只需要对 div 设置：background: rgba(57, 61, 82, 0.7)就可以，第四个参数表示透明度的程度，取值为 0-1
*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			.main{
				width: 200px;
				height: 200px;
				background: rgba(57, 61, 82, 0.7)
			}
			
		</style>
		
	</head>
	<body>
		
		<div class="main">
			
		</div>
		
	</body>
</html>

b. 在输入框中加入图标

在这里插入图片描述

在输入中有些小图标，实际上方法有多种：

把输入框的"border"属性设置为0，然后用 div 包住图标和输入框，后给这个div设置一个border，看起来是 input 的border
图标不动，去掉 input 的background，然后将 input margin-left 设置为负值，在设置一个 text-indent:32px; 则开始输入值得位置改变了

第一种

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.text{border:solid 2px #ccc;width:400px;height:40px;background:url(http://d.lanrentuku.com/down/png/1211/blueberry/user_friend.png) no-repeat 0 center;}
.text input{border:none;background:none;height:40px;line-height:30px;width:100%; text-indent:32px;}

</style>
</head>

<body>
<div class="text">
	<input type="text"/>
</div>
</body>
</html>

第二种

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.text{width:400px;height:40px;background:url(http://d.lanrentuku.com/down/png/1211/blueberry/user_friend.png) no-repeat 0 center;}

	input{
		margin-left: -20px;
		width: 200px;
		height: 40px;
		text-indent: 49px;
		background: none;
	}

</style>
</head>

<body>
<div class="text">
	<input type="text"/>
</div>
</body>
</html>

2、易忘记的一些知识点

a. a标签设置宽高

a 标签需要设置 display:block 才可以设置宽高

3、绝对定位和相对定个位

须知：

相对定位：
相对自己原来的位置进行位置的偏移
原来的位置还存在
left：-100px; 可以设置负值，表示向相反的位置变化

绝对定位
相对于“离自己最近的拥有定位属性的父级元素”进行位置参考
原来位置消失
后来者居上，默认后面的元素会将前面的元素覆盖掉

注意
只有设置了 position属性，元素的 left , top ，bottom , right 属性值才生效
z-index 表示覆盖的优先级的值，值越大，覆盖时在最上层，如果不指定默认为0

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			
			.box{
				width: 400px;
				height: 400px;
				margin: 0 auto;
				background: #009688;
				position: relative;		/* 让下层的子元素的绝对定位生效 */
			}
			
			.demo{
				width: 200px;
				height: 200px;
				background: #00F7DE;
				
				position: absolute;		/* 加了该属性下面的定位值才生效 */
				left: 100px;
				top: 100px;
			}
			
		</style>
		
	</head>
	<body>
	<div class="box">
			<div class="demo"></div>
		</div>	
	</body>
</html>

在这里插入图片描述

有定位属性的元素位置是不会“挤”的，不像 float 一样会挤其他的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			
			.box{
				width: 400px;
				height: 400px;
				margin: 0 auto;
				background: #009688;
				position: relative;		/* 让下层的子元素的绝对定位生效 */
			}
			
			.demo{
				width: 200px;
				height: 200px;
				background: red;
				
				position: absolute;		/* 加了该属性下面的定位值才生效 */
				left: 100px;
				top: 100px;
			}
			
			.demo2{
				width: 200px;
				height: 200px;
				background: green;
				
				position: absolute;		/* 加了该属性下面的定位值才生效 */
				left: 150px;
				top: 150px;
			}
			
		</style>
		
	</head>
	<body>
		<div class="box">
			<div class="demo"></div>
			<div class="demo2"></div>
		</div>
	</body>
</html>

在这里插入图片描述

4、比较特殊的属性

overflow: 如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
	- scroll：表示以“滚动条”方式显示完所有的内容
	- hidden：隐藏掉“溢出”的部分

white-space: nowrap;规定段落中的文本不进行换行：

text-overflow：ellipsis; 如果文本超过固定的长度，只会显示部分的文字，显示不全用“..."代替

5、盒子模型

5.1 padding 属性会把盒子撑开（撑大）

padding 没有负值，margin 有负值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style> 
		.parent{
			width: 400px;
			height: 400px;
			background: green;
			
			padding-top: 100px;  /*  发现自己被变大了*/
		}
		
		.son{
			width: 200px;
			height: 200px;
			background: red;
			border: 1px solid red;
		}
	</style>
	<body>
		
		<div class="parent">
			<div class="son">	
			</div>
		</div>
	</body>
</html>

发现 parent 盒子被变大了，实际上任何的 padding 值都会撑大

在这里插入图片描述

5.2 margin 值

上下外边距的值会进行合并（取最大值，作为两个 div 之间的距离）
左右盒子之间的外边距会进行累加，两div之间的距离是 margin-right + margin-left 之间的值

5.3 父子div的层级关系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<style>
		.parent{
			width: 400px;
			height: 400px;
			background: green;}
		
		.son{
			width: 200px;
			height: 200px;
			background: red;
			margin-top: 100px; }
	</style>
	
	<body>
		
		<div class="parent">
			<div class="son">		
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

解决办法

设置 overflow: hidden; 属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.parent{
			width: 400px;
			height: 400px;
			background: green;
			/* 设置该属性 */
			overflow: hidden;
		}
		.son{
			width: 200px;
			height: 200px;
			background: red;
			margin-top: 100px;
		}
		
	</style>
	
	<body>
		<div class="parent">
			<div class="son">
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

发现子div 和父 div 一起移动和 body 保持100px

但是 margin-left 会生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<style>
		
		.parent{
			width: 400px;
			height: 400px;
			background: green;
		 	
		}
		
		.son{
			width: 200px;
			height: 200px;
			background: red;
			margin-left: 100px;
		}
		
	</style>
	
	<body>
		
		<div class="parent">
			<div class="son">	
			</div>
		</div>
	</body>
</html>