前端特效总结
1、前端的一些小的效果
a. ”透明的方块“
/*
只需要对 div 设置：background: rgba(57, 61, 82, 0.7)就可以，第四个参数表示透明度的程度，取值为 0-1
*/
<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; 则开始输入值得位置改变了
第一种
<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>
第二种
<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
<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 一样会挤其他的元素
<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 有负值
<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的层级关系
<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; 属性
发现子div 和 父 div 一起移动和 body 保持100px
但是 margin-left 会生效
<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>
