1. 文字间隔
p {
text-indent:10px; // 单词抬头距离
letter-spacing:10px; // 间距
}
2. 鼠标事件失效
.wrap {
cursor: default;
pointer-events: none;
}
3. 移除边框 和border不一样的是 outline不影响布局
div {
outline:0; // outline:none
}
div {
outline:20px solid red;
}
4. 文字超出宽度显示省略号
div{
width: 100px; // 必须
overflow-y:hidden; // 隐藏滚动条
text-overflow:ellipsis; //当文本溢出时显示省略号...
white-space:nowrap;// 不换行
}
5. 多行溢出(指定行数)显示省略号
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
6. 设置placeholder样式
input::-webkit-input-placeholder {
color: red;
}
7. 垂直居中
// 方法一(常用)
.box {
height: 200px;
display:flex; /* 采用flex布局 */
align-items:center; /* 垂直居中*/
justify-content:center; /* 水平居中*/
}
// 方法二
.box-wrap {
position:relative;
width:100%;
height:200px;
background:red;
}
.box{
position:absolute;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%);
}
8. 滚动条样式
::-webkit-scrollbar {
width: 4px; /* 纵向滚动条*/
height: 4px; /* 横向滚动条 */
}
/*定义滚动条轨道 内阴影*/
::-webkit-scrollbar-track {
background-color: #f6f6f6;
border-radius: 4px;
}
/*定义滑块 内阴影*/
::-webkit-scrollbar-thumb {
background-color: #c5cfd8ff;
border-radius: 4px;
}
9. 元素占满视窗
body{
width:100%;
height:100vh; /* 浏览器视区高度 vw:视区宽度 */
}
10. 容器透明
div{
opacity: 0.5; /* 1相当于显示 0相当于隐藏*/
}
11. hover放大缩小
/*常用在鼠标hover上,突出显示*/
span::hover{
transform:scale(1.1) /* 数值代表放大倍数 */
}
12. 平移加动画
.box{
transform: translateX(200px); /*平移200个px*/
transition: 0.3s all ease-in; /*0.3秒完成*/
}
13. select内容居中显示、下拉内容右对齐
select{
text-align: center;
text-align-last: center;
}
select option {
direction: rtl;
}
14. 修改input输入框中光标的颜色不改变字体的颜色
input{
color: #fff;
caret-color: red;
}
15. 边框阴影
.box{
width:200px;
height:100px;
box-shadow: 0px 0px 13px 1px rgba(51, 51, 51, 0.1);
}
16. 渐变
.box{
width:500px;
height:100px;
background: linear-gradient(25deg, rgb(79, 107, 208), rgb(98, 141, 185), rgb(102, 175, 161), rgb(92, 210, 133)) rgb(182, 228, 253);
}
17. 背景图铺满
.bg{
background-image: url('x/xxx/xx/xx.png); /* 背景图片地址*/
width:100%;
height:100%; /*父级高不为100%请使用100vh */
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
18. css 计算
/* 常用于两边布局,一边定宽,一边可随窗口视区变化 */
.box{
height:calc(100% - 100px) /*减号前后一定要后空格*/
}
19. flex:1 的使用
/* 一般适用于两栏布局,一侧固定宽度,侧随视窗变化 */
<body>
<div class="box">
<div class="item1"></div>
<div class="item2"></div>
</div>
<style>
/* 一般适用于两栏布局,一侧固定宽度,侧随视窗变化 */
.box {
display: flex; /* 父容器声明flex布局 */
height: 300px;
width: 100%;
background: red;
}
.item1 {
width: 100px;
height: 100%;
background: blue;
}
.item2 {
flex: 1; /* 重点 */
background: green;
}
</style>
</body>
20. 1px边框变粗问题
.box{
height: 1px;
background: #dbdbdb;
transform:scaleY(0.5);
}
21. 文字描边
<body>
<div class="stroke">
<p>我是被描了1像素红边的文字</p>
</div>
<style>
.stroke p {
margin: 50px auto 100px;
font-size: 100px;
-webkit-text-stroke: 1px #f00;
}
</style>
</body>
/* 也可以用text-shadow 来实现 */
22. css3旋转动画
<body>
<div class="box"></div>
</body>
<style>
.box {
width: 330px;
background: red;
height: 330px;
/* cycle 可以理解为动画的名字 通过这个名字去找到要执行的动画 */
animation: cycle 1s infinite linear;
}
@keyframes cycle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
23. css绘制三角形
<body>
<div class="box"></div>
</body>
<style>
.box {
width: 0;
height: 0;
border-width: 0px 100px 100px;
border-style: solid;
/* transparent是默认值边框颜色为透明。*/
border-color: transparent transparent blue;
}
</style>
24. 绘制带边框的三角形
<body>
<div class="box">
</div>
</body>
<style>
.box {
width: 0;
height: 0;
border-width: 0px 100px 100px;
border-style: solid;
/* transparent是默认值边框颜色为透明。*/
border-color: transparent transparent blue;
}
/* 原理:利用伪元素再画一个小点的三角形 覆盖在原来的上面 */
.box:after {
content: '';
position: absolute;
top: 10px;
left: 12px;
border-width: 0 96px 96px;
border-style: solid;
border-color: transparent transparent yellow;
}
</style>
25. 利用伪元素实现文字间隔线
<body>
<div class="box">
<span class="item1">首页</span>
<span class="item1">控制中心</span>
<span class="item1">系统设置</span>
</div>
</body>
<style>
.box {
display: flex;
}
.item1 {
display: inline-block;
}
.item1::after {
content: '|';
}
</style>
26. 伪元素其他用法
<body>
<div class="box">
<span class="item1">首页</span>
<span class="item1">控制中心</span>
<span class="item1">系统设置</span>
</div>
</body>
<style>
.box {
display: flex;
}
.item1 {
display: inline-block;
}
.item1::after {
content: '';
position: absolute;
top: 15px;
width: 10px;
height: 10px;
border-radius: 10px;
background: red;
}
</style>
