去除浮动
.clearfix:after{
content:"",
display:block;
clear:both;
}
内盒子模型（之前讲过浏览器默认的是context-box标准盒子模型，但是最好用的还是内盒子模型，内盒子模型的width和height是包括border和padding的，往一个宽高固定的内盒子添加padding和border，本身的width不会改变，是原本的内容区域被减少了）
*{
box-sizing: border-box;
}
清洁自带的样式( 只是粗略的做清洁，想要完全清楚默认样式，可以百度 normalize.css )
*{
padding: 0;
margin: 0;
list-style: none;
outline: none;
...
}
去除默认样式
select{
-webkit-appearance: none;
border: 0;
outline: 0;
background-color: transparent;
100%;
height: 0;
}
超出省略
.list{
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
三行后省略(记不住很正常,可以去京东官网等地方直接打开F12复制使用)
.textOVerThree {
display: -webkit-box;
overflow: hidden;
white-space: normal !important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical
}
强制换行（一些英文单词和数字是不会自动换行的，导致会溢出屏幕外而导致手机端可以横向滑动）
.word{
/* 单词数字默认是不换行的 | 有足够的长度，单词就不会换行 | 到了该换行的地方就强制换行 */
word-break: normal | break-word | break-all;
}
/*
word-wrap: break-word; 效果和 word-break: break-word; 是一样的
而且兼容性更好，为什么还要把 word-break: break-word; 写出来呢
好记
*/
带有背景图片的按钮
.btn{
background: url("img/xxx.jpg") no-repeat;
background-position: left center;
background-size: 30px;
padding-left: 30px;
}
为 PDF 等链接添加图标指示
a.external[href$=".pdf"], a.external[href$=".PDF"],
a.external[href*=".pdf?"], a.external[href*=".PDF?"],
a.external[href*=".pdf#"], a.external[href$=".PDF#"] {
background: url("img/xxx.jpg") no-repeat;
background-position: left center;
padding-right: 24px;
padding-left: 24px;
}
序号选择器实现间隔样式
div:nth-of-type(3n){
/* 序号是三的倍速的div字体红色，也就是三，六，九 */
color: red;
}
div:nth-of-type(2n+3){
/* 从三开始每增加两个序号的div字体红色，也就是三，五，七.... */
color: red;
}
做一个自定义的弹窗
.mask{
position: fixed;
100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.2);
}
.mask>.box{
position: absolute;
left: 50%;
top：50%；
background-color: white;
max-600px;
max-height:600px;
overflow:auto;
transform: translate(-50%, -50%);
}
输入框选中时改变颜色
input:focus{
border: 2px solid red;
}
禁止图片被复制
img{
-webkit-touch-callout: none;
}
清除输入框的阴影
input{
-webkit-appearance: none;
}
修改输入框提示字体大小颜色
input::-webkit-input-placeholder{
font-size: 16px;
color: red;
}
清除img的底部空白（img标签是对齐文字中线的，所以两个img上下排列会有一点距离 ）
img{
/* 方法一 */
display:block;
/* 方法二 */
vertical-align: top;
}
/* 还有就是把父标签改成字体大小为0px;不建议 */
/* 还有就是把父标签添加overflow:hidden;不建议 */
文字和输入框，单选多选框，图片连在一起时，垂直居中
img,input{
vertical-align: center;
}
文字两端对齐
div {
margin:10px 0;
100px;
border:1px solid red;
text-align-last: justify;
}
横向无限滚动
#nav{
white-space: nowrap;
overflow-x: auto;
display: flex;
}
<div id="nav">
<span>按钮</span>
<span>按钮</span>
...
</div>
</div>
禁止右键,禁止复制
//前面一句是禁止右键，后面一句是禁止复制
<body oncontextmenu="return false;" onselectstart="return false">
怎么让一个 div 水平垂直居中
<div class="parent">
<div class="child"></div>
</div>
1.
div.parent {
display:flex;
justify-content:center;
align-items:center;
}
2.
div.parent {
position:relative;
}
div.child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
3.
div.parent{
display:flex; // display:grid
}
div.child{
margin:auto;
}
手机图片放大骚操作
// 禁止页面放大
<meta id="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
// 同意页面放大，通过js去控制#viewport就行
<meta id="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=5.0,user-scalable=yes" name="viewport" />
计算属性
// calc
#aa{
calc(90% + 5px)
}
// attr(自定义属性)
// 可以用伪类显示a标签的href属性
article::before{
content: attr(data-name);
}
首字母大写，字母全大写
#aa{
text-transform: capitalize; // 首字母大写
text-transform: uppercase; // 字母全大写
}
渐变hover
button {
background-image: linear-gradient(#5187c4, #1c2f45);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
}
button:hover {
background-position: 0 0;
}
画个叉
.a{
display: inline-block;
20px;
height:5px;
background: #ccc;
line-height:0;
font-size:0;
vertical-align:middle;
-webkit-transform: rotate(45deg);
position: absolute;
top: 16px;
right: 13px;
}
.a:after{
content:'/';
display:block;
20px;
height:5px;
background: #ccc;
-webkit-transform: rotate(-90deg);
}
css实现一个三角形
#aa{
0;
height: 0;
border:20px solid;
border-color: red white white white;
}
css实现一个打钩
#aa{
background-color: white;
8px;
height: 16px;
border-right: 2px solid red;
border-bottom: 2px solid red;
transform: rotate(45deg);
}
自定义单选多选的样式
可以用来实现出table菜单的切换按钮
可以用来实现出汉堡菜单的显示隐藏
[name=aa]{
display: none; /* 把原来的样式隐藏 */
}
.radioLabel{
color: grey; /* 写一个默认样式 */
}
[name=aa]:checked+.radioLabel{ /* 记住需要 + 号兄弟选择器 */
color: red; /* 写一个选中的样式 */
}
/* input一定要写在label前面 */
<input type="radio" name="aa" id="aa1">
<label class="radioLabel" for="aa1">aa1点我就行</label>
<input type="radio" name="aa" id="aa2">
<label class="radioLabel" for="aa2">aa2点我就行</label>
实现一个条纹的进度条(来自boorstrap)
.progress {
/* background-size和height要始终一样 */
height: 20px;
background-size:20px;
background-color: #d9534f;
background-image:linear-gradient(45deg,rgba(255,255,255,.3) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.3)
75%,transparent 75%,transparent);
}
实现一个条纹的border
.box:before {
content: '';
z-index: -1;
position: absolute;
110%;
height: 110%;
top: -5%;
left: -5%;
background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);
}
.box{
position: relative;
background-color: white;
80px;
height: 80px;
}