CSS+Vue应用

CSS

微软雅黑写法

“微软雅黑”使用英文“Microsoft YaHei”

div{font-family:”Microsoft YaHei”} 
内部阴影 css3 -- box-shadow
  • box-shadow: h-shadow v-shadow blur spread color inset;
    | h-shadow | 必需。水平阴影的位置。允许负值。
    | v-shadow | 必需。垂直阴影的位置。允许负值。
    | blur | 可选。模糊距离。
    | spread | 可选。阴影的尺寸。
    | color | 可选。阴影的颜色。请参阅 CSS 颜色值。
    | inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
div
{
background-color:yellow;
width:200px;
height:100px;
box-shadow:10px 10px 30px 20px pink inset;
}
* 单侧阴影
box-shadow:0 -1px 0 0 #FFF inset;

image.png

http://www.divcss5.com/css3-style/c727.shtml

伪元素(::after)
p::before{
    content: '';
    color: blue;
}

https://www.cnblogs.com/keyi/p/5943133.html
http://www.w3school.com.cn/tiy/t.asp?f=css3_image_gallery

滚动条
隐藏滚动条同时又可以滚动
::-webkit-scrollbar {display:none}

https://blog.niceue.com/front-end-development/hide-scrollbar-but-still-scrollable-using-css.html

  定义滚动条轨道
  ::-webkit-scrollbar-track {
    background-color: #141935;
  }
  定义滚动条滑块
  ::-webkit-scrollbar-thumb {
    background-color: #141935;
  }

 例:
 .menus_list ::-webkit-scrollbar-thumb {
   background-color: rgba(0, 154, 255, .8);
 }

参考:https://www.cnblogs.com/vicky-li/p/css.html

border透明度(HSLA)
  • HSLA(H,S,L,A)
    H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
    S:Saturation(饱和度)。取值为:0.0% - 100.0%
    L:Lightness(亮度)。取值为:0.0% - 100.0%
    A:Alpha透明度。取值0~1之间。
    兼容性:不支持IE8及以下版本
例:
border-bottom:1px solid hsla(0,0%,100%,.3);

https://blog.csdn.net/It_rod/article/details/80615557

占位和不占位隐藏元素
不占位隐藏
display:none;   
占位隐藏
visibility:hidden;   

参考:https://blog.csdn.net/BuquTianya/article/details/50771986

CSS换行和不换行
文字超出自动换行
word-wrap: break-word; 
word-break: normal; 
强制不换行
white-space:nowrap;
强制英文单词断行
word-break:break-all;

https://blog.csdn.net/liuyan19891230/article/details/50969393

选取第几个标签元素 (nth-child、first-child、last-child)
最后一个标签元素样式
li:last-child{background:#090}

https://blog.csdn.net/zsg88/article/details/64165993/

指定父元素的最后一个 p 元素
p:last-of-type {
  background:#ff0000;
}

http://www.w3school.com.cn/cssref/selector_last-of-type.asp

css鼠标样式cursor
<span style="cursor:pointer">Pointer</span>

https://blog.csdn.net/wangshiting/article/details/75661146

li 去掉小圆点及相关属性
ul {list-style-type:none;}

https://blog.csdn.net/business122/article/details/7973638

页面高度自适应 height:100%;
html,body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;  /*这里是关键*/
}

https://www.cnblogs.com/liaojie970/p/7260039.html

css3设置背景图片的大小
/* 将背景图片等比缩放填满整个容器 */
 background-size:cover;

https://www.cnblogs.com/imguo/p/5772668.html

ipad横竖屏切换,页面适配方法
@media screen and (orientation: portrait) {
    /*竖屏 css*/
 }
@media screen and (orientation: landscape) {
    /*横屏 css*/
}

https://blog.csdn.net/wangle_style/article/details/81101161

如何实现隐藏input的光标(隐藏光标,可正常输入)
<style>
input{
  color:transparent;
  text-shadow:0 0 0 red;
}
</style>

