前端项目小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