css常用代码

去除浮动

.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;
   width: 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;
   width: 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-width: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; 
   width: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{
   width: 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;
    width: 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;
    width: 20px;
    height:5px;
    background: #ccc;
    -webkit-transform: rotate(-90deg);
}

css实现一个三角形

#aa{
   width: 0;
   height: 0;
   border:20px solid;
   border-color: red white white white;
}

css实现一个打钩

#aa{
   background-color: white;	
   width: 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;
   width: 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;
   width: 80px;
   height: 80px;
}

posted @ 2019-12-13 22:01 一个年轻淫阅读(305) 评论(0) 编辑收藏举报

刷新页面返回顶部