https://blog.csdn.net/u010730897/article/details/72721960

input 选中状态 样式
input:focus { 
    color: #fff;
}
flex一系列属性详解

https://www.cnblogs.com/xianxianxxx/p/8086554.html

修改原生js 复选框的样式
.export_custom input[type="checkbox"]{width:10px;height:10px;display: inline-block;text-align: center;vertical-align: middle; line-height: 14px;position: relative;top: -1px;border-radius: 50%;}
.export_custom input[type="checkbox"]::before{content: "\2713";position: absolute;top: -2px;left: -2px;background: #cabdbd;color: #fff;width: 14px;height: 14px;border: none;border-radius: 50%;}
.export_custom input[type="checkbox"]:checked::before{content: "\2713";background-color: #F5A400;position: absolute;top: -2px;left: -2px;width:14px;height: 14px;border: none;color:#fff;font-size: 13px;border-radius: 50%;}

http://www.cnblogs.com/cloud-k/archive/2018/03/15/8572438.html

CSS 宽高度百分比数减去固定像素值的办法(例:100%-20px)
height:calc(100% - 20px);
图片在div中垂直居中
 img { vertical-align: middle; }

https://blog.csdn.net/qq_38071635/article/details/81068694

border影响元素宽高(box-sizing)
.item{
    width: 200px;
    height: 400px;
    border: 2px solid red;
    box-sizing: border-box;
}

https://blog.csdn.net/TalonZhang/article/details/84945411

CSS应用

谷歌浏览器字体如何改到12px以下

解决办法:利用css3的transform属性

span {
         font-size: 12px;
         -webkit-transform-origin-x: 0; // 缩小后文字位置不变
         -webkit-transform: scale(0.90); // 缩小元素(文字随之缩小)
}

https://blog.csdn.net/im_dogg/article/details/93891050h
https://blog.csdn.net/wkw1598727534/article/details/90692146

设置无效
原因:所在元素未设置宽高,无法缩放
解决办法:给元素加宽高

span {
         display: inline-block;
         width: 100px;
         height: 20px;
         font-size: 12px;
         -webkit-transform-origin-x: 0;
         -webkit-transform: scale(0.90);
}
问题:display: flex; 导致子元素宽度被压缩

解决办法:

width: 120px;
flex-shrink: 0; /* 用数值来收缩比例 默认值为1 */

https://www.cnblogs.com/jisi2012/p/14521951.html

css中超出变为省略号:
超出一行显示省略号
<style>
     div{
         width:100%;
         overflow: hidden;
         white-space:nowrap;
         text-overflow:ellipsis;
     }
</style>
超出多行显示省略号 (-webkit-line-clamp即为几行)
<style>
    div {
      overflow:hidden; 
      text-overflow:ellipsis;
      display:-webkit-box; 
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;  
    }
</style>

https://blog.csdn.net/Yiright/article/details/53230760

  • 不生效可能是高度问题,解决办法:
max-height: 60px;
white-space: normal;

https://www.php.cn/faq/509103.html

背景使用opacity设置透明度时,导致字体也出现透明的问题解决
background-color:rgba(0, 0, 0, .7);

https://blog.csdn.net/gll77/article/details/79713082

鼠标移入移出时改变样式
  • CSS :hover 同级元素
#home:hover +.sign_out {
   display: block !important;
}

https://blog.csdn.net/shengjon/article/details/78050413

css 弹框遮罩层 (蒙版)

https://blog.csdn.net/Dzq_Boyka/article/details/80592346
https://blog.csdn.net/yunsiwl5/article/details/80365956

清除浮动(子元素设置了float属性后父元素高度为0)
<style type="text/css"> 
   .left{float:left;}
   .right{float:right;}
   /*给父元素设置  清除浮动代码*/
   .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
   .clearfloat{zoom:1}
</style> 
<body>
  <div class="clearfloat"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
  </div>
</body>

https://www.cnblogs.com/nxl0908/p/7245460.html

css使用精灵图
span {
   width: 20px;
   height: 20px;
   background-image: url(icno.png);  //引用精灵图
   background-size: 60px 40px;
   background-position: -20px -20px;
}

https://www.cnblogs.com/liaojie970/p/7260039.html

修改 <input type=file> 的样式

input {opacity:0;}
隐藏input元素,点击图片时,调用input方法

https://blog.csdn.net/qq_32623363/article/details/80878408

css3 定时移动
let leftnumber = 100
      let time = setInterval(function () {
        leftnumber -= 10
        $('#moveTable').css({left: leftnumber + '%'})
        if (leftnumber <= 0) {
          console.log(leftnumber)
          clearInterval(time)
        }
      }, 40)

https://blog.csdn.net/qq471011042/article/details/79339691

css实现自定义虚线边框
#post .post_content .el-table td {
      border-bottom: 1px dashed transparent;
      background: linear-gradient(white,white) padding-box,
      repeating-linear-gradient(-45deg,#FFD786 0,#FFD786 0.2em,white 0,white 0.4em);
  }

https://www.cnblogs.com/libin-1/p/7096926.html

保证图片在div中自适应显示,不变形
  • 解决方法:同时设置图片的最大宽高为100%
max-width:100%;
max-height:100%;

https://blog.csdn.net/weixin_41863239/article/details/87713884

html中,td的宽度无法设置
  • 解决办法:为td中的div设置宽度
<td><div>aaaa</div></td>
td div { width: 100px;} 

https://www.jb51.net/web/166296.html

给移动端页面设置背景颜色后,整个屏幕填充背景色
html,body{
    margin:0;
    padding:0;
    outline:none;
    list-style:none;
    width:100%;
    height: 100%;
    background: #012145;
    font-family:"微软雅黑";
}

https://blog.csdn.net/qq_32849999/article/details/82864255

网页移动端适配动态修改页面font-size

https://www.jianshu.com/p/19c71db5fc9f
根据屏幕大小设置字体大小
https://www.cnblogs.com/syh119/p/9109572.html

使用writing-mode让文字竖向排版

https://blog.csdn.net/clschen/article/details/51221371

移动端最小最大宽度

在移动端最小宽度是320px;在不考虑横屏的情况下,就是414px。
https://www.cnblogs.com/zlj123/p/6257506.html

css背景图充满整个屏幕
.login{
  background-size:cover;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: url("../../assets/login.png")no-repeat center center;
}
<div class="login"></div>

https://www.cnblogs.com/IT123/p/10882819.html

flex布局下的float
使用 :margin-left: auto;(可以不用float了)

https://www.jianshu.com/p/792aec32039f

css背景图片自适应
.login {
    background-image:url("../../assets/images/login/login.png");
    background-repeat:no-repeat;
    background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
  }
  • 浏览器支持:
    Firefox 3.6+ , Chrome 1.0+ , Opera 9.63+, IE9 +

https://zhidao.baidu.com/question/2080394442897317548.html

如何让td内容高度自适应,与tr同高
<table>
    <tr>
        <td>
            aaaaaaaaaa<br />
            aaaaaaaaaa<br />
            aaaaaaaaaa<br />
            aaaaaaaaaa<br />
        </td>
        <td style="width: 200px; height: 0px;">
            <div style="background-color: #f00; width: 100%; height: 100%;"></div>
        </td>
    </tr>
</table>
  • td高度为0,里面的div高度为100%

https://bbs.csdn.net/topics/392566943

css处理浏览器输入框记住账号密码后的背景色
input:-webkit-autofill {
      -webkit-text-fill-color: #fff !important;
      transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
    }

https://blog.csdn.net/u011752272/article/details/66973367

CSS实现宽度自适应100%,宽高16:9的比例的图片或者矩形

https://www.cnblogs.com/yf-html/p/9626000.html

img 图片在div里的垂直居中
  • 方法1:transform
margin: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
transform: translateY(-50%);

https://blog.csdn.net/qikule/article/details/83087729

  • 方法2:position
div {
    width: 200px;
    height: 200px;
    position: relative; 
}
img {
   width:80px;
  height:50px;
   position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;//使其垂直居中
}

http://www.divcss5.com/css3-style/c56620.shtml

css3 calc()自适应布局属性 ---浏览器版本兼容性的问题
height:calc(100% - 20px);
* 减号两边一定要打空格,不然会失效

https://blog.csdn.net/u011630575/article/details/49097205/
https://blog.csdn.net/qq_35771141/article/details/90598813

标签中识别空格
<div v-html="data" style="white-space:pre"></div>
  • 会根据代码中的换行,展示对应的样式

https://blog.csdn.net/qq_36370731/article/details/78069056

在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示,取值有:

  • normal:默认,忽略文本中所有的空白、换行符;只有文本存在
    或文本达到框的约束时,文本才会换行
  • nowrap:和normal类似,忽略文本中所有的空白、换行符;遇到框的宽度约束时不会自动换行,文本只有在有 br 时才会换行
  • pre:保留文本中的空白、换行符;遇到框的宽度约束时不会自动换行,文本存在
    或文本中有换行符时,文本才会换行
  • pre-wrap:和pre类似,保留文本中的空白、换行符;文本存在
    或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行
  • pre-line:会略文本中的空白符;文本存在
    或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行
    https://blog.csdn.net/liuxiao723846/article/details/118994673
去掉textarea小三角,禁止调整大小
resize: none;

https://blog.csdn.net/qianqian901108_/article/details/52299634

实现图片翻转
transform:rotateY(180deg);

http://www.jq22.com/webqd1996

div禁用,不可点击(只是样式,实际操作,可以在点击事件里加判断)
<div :class="versionPage == 1?'notclick':''"></div>  
.notclick {
     cursor:not-allowed;
     opacity: 0.6;
}

https://blog.csdn.net/wyh_mwk/article/details/81777270
https://blog.csdn.net/Devio_001/article/details/90291984

输入框的高度宽度,根据输入内容自适应
 <div id="textarea_div1" contenteditable="true" v-html="form.make_demand" style="white-space: pre;">
  • 1、contenteditable="true" 将div写成可编辑,可输入内容
  • 2、直接绑定输入值,v-html绑定值,可以获取到回车等格式,设置为white-space: pre;可以按回车后的格式展示,宽高不定,可以设置最大宽度,也可以不设置,高度自适应
  • 3、获取值:this.form.make_demand = $('#textarea_div1').html(),存的数据为带有样式的字符串
    https://www.cnblogs.com/chenbeibei520/p/9802545.html
css3 动画平移效果
@keyframes changDeg{
      0%{
        transform:translate(0, 0);
      }
      50% {
        transform:translate(50px, -50px);
      }
      100%{
        transform:translate(0, 0);
      }
    }
    img {
        width: 100%;
        position: absolute;
        left: 0;
        animation:changDeg 30s linear 0s infinite;
    }

https://blog.csdn.net/wangzhneg123/article/details/87894305

父元素的宽度不定,随子元素变化(让父元素适应子元素的宽高)
@media 响应式媒体查询
 /*屏幕大于1200排序(大屏幕电脑)*/
 @media screen and (min-width: 1200px){} 
/*屏幕在1024px到1199之间(中屏幕电脑)*/
 @media screen and (min-width: 1024px) and (max-width: 1199px){} 
/*屏幕在768px到1023之间(小屏幕-pad)*/
 @media screen and (min-width: 768px) and (max-width:1023px){}
 /*屏幕在480px到768之间(主要是手机屏幕)*/ 
@media screen and (max-width: 768px){}

https://www.mybj123.com/2975.html

button的四种状态

1.普通状态2,鼠标hover状态 3.active 点击状态 4.focus 取得焦点状态

      .btn:hover {
            background-color: #ff0000;
        }
        /*active 要在后面 否则会被hover覆盖*/
        .btn:focus {
            background-color: #00ff00;
        }
        .btn:active {
            background-color: #000000;
        }

https://blog.csdn.net/isaisai/article/details/41944033

鼠标:不可点击
鼠标不可点击主要是两种表现:
1.鼠标不可点击时的显示状态
cursor: not-allowed
2.鼠标原有的事件不能实现
pointer-events:none

https://blog.csdn.net/weixin_42322501/article/details/81941443

vue中应用

:style用法(多个样式用逗号隔开)
<p :style="{color:(tabIndex==0?red:‘#fff‘)}">样式</p>

http://www.mamicode.com/info-detail-2179823.html

:class 用法
  <p :class="{'active':tabIndex==0}">样式</p>
  <p :class="{'active':tabIndex==0, 'active2': flag}">样式</p>
  <div :class="{ red: isRed }"></div>
  <div :class="[classA, classB]"></div>
  <div :class="[classA, { classB: isB, classC: isC }]">
  // classA 是固定不变的,classB与classC 是根据条件来判断是否加入

https://www.jianshu.com/p/e4248eb7c92a

  • :class 多个样式
:class="[email!=''?'makeColor':'',result.email===false?'makeColorRed':'']"

https://blog.csdn.net/zhq_zvik/article/details/86692280

css 小圆点
    .circle {
        width: 14px;
        height: 14px;
        display: inline-block;
        border-radius: 50%;
        margin-right: 10px;
        background: #f5a400;
    }

https://blog.csdn.net/wangzongyang1025_/article/details/87869381

纯css三角形
向上的三角形
<div class="triangle_border_up">
   <span></span>
</div>
<style>
.triangle_border_up{
   width:0;
   height:0;
   border-width:0 30px 30px;
   border-style:solid;
   border-color:transparent transparent #333;/*透明 透明  灰*/
   margin:40px auto;
   position:relative;
}
</style>

https://www.cnblogs.com/blosaa/p/3823695.html

带文字的三角形
image.png
<template>
  <!-- 右侧三角形的图片 -->
  <div class="triangle-image">
    <div
      class="triangle-image_bg"
      :style="{
        borderBottomColor: bgColor ? bgColor : ''
      }"
    ></div>
    <div class="triangle-image_text">{{ titleText }}</div>
  </div>
