CSS + Vue 常见样式

css中超出变为省略号：

超出一行显示省略号

超出多行显示省略号 （-webkit-line-clamp即为几行）

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

CSS换行和不换行

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

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

微软雅黑的写法：

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

div{font-family:”Microsoft YaHei”}

内部阴影（css3）

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(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

背景使用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

CSS3 :hover
https://www.cnblogs.com/shenlaiyaoshi/p/5865315.html

占位和不占位隐藏元素

不占位隐藏
display:none;   
占位隐藏
visibility:hidden;

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

纯css三角形

向上的三角形

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

选取第几个标签元素（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

Pointer

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

css 弹框遮罩层 (蒙版)

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

li 去掉小圆点及相关属性

ul {list-style-type:none;}

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

清除浮动（子元素设置了float属性后父元素高度为0）

1、父元素设置overflow:hidden;或overflow:auto 等。
https://www.cnblogs.com/chakson/p/4709762.html
2、给父元素设置清除浮动样式

 

   
    Left 
    Right

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

vue :style用法（三元表达式）(多个样式用逗号隔开)

样式

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

vue :class 用法（动态绑定一个或多个class）

  样式
  样式
  
  
  
  // classA 是固定不变的，classB与classC 是根据条件来判断是否加入

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

页面高度自适应 height:100%;

html,body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;  /*这里是关键*/
}

https://www.cnblogs.com/liaojie970/p/7260039.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

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的光标（隐藏光标，可正常输入）

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

修改的样式

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

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

input 选中状态样式

input:focus { 
    color: #fff;
}

flex一系列属性详解

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

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

修改原生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实现自定义虚线边框

#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

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 宽高度百分比数减去固定像素值的办法（例：100%-20px）

height:calc(100% - 20px);

保证图片在div中自适应显示，不变形

解决方法：同时设置图片的最大宽高为100%

max-width:100%;
max-height:100%;

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

图片在div中垂直居中

 img { vertical-align: middle; }

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

html中，td的宽度无法设置

解决办法：为td中的div设置宽度

aaaa
td div { width: 100px;}

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

border影响元素宽高（box-sizing）

.item{
    width: 200px;
    height: 400px;
    border: 2px solid red;
    box-sizing: border-box;
}

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

让父元素适应子元素的宽高

解决办法：

div { 
   display:inline-block;
   border:1px solid red;
}

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

给移动端页面设置背景颜色后，整个屏幕填充背景色


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

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

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

移动端最小最大宽度

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

根据屏幕大小设置字体大小

https://www.cnblogs.com/syh119/p/9109572.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;
}

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

flex布局下的float

使用 ：margin-left: auto;（可以不用float了）

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

CSS 宽高度百分比数减去固定像素值的办法（例：100%-20px）

height:calc(100% - 20px);
* 减号两边一定要打空格，不然会失效

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

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同高


    
        
            aaaaaaaaaa

            aaaaaaaaaa

            aaaaaaaaaa

            aaaaaaaaaa

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里的垂直居中

margin: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
transform: translateY(-50%);

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

css3 calc()自适应布局属性 ---浏览器版本兼容性的问题

width: calc(100% - 20px);

calc(100% - 20px); 中间必须有空格
https://blog.csdn.net/u011630575/article/details/49097205/

标签中识别空格

会根据代码中的换行，展示对应的样式

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

去掉textarea小三角，禁止调整大小

resize: none;

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

实现图片翻转

transform:rotateY(180deg);

http://www.jq22.com/webqd1996

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

输入框的高度宽度，根据输入内容自适应

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

父元素的宽度不定，随子元素变化

给父元素设置 display:inline-block;
https://segmentfault.com/q/1010000014474283

CSS + Vue 常见样式

css中超出变为省略号：

CSS换行和不换行

微软雅黑的写法：

内部阴影（css3）

::after 伪元素

滚动条

border透明度

背景使用opacity设置透明度时，导致字体也出现透明

鼠标移入移出时改变样式

占位和不占位隐藏元素

纯css三角形

选取第几个标签元素 （nth-child、first-child、last-child）

指定父元素的最后一个 p 元素

css鼠标样式cursor

css 弹框遮罩层 (蒙版)

li 去掉小圆点及相关属性

清除浮动（子元素设置了float属性后父元素高度为0）

vue :style用法（三元表达式）(多个样式用逗号隔开)

vue :class 用法（动态绑定一个或多个class）

页面高度自适应 height:100%;

css使用精灵图

css3设置背景图片的大小

ipad横竖屏切换，页面适配方法

如何实现隐藏input的光标（隐藏光标，可正常输入）

修改 的样式

input 选中状态 样式

flex一系列属性详解

css3 定时移动

修改原生js 复选框的样式

css实现自定义虚线边框

css 小圆点

CSS 宽高度百分比数减去固定像素值的办法（例：100%-20px）

保证图片在div中自适应显示，不变形

图片在div中垂直居中

html中，td的宽度无法设置

border影响元素宽高（box-sizing）

让父元素适应子元素的宽高

给移动端页面设置背景颜色后，整个屏幕填充背景色

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

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

移动端最小最大宽度

根据屏幕大小设置字体大小

css背景图充满整个屏幕

flex布局下的float

CSS 宽高度百分比数减去固定像素值的办法（例：100%-20px）

css背景图片自适应

如何让td内容高度自适应，与tr同高

css处理浏览器输入框记住账号密码后的背景色

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

img 图片在div里的垂直居中

css3 calc()自适应布局属性 ---浏览器版本兼容性的问题

标签中识别空格

去掉textarea小三角，禁止调整大小

实现图片翻转

div禁用，不可点击（只是样式，实际操作，可以在点击事件里加判断）

输入框的高度宽度，根据输入内容自适应

css3 动画平移效果

父元素的宽度不定，随子元素变化

你可能感兴趣的:(CSS + Vue 常见样式)

选取第几个标签元素（nth-child、first-child、last-child）

修改的样式

input 选中状态样式