前端特效总结

article/2025/11/10 9:11:03

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>