</template>

<script>
export default {
  name: 'TriangleImage',
  props: {
    bgColor: {
      type: String,
      default: '#BD3124' // 默认红色
    },
    titleText: {
      type: String,
      default: '迟到'
    }
  }
}
</script>

<style lang="less" scoped>
.triangle-image {
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
  width: 28px;
  height: 28px;
  &_bg {
    width: 0;
    height: 0;
    border-bottom: 28px solid transparent;
    border-right: 28px solid transparent;
    border-left: 28px solid transparent;
    transform: rotate(45deg);
    position: absolute;
    top: -4px;
    right: -18px;
  }
  &_text {
    font-size: 12px;
    color: #ffffff;
    transform: rotate(45deg);
    position: relative;
    top: 0;
    right: 0;
  }
}
</style>

https://blog.csdn.net/c347087870/article/details/109648115

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,822评论 25 707
  • 在此特此声明:一下所有链接均来自互联网,在此记录下我的查阅学习历程,感谢各位原创作者的无私奉献 ! 技术一点一点积...
    远航的移动开发历程阅读 11,092评论 12 197
  • 世家咋地你咬我 程诺这句玩笑话倒是让康博认真思考了起来,想了想说道:“你说的倒也不错,如果我们这一门一直不得势,像...
    诺阳阁阅读 260评论 0 0
  • 简书应用下载了有快一个月的时间了吧,然后好像这是第二次打开应用,,,刚开始看到广告君说的可以自己发一些文章或是感想...
    ec3a0f50d5e2阅读 247评论 0 1
  • 星期五上午,Y小姐坐在书桌前学习一门网络课程——“更无用的写作课”。窗外刚下过雨,空气湿漉漉的,花园里的植物绿得发...
    随机漫步的傻妞阅读 290评论 0 2