| 序号 | 类名 | 备注 |
|---|---|---|
| 1 | text-decoration: noner |
去除a标签底下的线 |
| 2 | 行高=高 |
单行文字垂直居中 |
| 3 | background-image |
:url():图片 （还可以加入背景颜色） |
| 4 | background-repeat |
no-repeat、repeat（默认）、 |
| 5 | background-position: x y; |
背景图位置（x：水平方向 y：垂直方向）可以水平或者垂直居中；参数：left right center top |
| 6 | background-attachment: fixed; |
背景图像固定or滚动 fixed:固定、scroll：滚动（默认） |
| 7 | background: url(img/bg.jpeg) no-repeat fixed top; |
背景图片+是否平铺+是否固定+位置 |
| 7 | background: url(img/bg.jpeg) no-repeat buttom center ; |
背景图片+是否平铺+垂直位置+水平位置 |
| 8 | background: rgba(0,0,0,.5) |
背景半透明，最后一个参数取值0~1之间（附着在背景图上面的内容，方便展示背景图） |
| 8 | background-size |
背景图大小，可以为px或者百分比； |
| 8 | background:rgba(0,0,0,.5) no-repeat url(img/播放.jpg) center; |
背景图设置； |
| 8 | background: -webkit-linear-gradient(left,red ,green); |
背景图颜色渐变，默认从上到下，可以沿着对角线渐变background: -webkit-linear-gradient(top left,red ,green);； |
| 9 | border-collapse: collapse; |
做表格时，合并相邻边框； |
| 9 | border-collapse: collapse; |
做表格时，合并相邻边框； |
| 10 | text-algin：center |
行内块 |
| 11 | border-radius |
圆角； 高度的50%成为圆形 |
| 12 | box-shadow |
设置阴影box-shadow: 7px 7px 5px rgba(128,138,135,0.5);
|
| 12 | box-sizing: border-box; |
防止padding和border撑大盒子 |
| 13 | list-style: none; |
清除ul的前面的小圆点 |
| 14 | *{padding：0 margin：0} |
清除内外的边距 |
| 15 | <div style="clear: both;"></div>r |
清除浮动，额外标签发，在最后一个浮动的元素后面加入 |
| 16 | overflow: hidden; |
清除浮动，在父元素上添加【子不教，父之过】（防止外边距合并） |
| 17 | position: fixed;right: 50%;margin-right: 455px; |
广告栏固定在版心左边和右边（使用固定定位，先走自身的一半，再走父元素的一半） |
| 18 | z-index |
用于展示盒子的堆叠顺序，数值越大，越往上排； |
| 19 | .a:hover .b{} |
当鼠标悬停在a元素上时，b元素改变或者展示指定样式 |
| 20 | text-align: center |
在图片的父元素加上，可以让图片居中 |
| 21 | input {outline: none;} |
取消input被选中后出现的轮廓线 |
| 21 | input::-webkit-input-placeholder |
控制input的提示语样式 |
| 21 | multiple="multiple" |
文件上传时，可以选择多个文件一起上传 |
| 22 | textarea{resize: none;} |
防止文本域被拖动 |
| 23 | vertical-align: middle; |
文字和图片中线对齐【解决图片底部有默认缝隙】 |
| 24 | white-space |
normal:强制一行显示 |
| 25 | 100% |
和父元素一样，比如设置宽高，子元素100%，那么宽高跟父盒子相同 |
| 26 | background-size: ; |
背景缩放(多用于移动端),两个参数为控制宽高;一个参数代表另一个参数等比例缩放；可以跟%，一个参数是相对于父盒子的尺寸等比列缩放；contain：宽高等比列拉伸；（常用） |
| 27 | display:flex |
伸缩布局，给父元素添加了flex以后，子盒子就具有了行内块元素的属性。 |
| 28 | flex-direction |
父级属性，row子元素沿着X轴排列，column子元素沿着Y轴排列 |
| 29 | justify-content |
父级属性，设置主轴上子元素的排列方式，center居中对齐、space-around平分剩余空间、space-between:两边子元素贴边，再平均分配剩余空间。 |
| 30 | flex-wrap |
父级属性，设置子元素是否换行，默认不换行，wrap：装不开自动换行。 |
| 31 | algin-items |
父级属性，设置侧轴上子元素的排列方式【适应于单行】，flex-start：从上到下，flex-end：从下往上，center：垂直居中 |
| 32 | algin-content |
父级属性，设置侧轴上子元素的排列方式【适应于多行】，flex-start：从上到下，flex-end：从下往上，center：垂直居中，space-around平分剩余空间、space-between:两边子元素贴边，再平均分配剩余空间。 |
| 33 | flex：number（默认0） |
子级属性，定义子元素在父元素中能分配多少剩余空间，1是分配1份剩余空间。【从剩余空间中划分分数】，也可以写百分比，比如20%，指的是每个子元素占20%，若是多行，也就是一行展示5个。 |
| 34 | max-width |
最大宽度 |
| 35 | min-width |
最小宽度（适用于移动端） |
| 36 | .class [class^="以开头"] {} |
属性选择器，所有的类中以xx开头的，用于定义统一样式。（比如多个元素只是背景图不一样，其他样式均一样的情况，可以这样定义） |
| 37 | text-shadow |
文字阴影text-shadow: 1px 1px rgba(0,0,0,.2);
|
| 38 | padding: 10px 20px; |
宽高根据实际设置 |
| 39 | vertical-align: top; |
ul沿顶部对齐 |
| 40 | vertical-align:text-top; |
居中显示 |
| 41 | 子盒子在父盒子中水平居中 |
left: 50%;transform: translateX(-50%); |
| 42 | target="_blank" |
a标签中，不关闭改页面，跳转新页面。 |
| 43 | opacity |
该元素的半透明度，参数是0-1，例：opacity:0.6;
|
| 44 | 文字行高=高设置上下边距 |
height: 80rpx; line-height: 80rpx;border-bottom: 1rpx solid #efebeb;设置底边框，多行文字间的距离
|
| 40 | position: sticky; |
结合投票来进行使用，实现粘贴性布局（适应性差），属性top，意思是当距离浏览器顶部≥xx px时，固定在顶部，背景是透明的，需要给他加背景色； |
| 40 | height：100vh |
高度为视口的高度 |
| 40 | 居中显示 | |
| 40 | 居中显示 |
1、清除input为空时后面的 x
--清除谷歌浏览器下的 search 叉号
input::-webkit-search-cancel-button{
display: none;
}
--清除IE下的 search 叉号
input[type=search]::-ms-clear{
display: none;
}
2、去除input或button的默认边框和样式
outline: none;
background-color: transparent;
border:0;
3、背景图半透明，背景图上的文字不透明；
<style type="text/css">
.box:before {
width: 100%;
height: 300px;
border: 1px solid gray;
background: url(img/index/banner_01.png) no-repeat;
background-size: 500px 300px;
/*opacity设置半透明效果*/
opacity: .5;
/* content和：before搭配使用 */
content: "";
/* 使用绝对定位，z-index=-1设置为下层显示 */
position: absolute;
z-index: -1;
</style>
</head>
<body>
<div class="box">
<p>利用伪元素:before添加一个半透明的背景</p>
</div>
image.png
背景图片上面展示一个半透明的颜色；
思路：写子父级div，父级设置宽高和背景图，儿子宽高与父亲一致，加一个半透明的背景色；
<style type="text/css">
.f {
width: 696px;
height: 464px;
background: url(img/index/pro_1.png) no-repeat;
}
.s {
width: 100%;
height: 100%;
background: rgba(0,154,255, .8);
color: #fff;
}
</style>
</head>
<body>
<div class="f">
<div class="s"></div>
</div>
5、【让子盒子在父盒子中水平和垂直居中】
<style type="text/css">
.box {
width: 500px;
height: 500px;
margin-top: 100px;
background-color: red;
position: relative;
}
.area {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
background-color: deepskyblue;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box">
<div class="area"></div>
</div>
6、制作小三角
image.png
.box1 {
width: 0;
height: 0;
border: 10px solid transparent;
border-right-color: red;
}
7、输入快递单号：
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.con {
position: relative;
display: none;
margin: 10px auto;
width: 175px;
height: 34px;
line-height: 36px;
font-size: 22px;
color: #333;
border: 1px solid #CCCCCC;
box-shadow: 1px 1px 1px #ccc;
}
.jd {
display: block;
margin: 0 auto;
border: 1px solid #ccc;
outline: none;
}
.con::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 35px;
left: 7px;
border: 8px solid transparent;
border-top-color: #dcdcdc;
}
</style>
</head>
<body>
<div class="serach">
<div class="con"></div>
<input type="text" placeholder="请输入信息" class="jd" />
</div>
</body>
<script>
var icon=document.querySelector('.con');
var jd_input=document.querySelector('.jd');
jd_input.addEventListener('keyup',function(){
if(this.value==0){
icon.style.display='none';
}else{
icon.style.display='block';
icon.innerText=this.value;
}
})
</script>
</html>
单行文本溢出省略号代替(父盒子需要设置宽度)
/*若不是块级元素需要加*/
/*display: block;*/
/*单行文本溢出用省略号代替*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
多行文本溢出省略号代替
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;//展示几行，最好给盒子加一个高度
CSS实现底部弧度效果
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 250px;
margin: auto;
overflow: hidden;
}
.home_top {
position: relative;
width: 100%;
height: 100px;
text-align: center;
line-height: 50px;
}
.home_top:after {
width: 140%;
height: 100px;
position: absolute;
left: -20%;
top: 0;
z-index: -1;
content: '';
border-radius: 0 0 50% 50%;
background: linear-gradient(#2CBAF9, #04A9F4);
}
</style>
</head>
<body>
<div class="box">
<div class="home_top"> 这里是内容 </div>
</div>
</body>
</html>
首行缩进
text-indent: 2em;
input 标签placeholder文字居中
<style type="text/css">
input::-ms-input-placeholder {
text-align: center;
}
input::-webkit-input-placeholder {
text-align: center;
</style>
hover加边框时，防止内部文字抖动；
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 400px;
height: 400px;
margin: 100px auto;
}
a {
display: inline-block;
width: 101px;
height: 38px;
line-height: 38px;
background-color: #ccc;
text-align: center;
color: #000000;
font-size: 18px;
text-decoration: none;
/*border: 1px solid transparent;*/
}
a:hover {
/*width: 99px;
height: 36px;
line-height: 36px;*/
color: #000;
/*border: 1px solid red;*/
background-color: #fff;
/*box-shadow: 1px 1px 1px 1px #000000;*/
box-shadow: 0 0 0 1px black;
/*outline: 1px solid black;*/
}
</style>
</head>
<body>
<div class="box">
<a href="#">查看详情</a>
</div>
</body>
</html>
纯css3导航栏
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
font-size: 20px;
color: #f4f1de;
}
body {
display: flex;
/*vh浏览器视口的高度，1vh=1%浏览器视口*/
height: 100vh;
align-items: flex-start;
justify-content: center;
background-image: linear-gradient(#00bcd4,#fc9574);
}
.shell {
margin-top: 10px;
display: flex;
justify-content: center;
}
.button ,.portrait {
background-color: #50536e;
width: 170px;
height: 65px;
line-height: 65px;
text-align: center;
transition: .3s;
cursor: pointer;
}
.portrait::before {
content: '';
display: block;
width: 100px;
height: 100px;
background: url(img/photo.png);
border-radius: 50%;
transform: translate(30px,-10px);
background-size: cover;
border: 2px solid #e54d42;
}
.information {
width: 220px;
background-color: #e07a5f;
transform: translate(-23px,-500px);
border-radius: 10px;
padding: 20px 0;
line-height: 0;
height: 0;
/*opacity: 0;*/
transition: .3s;
}
.button:hover {
background-color: #d15a39;
}
.button li:hover {
background-color: #ffb29d;
}
.button ul li {
height: 0;
transition: .2s;
opacity: 0;
transform: translateY(-65px);
background-color: #E07A5F;
}
.button:hover li {
height: 65px;
opacity: 1;
transform: translateY(0);
}
.portrait:hover .information {
opacity: 1;
line-height: 65px;
transform: translate(-23px, -10px);
height: auto;
}
.information>li:hover {
background-color: #ffb29d;
}
</style>
</head>
<body>
<ul class="shell">
<li class="button">
<span>消息</span>
<ul>
<li>企业介绍</li>
<li>企业介绍</li>
<li>企业介绍</li>
</ul>
</li>
<li class="button">
<span>内容</span>
<ul>
<li>企业介绍</li>
<li>企业介绍</li>
<li>企业介绍</li>
</ul>
</li>
<li class="portrait">
<ul class="information">
<li>哈哈哈哈</li>
<li>哈哈哈哈</li>
<li>哈哈哈哈</li>
<li>哈哈哈哈</li>
</ul>
</li>
<li class="button">
<span>介绍</span>
<ul>
<li>企业介绍</li>
<li>企业介绍</li>
<li>企业介绍</li>
</ul>
</li>
<li class="button">
<span>文化</span>
<ul>
<li>企业介绍</li>
<li>企业介绍</li>
<li>企业介绍</li>
</ul>
</li>
</ul>
</body>
</html>
placeholder 样式处理
input::-webkit-input-placeholder { /* WebKit browsers */
float: right;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
float: right;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
loat: right;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
loat: right;
}
