前端项目小Tipes总结
1、鼠标经过显示手形
cursor: pointer;
2、控制div一直位于底部：
position:fixed;bottom:0;
3、希望页面缩小时，布局不乱
-
给body加上一个min-width最小宽度，以px为单位，这样当页面变小时，当达到你所设置的最小宽度，body的宽度不再改变，超出的部分会用横向滚动条显示，其内所有元素的布局也不会受影响。
-
使用百分比设置宽度，所有会在页面变化后布局改变的元素的宽度都设置成百分比宽度，这样在缩放时，页面内的各个元素也会跟着缩放，宽度占比不变，当然前提是设置CSS样式前，先给body和html这两个元素设置宽度为100%，避免后面出错。
4、CSS justify-content 属性：
-
项目位于容器的开头：
display: flex; justify-content: flex-start;
-
项目位于容器的结尾：
display: flex; justify-content: flex-end;
-
项目位于容器的中心：
display: flex; justify-content: center;
-
项目位于各行之间留有空白的容器内：
display: flex; justify-content: space-between;
-
项目位于各行之前、之间、之后都留有空白的容器内：
display: flex; justify-content: space-around;
5、块元素在页面中居中显示——四种方法
5.1、 利用table中内容在单元格中默认垂直居中的特性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素绝对居中</title>
<style>
html,body,table{
margin:0;
height:100%;
}
table{
width:100%;
}
#box{
width:300px;
height:300px;
background:teal;
margin:auto;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div id="box"></div>
</td>
</tr>
</table>
</body>
</html>
5.2、 利用css3中的transform属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素绝对居中</title>
<style>
*{
margin:0;
}
#box{
width:300px;
height:300px;
background:maroon;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
5.3、 利用margin属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素绝对居中</title>
<style>
*{
margin:0;
}
#box{
width:300px;
height:300px;
background:silver;
position:absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-150px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
5.4、 利用利用position属性把left，top，right，bottom四个的值设为0，再用margin:auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素绝对居中</title>
<style>
*{
margin:0;
}
#box{
width:300px;
height:300px;
background:pink;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
6、设置背景透明：
background-color: transparent;
7、文本框去边框
input{
{
outline: none;
}
input:focus{
outline: none;
}
8、input框中改变placeholder颜色
input::-webkit-input-placeholder{
color: #FFFFFF;
}
9、设置元素的透明
opacity: 0;
10、设置边框阴影实现立体效果
box-shadow:0 15px 35px rgba(0,0,0,0.1);
11、实现居中
display: inline-block;
vertical-align: middle;
#body1{
width: 100%;
/*把行高和div高度设置成一样的，是因为 vertical-align 是相对于line-heigjt设置的*/
height: 300px;
line-height: 300px;
background-color: aqua;
/*水平居中*/
text-align: center;
}
.switch{
/*对于vertical-align来说对行内元素起作用*/
display: inline-block;
vertical-align: middle;
width: 80%;
height: 274px;
background-color: dodgerblue;
}
12、flex布局
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
13、快速生成 li 标签的快捷键
- 代码为：
ul>li{
消息$}*4
- Tab后效果为：
<ul>
<li>消息1</li>
<li>消息2</li>
<li>消息3</li>
<li>消息4</li>
</ul>
14、CSS 中position相对定位和绝对定位
css中position相对定位和绝对定位：https://www.cnblogs.com/yy95/p/5672440.html